Bootstrap 5 Cheatsheet

Bootstrap is a powerful, feature-packed frontend framewok or toolkit. It is an open-source framework for building websites and webpages. It is written in HTML, CSS, JavaScript. it helps developers create a web page that is a fully responsive website that works on mobile devices, laptops, and desktop devices.

Table of Content

What is Bootstrap?

Bootstrap is the most popular framework for creating responsive, mobile-first sites, with jsDelivr and a template starter page. It is a collection of HTML, CSS, and JavaScript code that helps developers build web pages and applications quickly and consistently.

Key Features of Bootstrap 5

Following are the key-features of the bootstrap −

Responsive Design: Bootstrap is designed to be mobile-first means it is adept to different screen sizes.
Pre-designed Components: It provides a wide range of pre-styled UI elements like buttons, forms, navigation bars, and more.
Grid System: Bootstrap includes a flexible grid system for creating layouts and organizing content.
Css Framework: It uses CSS to style web elements, ensuring a consistent look and feel across different browsers and devices.
JavaScript Plugins: Bootstrap offers JavaScript plugins for interactive elements, such as carousels, modals, and drawdowns.
Consistency: It ensures a consistent look and feel across different web pages and applications.

Installation (CDN, npm, etc.)

To use Bootstrap's CDN, visit the official website and include the script in your index.html file, whether it's for a React project, Angular, or a simple HTML/CSS project. Below are the CDNs for Bootstrap −

CDN through jsDelivr −

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"crossorigin="anonymous"></script>

If you are using compiled javascript and prefer to use Popper separately −

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

You can install Bootstrap in your respective project there you are working on using the npm (node package manager) minus;

npm install bootstrap

Responsive Design Principles

Responsive design is a web design principle that is designed to make sure websites offer an optimal viewing and interaction experience across devices, from desktop computers to smartphones. Its aim is to ensure that the website looks great and functional well, no matter the screen size, or resolution.

Grid System

A grid system is a layout that intersects vertical and horizontal lines to organize the elements within layouts, provide consistency and structure, and make the design visually pretty and easier to navigate.

The grid system uses a series of container rows and columns to layout and align content. It is built with "Flexbox" and is fully responsive.

container

The container is a fundamental building block that contains, pad, and aligns your content within a given device or viewport. Containers are the most basic layout element in bootstrap. It is required when we are using our default grid system.

<div class="container">
   <!-- Content here -->
</div>

container-*

This is responsive container allows us to specify a class that is 100% wide until the specified breakpoints reached, after which we can apply max-width for each of the higher breakpoints. For example, container-sm is 100% wide to start until the sm breakpoints it reached.

<div class="container-sm">
   100% wide until small breakpoints
</div>

<div class="container-md">
   100% wide until medium breakpoints
</div>

<div class="container-lg">
   100% wide until large breakpoints
</div>

<div class="container-xl">
   100% wide until extra large breakpoints
</div>

<div class="container-xxl">
   100% wide until extra extra large breakpoints
</div>

container-fluid

The container-fluid is a full-width container, traversing the whole width of the viewport.

<div class="container-fluid">
   ...
</div>

Breakpoints

Breakpoints is a customizable widths that determines how your responsive layout or page will works across the devises or viewport sizes in bootstrap. It uses a media query to architect your CSS by breakpoints.

Breakpoint is used to control when your layout can be adapted at a particular viewport or device size.

Following are the available breakpoint −

Breakpoints	Class infix	Dimensions
X-small	None	>576px
Small	sm	>=576px
Medium	md	>=768px
Large	l	>=992px
Extra large	xl	>=1200px
Extra extra large	xxl	>=1400px;

Columns and Rows

Following are the descriptions of rows and columns −

row

Row defines the horizontal areas that take the full width of the page. It uses the row class to define.

<div class="container">
   <div class="row">content ...</div>
</div>

columns

Columns takes the vertical space of a specified row and utilize the "col" class to define that coloumn. Additionally, we can specify breakpoints for a column. For example, the "col-sm" class is 100% wide by default, expanding to its full width until the small (sm) breakpoint is reached.

<div class="row">
   <div class="col">First-Col</div>
   <div class="col">Second-Col</div>
   <div class="col">Third-Col</div>
</div>

