Framework

All Frameworks
bootstrap tailwind chakra

Theme

All Themes
Horizon UI Dashboard Motion Landing Library Soft UI Dashboard Tailwind Soft UI Design System Chakra UI Dashboard Soft UI Dashboard Riva Dashboard Tailwind Asteria Dashboard Argon Dashboard AdminKit Motion Landing Library React
All 61
Components 6
Sidebars 5
Tables 6
Cards Section 7
Profiles Section 2
Projects Section 3
Navbars 4
Typography 8
Tables Section 3
Teams Section 3
Cards 6
Contacts Section 3
Charts Section 1
Forms 1
Charts 2

Bootstrap Components - Soft UI Dashboard

Discover 6 Bootstrap Components available in Soft UI Dashboard

Button

Component from Soft UI Dashboard Builder 
<button class="btn btn-primary draggable">
    Button
</button>

Input

Component from Soft UI Dashboard Builder 
<input type="text" class="form-control draggable" placeholder="Input" aria-label="Email" aria-describedby="email-addon">

Input Group

Component from Soft UI Dashboard Builder 
<div class="form-group draggable">
    <div class="input-group">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
</div>

Dropdown

Component from Soft UI Dashboard Builder 
<div class="dropdown draggable">
  <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Primary
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

Progress

Component from Soft UI Dashboard Builder 
<div class="progress-wrapper draggable">
  <div class="progress-info">
    <div class="progress-percentage">
      <span class="text-sm font-weight-bold">60%</span>
    </div>
  </div>
  <div class="progress">
    <div class="progress-bar bg-gradient-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
  </div>
</div>

Modal

Component from Soft UI Dashboard Builder 
<button type="button" class="btn bg-gradient-primary draggable" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn bg-gradient-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn bg-gradient-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>