Top

Popular Search:

Basic UI Elements

Buttons Preview link 

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-light">Light Button</button>

Tag & pills Preview link

PrimarySecondarySuccessInfoWarningDangerLightDark 
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-light text-dark">Light</span>
<span class="badge badge-dark tag-pills-sm-mb">Dark</span>

Progressbar Preview link 

<div class="progress mb-2">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-primary" role="progressbar" style="width: 25%"           aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-secondary" role="progressbar" style="width: 50%"         aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
<div class="progress mb-2">
  <div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>

Alert Preview link 

<div class="alert alert-primary" role="alert">The <a class="alert-link text-white" href="#">"alert-primary"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-secondary" role="alert">The <a class="alert-link text-white" href="#">"alert-secondary"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-success" role="alert">The <a class="alert-link text-white" href="#">"alert-success"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-info" role="alert">The <a class="alert-link text-white" href="#">"alert-info"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-warning" role="alert">The <a class="alert-link text-white" href="#">"alert-warning"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-danger" role="alert">The <a class="alert-link text-white" href="#">"alert-danger"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-light" role="alert">The <a class="alert-link text-dark" href="#">"alert-light"</a> class can be used to create an alert like this one.</div>
<div class="alert alert-dark" role="alert">The <a class="alert-link text-white" href="#">"alert-dark"</a> class can be used to create an alert like this one.</div>

Popover Preview link

Dismissible popover 
<button type="button" class="btn btn-primary example-popover mr-1" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<a tabindex="0" class="example-popover btn btn-secondary" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
<button type="button" data-bs-trigger="hover" class="example-popover btn btn-success" data-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Popover title" data-offset="-20px -20px" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." >On Hover Tooltip</button>
To use java script you have to add the following script tag 
<!--popover js-->
<script src="../assets/js/popover-custom.js"></script>

Tooltip Preview link 

<button type="button" class="example-popover btn btn-primary" data-bs-container="body" data-bs-toggle="tooltip" data-bs-placement="top" title="Popover title" >Hover Me</button>
To use java script you have to add the following script tag
<!--tooltip js-->
<script src="../assets/js/tooltip-init.js"></script>

Dropdown Preview link

ActionAnother ActionSomething Else Here
<div class="dropdown-basic">
  <div class="dropdown">
    <button type="button" class="dropbtn btn-primary">Dropdown Button <span><i class="icofont icofont-arrow-down"></i></span></button>
    <div class="dropdown-content">
      <a href="#">Action</a>
      <a href="#">Another Action</a>
      <a href="#">Something Else Here</a>
    </div>
  </div>
</div>

Tab Preview link

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.

<ul class="nav nav-tabs" id="myTab3" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tabs" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent3">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p class="mb-0 m-t-30">
    This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other. This tab provide animation with gradient hover effects and amazing smooth transition for your projects. Also tab has horizontal alignment and title with amazing icons.
    </p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p class="mb-0 m-t-30">
      ...
    </p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p class="mb-0 m-t-30">
      ...
    </p>
  </div>
</div>

Accordion Preview link

Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.
Search engine optimization: Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started. One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure. Its files are compiled for easy access, and it only requires basic knowledge of HTML, CSS, and JS to modify them. 
<div id="accordion" class="default-according">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"      aria-controls="collapseOne">
        What do web designers do?
        </button>
      </h5>
    </div>
  <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
    <div class="card-body">
    Web design identifies the goals of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.
    </div>
  </div>
</div>
<div class="card">
  ...
  </div>
<div class="card">
  ...
</div>
</div>