// column with breakpoints for small devices
<div class="row">
   <div class="col-sm">First-Col</div>
   <div class="col-sm">Second-Col</div>
   <div class="col-sm">Third-Col</div>
</div>

col-*-auto

Here we specify the column with breakpoints and auto.

<div class="row justify-content-md-center">
   <div class="col col-lg-2">
     one of 3
   </div>
   <div class="col-md-auto">
     Variable width content
   </div>
   <div class="col col-lg-2">
     one of 3
   </div>
</div>
<div class="row">
  <div class="col">
    one of 3
  </div>
  <div class="col-md-auto">
    Variable width content
  </div>
  <div class="col col-lg-2">
    one of 3
  </div>
</div>

row-cols-#

It defines how many cols you can avail in one row.

<div class="row row-cols-3">
   <div class="col">Col1</div>
   <div class="col">Col2</div>
   <div class="col">Col3</div>
   <div class="col">Col4</div>
</div>

row-cols-*-#

It defines how many cols you can avail in one row with breakpoints.

<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xxl-6">
   <div class="col">Col1</div>
   <div class="col">Col2</div>
   <div class="col">Col3</div>
   <div class="col">Col4</div>
   <div class="col">Col5</div>
   <div class="col">Col6</div>
</div>

Nesting

Nesting specifies that an inner grid system present in an outer grid system.

<div class="row">
   <div class="col-sm-3">Level 1: .col-sm-3</div>
   <div class="col-sm-9">
      <div class="row">
         <div class="col-8 col-sm-6">Level 2: .col-8 .col-sm-6</div>
         <div class="col-4 col-sm-6">Level 2: .col-4 .col-sm-6</div>
      </div>
   </div>
</div>

Typography

Typography states the styling and formatting of the text content. It includes a heading paragraph list and inline elements to ensure readability and visual appeal.

Heading

There are six HTML heading types, and we can achieve them in Bootstrap −

<p class="h1">h1-heading</p>
<p class="h2">h2-heading</p>
<p class="h3">h3-heading</p>
<p class="h4">h4-heading</p>
<p class="h5">h5-heading</p>
<p class="h6">h6-heading</p>

Display Heading

Traditional heading is designed to work best in the means of your page content. When you want the heading to stand out, then we can consider using a "display heading "- a larger, slightly more opinionated heading style.

<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>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

Text-Muted

Text will be displayed in a faded style −

<h3>
   Fancy display heading
   <small class="text-muted">With faded secondary text</small>
</h3>

Lead

Make a paragraph stands out from regular paragraphs −

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

Mark

It highlights some of the strings from the paragraph −

<p>You can use .mark class to <span class="mark">highlight</span> text.</p>

Small & Initialism

It represents side-comment and small print, like copyright and legal text. Initialsim uses the abbreviation for a slightly smaller font size.

<p class="small">This line of text is meant to be treated as fine print.</p>
<p><abbr title="attribute" class="initialism">attr</abbr></p>

Blockquote & Blockquote-footer

It uses for quoting blocks of content from another source within your document.

<blockquote class="blockquote">
   <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

<figure>
   <blockquote class="blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
   </blockquote>
   <figcaption class="blockquote-footer">
      Someone famous in <cite title="Source Title">Source Title</cite>
   </figcaption>
</figure>

List: unstyled & inline

Displaying a list with both unstyled and inline −

<ul class="list-unstyled">
   <li>Lorem ipsum dolor sit amet</li>
   <li>Consectetur adipiscing elit</li>
   <li>Nulla volutpat aliquam velit
      <ul>
         <li>Phasellus iaculis neque</li>
         <li>Purus sodales ultricies</li>
      </ul>
   </li>
   <li>Aenean sit amet erat nunc</li>
   <li>Eget porttitor lorem</li>
</ul>

<ul class="list-inline">
   <li class="list-inline-item">Lorem ipsum</li>
   <li class="list-inline-item">Phasellus iaculis</li>
   <li class="list-inline-item">Nulla volutpat</li>
</ul>

Images

In Bootstrap, images become responsive when using the class ".img-fluid". This class applies "max-width: 100%;" and "height: auto" to the image, allowing it to scale according to the parent element.

<img src="..." class="img-fluid" alt="...">

Images thumbnails

