#### Bootstrap UI

#### Bootstrap Badges

# Example heading New

      <h1> Example heading <span class="badge bg-secondary">New</span> </h1>
      <h2> Example heading <span class="badge bg-success">New</span> </h2>
      <h3> Example heading <span class="badge bg-info">New</span> </h3>
      <h4> Example heading <span class="badge bg-primary">New</span> </h4>
      <h5> Example heading <span class="badge bg-danger">New</span> </h5>
      <h6> Example heading <span class="badge bg-warning">New</span> </h6>

#### Pill badges

Default Primary Success Info Warning Danger

      <span class="badge me-2 badge-pill bg-secondary">Default</span>
      <span class="badge me-2 badge-pill bg-primary">Primary</span>
      <span class="badge me-2 badge-pill bg-success">Success</span>
      <span class="badge me-2 badge-pill bg-info">Info</span>
      <span class="badge me-2 badge-pill bg-warning">Warning</span>
      <span class="badge badge-pill bg-danger">Danger</span>

#### Button Badges

      <button type="button" class="btn bg-primary-subtle text-primary ">
        Notifications <span class="badge bg-success">4</span>
      </button>
      <button type="button" class="btn bg-primary-subtle text-primary ">
        Profile <span class="badge bg-danger">9</span>
        <span class="sr-only">unread messages</span>
      </button>

#### Collapse (Toggle)

Link with href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

      <p>
        <a class="btn bg-info-subtle  text-info px-4 rounded-pill" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
        </a>
        <button class="btn bg-warning-subtle  text-warning px-4 rounded-pill" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
        </button>
      </p>
      <div class="collapse" id="collapseExample">
          <div class="card card-body">
              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          </div>
      </div>

#### Active & Disabled Pagination

      <nav aria-label="...">
      <ul class="pagination">
          <li class="page-item disabled"> <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a> </li>
          <li class="page-item"> <a class="page-link" href="javascript:void(0)">1</a> </li>
          <li class="page-item active"> <a class="page-link" href="javascript:void(0)">2 <span class="sr-only">(current)</span></a> </li>
          <li class="page-item"> <a class="page-link" href="javascript:void(0)">3</a> </li>
          <li class="page-item"> <a class="page-link" href="javascript:void(0)">Next</a> </li>
      </ul>
      </nav>

#### Pagination Sizing

#### Small Pagination

#### Pagination Alignment

#### Large Pagination

      <h4>Small Pagination</h4> <!-- Small -->
      <nav aria-label="...">
          <ul class="pagination pagination-sm">
              <li class="page-item disabled"> <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">1</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">2</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">3</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">Next</a> </li>
          </ul>
      </nav>
      <h4>Pagination Alignment</h4> <!-- Alignment -->
      <nav aria-label="Page navigation example">
          <ul class="pagination justify-content-center">
              <li class="page-item disabled"> <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">1</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">2</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">3</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">Next</a> </li>
          </ul>
      </nav>
      <h4>Large Pagination</h4> <!-- Large -->
      <nav aria-label="...">
          <ul class="pagination pagination-lg">
              <li class="page-item disabled"> <a class="page-link" href="javascript:void(0)" tabindex="-1">Previous</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">1</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">2</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">3</a> </li>
              <li class="page-item"> <a class="page-link" href="javascript:void(0)">Next</a> </li>
          </ul>
      </nav>

#### Image with round corner

#### Image Rounded

#### Image Circle

#### Image with thumbnail

      <div class="row">
        <div class="col-md-4">
          <h4 class="card-title">Image Rounded</h4>
          <img src="../assets/images/big/img1.jpg" alt="image" class="img-fluid rounded mb-4">
        </div>
        <div class="col-md-4">
          <h4 class="card-title">Image Circle</h4>
          <img src="../assets/images/big/img1.jpg" alt="image" class="img-fluid rounded-circle mb-4">
        </div>
        <div class="col-md-4">
          <h4 class="card-title">Image with thumbnail</h4>
          <img src="../assets/images/big/img1.jpg" alt="image" class="img-fluid img-thumbnail">
        </div>
      </div>