Component Library

Explore the available UI components and their usage examples.

Component page is loading
Buttons Typography Cards Alerts Forms Modals Tables Icons

Buttons

Button Variants

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

Button Sizes

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>

Button with Icon

<button type="button" class="btn btn-success">
  <i class="bi bi-check-circle me-1"></i> Confirm
</button>
<button type="button" class="btn btn-danger">
  <i class="bi bi-x-circle me-1"></i> Cancel
</button>

Outline Buttons

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>

Button Group

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

Display Headings

Display 1

Display 2

Display 3

Display 4

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Lead Text

This is a lead paragraph. It stands out from regular paragraphs. 

<p class="lead">This is a lead paragraph. It stands out from regular paragraphs.</p>

Text Utilities

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>

Cards

Basic Card

Card title
Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link 
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card with Image

...
Card title

Some quick example text to build on the card title.

Go somewhere 
<div class="card">
  <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Alerts

Basic Alerts

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>

Alert with Link

<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Alert with Icon

<div class="alert alert-warning" role="alert">
  <i class="bi bi-exclamation-triangle me-2"></i> This is a warning alert with an icon.
</div>

Forms

Basic Form

We'll never share your email with anyone else. 
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Form Controls

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Modals

Basic Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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"></button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Modal Sizes

<!-- Small Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">
  Small modal
</button>

<div class="modal fade" id="smallModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

<!-- Large Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
  Large modal
</button>

<div class="modal fade" id="largeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

Scrollable Modal

<!-- Scrollable Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollableModal">
  Scrollable modal
</button>

<div class="modal fade" id="scrollableModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Scrollable Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Lots of content here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tables

Basic Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Striped Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-striped">
  <!-- Same structure as basic table -->
</table>

Bordered Table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<table class="table table-bordered">
  <!-- Table contents -->
</table>

Responsive Table

# Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell 
<div class="table-responsive">
  <table class="table">
    <!-- Table with many columns -->
  </table>
</div>

Icons

Bootstrap Icons

Bootstrap comes with over 1,800 icons that can be used in your project. Here are some examples:

bi-house-door

bi-person-circle

bi-cart

bi-heart

bi-envelope

bi-search

bi-gear

bi-bell

bi-bookmark

bi-calendar

bi-chat

bi-download

<i class="bi bi-house-door"></i>
<i class="bi bi-person-circle"></i>
<i class="bi bi-cart"></i>
<i class="bi bi-heart"></i>

Icon Sizes

Small (fs-6)
Medium (fs-4)
Large (fs-2)
Extra Large (fs-1) 
<i class="bi bi-star fs-6"></i> Small (fs-6)
<i class="bi bi-star fs-4"></i> Medium (fs-4)
<i class="bi bi-star fs-2"></i> Large (fs-2)
<i class="bi bi-star fs-1"></i> Extra Large (fs-1)

Icons with Text


This is an info message

Task Completed

<button class="btn btn-primary">
  <i class="bi bi-cloud-upload me-2"></i> Upload
</button>

<div class="alert alert-info">
  <i class="bi bi-info-circle me-2"></i> This is an info message
</div>

<h3><i class="bi bi-clipboard-check me-2"></i> Task Completed</h3>

Last updated: 7/2/2025