In addition to our border-radius utilities, you can use ".img-thumbnail" to give an image rounded 1px border appearance.

<img src="..." class="img-thumbnail" alt="...">

Aligning Images

We can align the images with the helper float classes or text alignment classes.

block-level images can be centred using the ".mx-auto" margin utility class.

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
   <img src="..." class="rounded" alt="...">
</div>

Tables

Tables consist of cells inside rows and columns.

Table

In Bootstrap, we can use the class ".table" to any table and, then extend it with our optional table modifier classes.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <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 colspan="2">Larry the Bird</td>
            <td>@twitter</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Table-{color} & Table-striped

Use contextual classes to color tables, table rows, or individual cells.

use the class ".table-striped" to add zebra-striping to any table row within the <tbody>.

<!DOCTYPE html>
<html>

<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <h2>Table-{color}</h2>
   <table class="table">
      <tr>
         <th scope="col">#</th>
         <th scope="col">First</th>
         <th scope="col">Last</th>
         <th scope="col">Handle</th>
      </tr>
      <tbody>
         <tr class="table-primary">
            <th scope="row">1</th>
            <td class="table-success">Mark</td>
            <td class="table-primary">Otto</td>
            <td>@mdo</td>
         </tr>
         <tr class="table-secondary">
            <th scope="row">2</th>
            <td class="table-danger">Jacob</td>
            <td class="table-info">Thornton</td>
            <td>@fat</td>
         </tr>
         <tr class="table-success">
            <th scope="row">3</th>
            <td colspan="2" class="table-warning">Larry the Bird</td>
            <td>@twitter</td>
         </tr>
      </tbody>
   </table>

   <h2>Table with striped rows</h2>
   <table class="table table-striped">
      <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 colspan="2">Larry the Bird</td>
            <td>@twitter</td>
         </tr>
      </tbody>
   </table>

</body>

</html>

Table-hover & Table-active

To add a hover effect on table rows or cells, enable the class ".table-hover".

Highlight a table row or cell by adding the class ".table-active"

<!DOCTYPE html>
<html>

<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <h2>Table-Hover</h2>
   <table class="table table-hover">
      <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>
      </tbody>
   </table>

   <h2>Table Active</h2>
   <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 class="table-active">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
         </tr>
         <tr>
            <th scope="row">2</th>
            <td class="table-active">Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
         </tr>

      </tbody>
   </table>

</body>

</html>

Table-bordered & Table-Borderless

Add class ".table-bordered" for borders on all sides of the table and cells.

Add class ".table-borderless" for a table without borders.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <h2>Table with border</h2>
   <table class="table table-bordered">
      <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>
      </tbody>
   </table>

   <h2>Table without Border</h2>
   <table class="table table-borderless">
      <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 class="table-active">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
         </tr>
         <tr>
            <th scope="row">2</th>
            <td class="table-active">Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Table Small & Caption

To create a table small, use the class ".table-sm". To add a caption at the top of the table, use the class ".caption-top" −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <h2>Table-Small with Caption</h2>
   <table class="table table-sm caption-top">
      <caption>List of users</caption>
      <thead>
         <tr class="table-dark">
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
         </tr>
      </thead>
      <tbody>
         <tr class="table-success">
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
         </tr>
         <tr class="table-warning">
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
         </tr>
      </tbody>
   </table>
</body>
</html>

Table Responsive

To create a table responsive at every breakpoint, use the class ".table-responsive" for horizontally scrolling tables.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <!-- Table -->
   <h2>Responsive-Table</h2>
   <div class="table-responsive">
      <table class="table">
         <thead>
            <tr class="table-dark">
               <th scope="col">#</th>
               <th scope="col">Heading 1</th>
               <th scope="col">Heading 2</th>
               <th scope="col">Heading 3</th>
               <th scope="col">Heading 4</th>
               <th scope="col">Heading 5</th>
               <th scope="col">Heading 6</th>
            </tr>
         </thead>
         <tbody>
            <tr class="table-success">
               <th>1</th>
               <td>Mark</td>
               <td>Otto</td>
               <td>@mdo</td>
               <td>Otto</td>
               <td>Otto</td>
               <td>Otto</td>
            </tr>
            <tr class="table-warning">
               <th>2</th>
               <td>Jacob</td>
               <td>Thornton</td>
               <td>@fat</td>
               <td>Jacob</td>
               <td>Thornton</td>
               <td>@fat</td>
            </tr>
            <tr class="table-danger">
               <th>3</th>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
               <td>Cell 5</td>
               <td>Cell 6</td>
            </tr>
         </tbody>
      </table>
   </div>
