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>
  
                                  
                              

                                    
  <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 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>
  
                                  
                              

                                    
  <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>
                                  
                              

                                    
  <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>
                                        
                                    

                                  
  <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>
                                    
                                  

                    
  <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>