Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
  </div>
</nav>

Buttons

<button class="btn btn-primary">Click</button>

Button Types

btn-success
btn-danger
btn-warning
btn-outline-primary

Cards

<div class="card">
  <img src="img.jpg" class="card-img-top">

  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p>Content</p>
  </div>
</div>

Forms

Input

<input type="text" class="form-control">

Label

<label class="form-label">Name</label>

Select

<select class="form-select"></select>

Checkbox

<input class="form-check-input">

Validation

is-valid
is-invalid

Tables

<table class="table">

Table Classes

table-striped
table-bordered
table-hover
table-dark

Responsive Table

<div class="table-responsive">

Alerts & Badges

Alerts

<div class="alert alert-success">
  Success
</div>

Dismissible Alert

alert-dismissible
btn-close

Badges

<span class="badge bg-primary">New</span>

 Progress Bars & Spinners

Progress Bar

<div class="progress">
  <div class="progress-bar w-75"></div>
</div>

Spinner

<div class="spinner-border"></div>

Accordion & Collapse

Accordion

<div class="accordion">

Used for FAQs.

Collapse

data-bs-toggle="collapse"

Modals

Popup component.

<button data-bs-toggle="modal" data-bs-target="#exampleModal">

Important Parts

• modal
• modal-dialog
• modal-content
• modal-header
• modal-body
• modal-footer

Carousel

Image slider.

<div id="carouselExample" class="carousel slide">

Features

• Auto slide
• Indicators
• Controls 

Offcanvas

Sidebar menu.

<div class="offcanvas offcanvas-start">

Directions:

• start
• end
• top
• bottom

Advanced Utilities

Overflow

overflow-hidden
overflow-scroll

Visibility

visible
invisible

Z-index

z-1
z-2
z-3