</body>
</html>

Figures

If you want to display optional content, like an image with an optional caption, consider using a figure.

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5 <figure> and <figcaption> elements.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"></script>

   <figure class="figure">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKvC7hkLJugqYHOnBeZMBE8XXsmxhmaH0AhA&s" class="figure-img img-fluid rounded" alt="...">
      <figcaption class="figure-caption">This is tutorialspoint.</figcaption>
   </figure>
</body>
</html>

Forms

A form is a container that enables users to input data, such as text, numbers, and selections, and then submit it to a server for processing. In the context of Bootstrap, a form refers to pre-styled HTML forms and components.

Form-Control

It gives the contextual form controls like inputs and textareas −

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <input type="text" class="form-control" placeholder="Default Input">

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form-Label

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <label for="formControlInput" class="form-label">Email address</label>
   <input type="email" class="form-control" id="formControlInput" placeholder="name@example.com">

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form-Control-Size

The size will define the size of the input box. It should be large, medium, or small.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg">
   <input class="form-control form-control-md" type="text" placeholder=".form-control-md" aria-label=".form-control-md">
   <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm">

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form Select

The term "Select" refers to the process of choosing one element from a set of available options.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <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>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form-Check(Checkbox) & From-Check(radio)

The checkbox allows the user to select multiple options at a time, while the radio button allows to select one option at a time.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
         Default checkbox
      </label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
      <label class="form-check-label" for="flexCheckChecked">
         Checked checkbox
      </label>
   </div>

   <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
      <label class="form-check-label" for="flexRadioDefault1">
         Default radio
      </label>
   </div>
   <div class="form-check">
      <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
      <label class="form-check-label" for="flexRadioDefault2">
         Default checked radio
      </label>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form-Check-inline(checkbox) & Form-Check-inline(radios)

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="" id="inlineCheckDefault">
      <label class="form-check-label" for="inlineCheckDefault">Default checkbox</label>
   </div>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value="" id="inlineCheckChecked" checked="">
      <label class="form-check-label" for="inlineCheckChecked">Checked checkbox</label>
   </div>

   <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="radioInline" id="inlineRadioDefault">
      <label class="form-check-label" for="inlineRadioDefault">Default radio</label>
   </div>
   <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="radioInline" id="inlineRadioChecked" checked="">
      <label class="form-check-label" for="inlineRadioChecked">Default checked radio</label>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Form-switch & Form-range

The switch is used for on/off or true/false, while range defines the control for entering a number within a defined range.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="formSwitchCheckDefault">
      <label class="form-check-label" for="formSwitchCheckDefault">Default switch checkbox input</label>
   </div>
   <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="formSwitchCheckChecked" checked="">
      <label class="form-check-label" for="formSwitchCheckChecked">Checked switch checkbox input</label>
   </div>

   <label for="formRange" class="form-label">Example range</label>
   <input type="range" class="form-range" min="0" max="5" step="0.5" id="formRange">

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Alerts

Alter provides the contextual feedback message through the popup for the user's action. To use the bootstrap alert include the class ".alert" in HTML element.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <div class="alert alert-primary" role="alert">
      A simple primary alert
   </div>
   <div class="alert alert-secondary" role="alert">
      A simple secondary alert
   </div>
   <div class="alert alert-success" role="alert">
      A simple success alert
   </div>
   <div class="alert alert-danger" role="alert">
      A simple danger alert
   </div>
   <div class="alert alert-warning" role="alert">
      A simple warning alert
   </div>
   <div class="alert alert-info" role="alert">
      A simple info alert
   </div>
   <div class="alert alert-light" role="alert">
      A simple light alert
   </div>
   <div class="alert alert-dark" role="alert">
      A simple dark alert
   </div>
</body>
</html>

Badges

