{% extends 'layouts/base.html' %}
{% load static %}

{% block content %}

  <!-- [ Main Content ] start -->
  <div class="row">
    <!-- [ badge ] start -->
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header">
          <h5>Basic Badges</h5>
        </div>
        <div class="card-body">
          <h1>Example heading <span class="badge badge-secondary">New</span></h1>
          <h2>Example heading <span class="badge badge-secondary">New</span></h2>
          <h3>Example heading <span class="badge badge-secondary">New</span></h3>
          <h4>Example heading <span class="badge badge-secondary">New</span></h4>
          <h5>Example heading <span class="badge badge-secondary">New</span></h5>
          <h6>Example heading <span class="badge badge-secondary">New</span></h6>
        </div>
      </div>
      <div class="card">
        <div class="card-header">
          <h5>Button Badges</h5>
        </div>
        <div class="card-body">
          <button type="button" class="btn btn-primary">primary <span
              class="badge badge-light">4</span></button>
          <button type="button" class="btn btn-secondary">secondary <span
              class="badge badge-light">4</span></button>
          <button type="button" class="btn btn-success">success <span
              class="badge badge-light">4</span></button>
          <button type="button" class="btn btn-danger">danger <span
              class="badge badge-light">4</span></button>
          <button type="button" class="btn btn-warning">warning <span
              class="badge badge-light">4</span></button>
          <button type="button" class="btn btn-info">info <span class="badge badge-light">4</span></button>
        </div>
      </div>
    </div>
    <!-- [ badge ] end -->
  </div>
  <!-- [ Main Content ] end -->

{% endblock content %}