Top

Popular Search:

- Starter kit
- Element
- components
- forms
- tables

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

Primary Secondary Success Info Warning Danger Light Dark

    <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 text-dark">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

This is a info alert—check it out!
This is a light alert—check it out!
This is a success alert—check it out!
This is a danger alert—check it out!
This is a secondary alert—check it out!
This is a warning alert—check it out!
This is a dark alert—check it out!
This is a dark alert—check it out!

    <div class="alert alert-primary" role="alert">This is a info alert—check it out!</div>
    <div class="alert alert-secondary" role="alert">This is a light alert—check it out!</div>
    <div class="alert alert-success" role="alert">This is a success alert—check it out!</div>
    <div class="alert alert-info" role="alert">This is a danger alert—check it out!</div>
    <div class="alert alert-warning" role="alert">This is a secondary alert—check it out!</div>
    <div class="alert alert-danger" role="alert">This is a warning alert—check it out!</div>
    <div class="alert alert-light" role="alert">This is a dark alert—check it out!</div>
    <div class="alert alert-dark" role="alert">This is a dark alert—check it out!</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

Action Another Action Something 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

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

    <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">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
        </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

######

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

######

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

######

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

    <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">
              Collapsible Group Item #
              <span class="digits">1</span>
            </button>
          </h5>
        </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion">
        <div class="card-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
        </div>
      </div>
    </div>
    <div class="card">
      ...
      </div>
    <div class="card">
      ...
    </div>
    </div>