Badges are the small indicator used to display count, label, or notification. Often it can be used as part of links or buttons to provide a counter. You can also use bg-color according to your convenience.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <h1>Example heading <span class="badge bg-secondary">New</span></h1>
   <h2>Example heading <span class="badge bg-primary">New</span></h2>
   <h3>Example heading <span class="badge bg-info">New</span></h3>
</body>
</html>

Badges in Button

A button can be used as a part of links or buttons to provide a counter −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- bootstrap 5 -->
   <button type="button" class="btn btn-danger">
      Notifications <span class="badge bg-primary">4</span>
   </button>
</body>
</html>

Positioned of Badges

Use utilities to modify a ".badge" and position it in the corner of a link or button.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <button type="button" class="btn btn-warning position-relative m-3">
      Inbox
      <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
         99+
         <span class="visually-hidden">unread messages</span>
      </span>
   </button>
</body>
</html>

Buttons

Bootstrap provides several predefined button styles, each of them serving its semantic purpose.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <!-- simple button -->
   <button type="button" class="btn">Click Me!</button>
</body>
</html>

Buttons with bg-color

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <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>
   
   <!-- btn-link class -->
   <button type="button" class="btn btn-link">Link</button>
</body>
</html>

Outline buttons

You can provide the button with an outline color using the class ".btn-outline-color_name".

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <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 type="button" class="btn btn-outline-warning">Warning</button>
   <button type="button" class="btn btn-outline-info">Info</button>
   <button type="button" class="btn btn-outline-light">Light</button>
</body>
</html>

Button Size

You can use the class ".btn-size" to display the buttons large, medium, and small.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <button type="button" class="btn btn-primary btn-sm">small btn</button>
   <button type="button" class="btn btn-secondary btn-md">medium btn</button>
   <button type="button" class="btn btn-success btn-lg">large btn</button>
</html>

Card

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Let's create a simple card −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <div class="card" style="width: 18rem;">
      <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 and make up the bulk of the card's
            content.</p>
         <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
   </div>
</body>
</html>

Card with Image

You can add the image on the top of the card. You can convert the card at your convenience.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <div class="card" style="width: 18rem;">
      <img src="https://www.tutorialspoint.com/images/tp_logo_436.png" class="card-img-top" alt="tutorialpoint">  
      <div class="card-body">
         <h5 class="card-title">tutorialspoint</h5>
         <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="/bootstrap/index.htm" class="btn btn-primary" target="_blank">Bootstrap</a>
         <a href="/index.htm" class="btn btn-info" target="_blank">tutorialpoint</a>
      </div>
   </div>
</body>
</html>

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. We can create interactive dropdowns using the Bootstrap class ".dropdown".

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <div class="dropdown">
      <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink"
         data-bs-toggle="dropdown" aria-expanded="false">
         Dropdown link
      </a>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
         <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>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Dropdown with bg-color

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- bootstrap 5 -->
   <!-- Example split danger button -->
   <div class="btn-group">
      <button type="button" class="btn btn-danger">Action</button>
      <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"
         aria-expanded="false">
         <span class="visually-hidden">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
         <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>
         <li>
            <hr class="dropdown-divider">
         </li>
         <li><a class="dropdown-item" href="#">Separated link</a></li>
      </ul>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Modals

Modals are dialog boxes or pop-up windows that appear on top of the current page. They are used to display alerts, notifications, or custom content.

Let's create a modal −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModal">
      Launch 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-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>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Static backdrop

The static backdrop modal can not be closed when clicking outside of it. To close this only click on the cross or close button.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
      Launch static backdrop modal
   </button>
   <!-- Modal -->
   <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
      aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">
               <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
               I will not close if you click outside me. Don't even try to press escape key.
            </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">Understood</button>
            </div>
         </div>
      </div>
   </div>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Scrollable Modal

When modal become too long for the user viewport or device, then we can create scrollable modal using the class ".modal-dialog-scrollable" to ".modal-dialog".

Navbars

The navbar is a website header that supports branding navigation, routing links, and more, including support for our collapse plugin.

Navbar-Brand

Define the brand of your website −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Navbar brand -->
   <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
         <a class="navbar-brand" href="/index.htm">tutorialspoint</a>
      </div>
   </nav>

   <!-- As a heading -->
   <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
         <span class="navbar-brand mb-0 h1">tutorialspoint</span>
      </div>
   </nav>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Navbar-Image

It define the image on the navbar −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Navbar Image -->
   <nav class="navbar navbar-light bg-light">
      <div class="container">
         <a class="navbar-brand" href="#">
            <img src="https://www.tutorialspoint.com/images/tp_logo_436.png" alt="" width="100" height="24">
         </a>
      </div>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Nav

In the navbar add the ".active" class on ".nav-link" to indicate the current page.

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Navbar -->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
         <a class="navbar-brand" href="#">Navbar</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
         </button>
         <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
               <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Home</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Features</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link" href="#">Pricing</a>
               </li>
               <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
               </li>
            </ul>
         </div>
      </div>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Navbar with Search Box

We added the search form to the navbar header −

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Navbar with search -->
   <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
         <a class="navbar-brand">Navbar</a>
         <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
         </form>
      </div>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Pagination

The process of giving a page number to each page of a book, magazine, document, etc; the page numbers given. It is used to show the series of related content that exists across multiple pages.

Pagination with previous and next button

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 5</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Pagination -->
   <nav aria-label="Page navigation example">
      <ul class="pagination">
         <li class="page-item"><a class="page-link" href="#">Previous</a></li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item"><a class="page-link" href="#">Next</a></li>
      </ul>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>
</html>

Pagination with Icons

We can paginate the next page or previous page with the next and previous icons.

<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Pagination -->
   <nav aria-label="Page navigation example">
      <ul class="pagination">
         <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous">
               <span aria-hidden="true">«</span>
            </a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
               <span aria-hidden="true">»</span>
            </a>
         </li>
      </ul>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Pagination with disabled and active states

Pagination liks are customizable for different circumstance. Use the class ".disable" for link that appear un-clickable and class ".active" to indicate the current page.

<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- Pagination -->
   <nav aria-label="...">
      <ul class="pagination">
         <li class="page-item disabled">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
         </li>
         <li class="page-item"><a class="page-link" href="#">1</a></li>
         <li class="page-item active" aria-current="page">
            <a class="page-link" href="#">2</a>
         </li>
         <li class="page-item"><a class="page-link" href="#">3</a></li>
         <li class="page-item">
            <a class="page-link" href="#">Next</a>
         </li>
      </ul>
   </nav>
   </nav>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Progress Bars

A progress bar is a visual indicator that displays the progress of a task or process.

We use the class ".proress" as a wrapper to indicate the max value of the progress bar. then we use the class ".progress-bar" to indicate the progress so far.
<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Progressbar Label

<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
         aria-valuemax="100">50%</div>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Progressbar Bg-color

<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <div class="progress">
      <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Multiple Bars & Striped Bar

You can include multiple progress bars in a progress component if you needed. You can add class."progress-bar-striped" to any ".progress-bar" to apply a stripe.

<head>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <h3>Multiple Progress Bar</h3>
   <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0"
         aria-valuemax="100"></div>
      <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0"
         aria-valuemax="100"></div>
      <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0"
         aria-valuemax="100"></div>
   </div>

   <h3>Striped Progress Bar</h3>
   <div class="progress">
      <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10"
         aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
         aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <div class="progress">
      <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
         aria-valuemin="0" aria-valuemax="100"></div>
   </div>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Tooltips

A tooltip is a small, contextual popup that displays a short piece of descriptive text when a user hovers their mouse over, focuses on, or taps an element in a user interface.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
   <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
      Tooltip on top
   </button>
   <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
      Tooltip on right
   </button>
   <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
      Tooltip on bottom
   </button>
   <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
      Tooltip on left
   </button>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>

   <!-- Initialize Tooltips -->
   <script>
      document.addEventListener("DOMContentLoaded", function () {
         var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
         var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
         });
      });
   </script>
</body>

Colors

Bootstrap defines eight types of colors used for backgrounds, text, outlines, and borders.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!--Colors-->
   <div class="bg-primary w-50 text-white p-3">Primary</div>
   <div class="bg-secondary w-50 text-white p-3">secondary</div>
   <div class="bg-success w-50 text-white p-3">success</div>
   <div class="bg-info w-50 text-white p-3">info</div>
   <div class="bg-warning w-50 text-white p-3">warning</div>
   <div class="bg-danger w-50 text-white p-3">danger</div>
   <div class="bg-light w-50 text-dark p-3">light</div>
   <div class="bg-dark w-50 text-white p-3">dark</div>
</body>

Spacing

Bootstrap provides a wide range of spacing shorthand responsive to margin, padding, and gap utility classes to modify an element's appearance.

Margin & Padding

Following are the bootstrap classes for margin and padding, Where margin applies the spacing for the outside, whereas padding applies the spacing for the inner side of an element.

The classes are named using the format {property}{side}-{size} and {property}{side}-{breakpoints}-{size} for sm, md, lg, xl, and xxl.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <!-- Margin and padding from all sides -->
   <div class="m-3 bg-warning">Margin</div>
   <div class="p-3 bg-warning">Padding</div>
   <!-- Margin and padding from top -->
   <div class="mt-3 bg-warning">Margin-top</div>
   <div class="pt-3 bg-warning">Padding-top</div>
   <!-- Margin and padding from right -->
   <div class="me-3 bg-warning">Margin-right</div>
   <div class="pe-3 bg-warning">Padding-right</div>
   <!-- Margin and padding from bottom -->
   <div class="mb-3 bg-warning">Margin-bottom</div>
   <div class="pb-3 bg-warning">Padding-bottom</div>
   <!-- Margin and padding from left -->
   <div class="ms-3 bg-warning">Margin-left</div>
   <div class="ps-3 bg-warning">Padding-left</div>
   <!-- Margin and padding from x-axis -->
   <div class="mx-3 bg-warning">Margin-x</div>
   <div class="px-3 bg-warning">Padding-x</div>
   <!-- Margin and padding from y-axis -->
   <div class="my-3 bg-warning">Margin-y</div>
   <div class="py-3 bg-warning">Padding-y</div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->;
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Horizontal Centering

Bootstrap provides the class ".mx-auto" for horizontally centering fixed-width block-level content.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="mx-auto p-2 bg-success" style="width: 200px;">
      Centered element
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Gap

When using "display: grid" or "display: flex", you can make use of gap utilities on the parent element.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="d-flex gap-3">
      <div class="p-2 g-col-6 bg-light">Grid item 1</div>
      <div class="p-2 g-col-6 bg-light">Grid item 2</div>
      <div class="p-2 g-col-6 bg-light">Grid item 3</div>
      <div class="p-2 g-col-6 bg-light">Grid item 4</div>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Borders

A border refers to the line or outline that can be added around an element. In Bootstrap, we use the class ".border" to give a border from all sides.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>


<body>
   <span class="border bg-light">border</span>
   <span class="border-top bg-light">border-top</span>
   <span class="border-end bg-light">border-end</span>
   <span class="border-bottom bg-light">border-bottom</span>
   <span class="border-start bg-light">border-start</span>


   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Border-Color

You can provide different types of color for the border using the border-{color} class −

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="d-grid gap-3">
      <span class="border border-primary"> border-primary</span>
      <span class="border border-primary-subtle">border-primary-subtle</span>
      <span class="border border-secondary">border-secondary</span>
      <span class="border border-secondary-subtle">border-secondary-subtle</span>
      <span class="border border-success">border-success</span>
      <span class="border border-success-subtle">border-success-subtle</span>
      <span class="border border-danger">border-danger</span>
      <span class="border border-danger-subtle">border-danger-subtle</span>
      <span class="border border-warning">border-warning</span>
      <span class="border border-warning-subtle">border-warning-subtle</span>
      <span class="border border-info">border-info</span>
      <span class="border border-info-subtle">border-info-subtle</span>
      <span class="border border-light">border-light</span>
      <span class="border border-light-subtle">border-light-subtle</span>
      <span class="border border-dark">border-dark</span>
      <span class="border border-dark-subtle">border-dark-subtle</span>
      <span class="border border-black">border-black</span>
      <span class="border border-white">border-white</span>
   </div>
   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Shadows

To give the boxy style of any element. Bootstrap includes a class ".shadow-{size}".

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <div class="shadow-none p-3 mb-5 bg-body-tertiary rounded">No shadow</div>
   <div class="shadow-sm p-3 mb-5 bg-body-tertiary rounded">Small shadow</div>
   <div class="shadow p-3 mb-5 bg-body-tertiary rounded">Regular shadow</div>
   <div class="shadow-lg p-3 mb-5 bg-body-tertiary rounded">Larger shadow</div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Display

The display is used to how an element is shown in the web browser. In Bootstrap, we use the class ".d-{value}"/ ".d-{breakpoint}-{value}" to display the HTML element −

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>
<body>
   <!-- display inline -->
   <div class="d-inline p-2 bg-primary">d-inline</div>
   <div class="d-inline p-2 bg-info">d-inline</div>

   <!-- display inline-block -->
   <div class="d-inline-block p-2 bg-primary">d-inline-block</div>
   <div class="d-inline-block p-2 bg-info">d-inline-block</div>

   <!-- display block   -->
   <div class="d-block p-2 bg-primary">d-block</div>
   <div class="d-block p-2 bg-info">d-block</div>

   <!-- display flex -->
   <div class="d-flex p-2 bg-primary">d-flex</div>
   <div class="d-flex p-2 bg-info">d-flex</div>

   <!-- display grid -->
   <div class="d-grid p-2 bg-primary">d-grid</div>
   <div class="d-grid p-2 bg-info">d-grid</div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Flexbox

To apply flex display to an element in Bootstrap, use the class ".d-flex". This class enables the use of additional flexbox utilities for sizing, alignment, spacing, and more.

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="d-flex p-2 bg-warning">I'm a flexbox container!</div>
   <div class="d-inline-flex p-2 bg-warning">I'm an inline flexbox container!</div>
   <div class="d-flex flex-row mb-3 bg-warning">
      <div class="p-2 bg-primary">Flex item 1</div>
      <div class="p-2 bg-primary">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
   </div>
   <div class="d-flex flex-row-reverse bg-warning">
      <div class="p-2 bg-primary">Flex item 1</div>
      <div class="p-2 bg-primary">Flex item 2</div>
      <div class="p-2 bg-primary">Flex item 3</div>
   </div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Positioning

In the bootstrap, we have different classes for the positioning of an element.

Fixed top

<head>
   <title>Bootstrap 5 Tooltip Example</title>
   <!-- Bootstrap 5 CSS -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      crossorigin="anonymous">
</head>

<body>
   <div class="fixed-top">Fixed-Top.</div>

   <!-- Bootstrap 5 JavaScript and Popper.js -->
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
      crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
</body>

Sass Variables and Mixins

In Bootstrap, sass variables store values (like colors, fonts, or spacing) that can be easily reused throughout the stylesheet. At the same time, mixins are reusable blocks of CSS code that encapsulate the styles, promoting code organization and efficiency.

# Install Sass globally
npm install -g sass

# Watch your custom Sass for changes and compile it to CSS
sass --watch ./scss/custom.scss ./css/custom.css

Color schemes

A shorthand mixin for the prefers-color-scheme media query is available with support for light and dark color schemes.

@mixin color-scheme($name) {
  @media (prefers-color-scheme: #{$name}) {
    @content;
  }
}

Customizing Bootstrap

You can customize the bootstrap in the following way −

Using Bootstrap Varaibles

You can modify bootstrap's default styles by overriding saas variables −

$primary: #ff5733; // Change primary color  
@import "bootstrap/scss/bootstrap";

Customizing Bootstrap via CSS

You can override bootstrap style using custom CSS −

.btn-primary {
   background-color: #ff5733 !important;
   border-color: #ff5733 !important;
}

Creating Custom Utility Classes

You can extends bootstrap utilities using SCSS −

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";

.custom-shadow {
   @include box-shadow(0px 4px 6px rgba(0, 0, 0, 0.1));
}

Adding Custom Components

You can create custom component like this −

.custom-card {
   background: #f8f9fa;
   border-radius: 10px;
   padding: 20px;
}

JavaScript Plugins

Following are the JavaScript plugins for the bootstrap. Bootstrapâs JavaScript requires Popper.js and Bootstrap.bundle.min.js −

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" ></script>

Conclusion

This cheat sheet provides knowledge of the powerful and flexible framework Bootstrap. With an understanding of Bootstrap, you can build a responsive, modern, and interactive web application efficiently. By taking advantage of its predefined components, utility classes, JavaScript plugins, and customization options, developers can create professional designs with minimal effort.

Print Page