What Is Bootstrap?

What is Bootstrap?
 Bootstrap is a free front-end framework for faster and easier web

development
 Bootstrap includes HTML and CSS based design templates for typography,
forms, buttons, tables, navigation, modals, image carousels and many
other, as well as optional JavaScript plugins
 Bootstrap also gives you the ability to easily create responsive designs
What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust
themselves to look good on all devices, from small phones to large desktops.
Bootstrap 5 Example
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris...</p>
</div>
<h3>Column 2</h3>
laboris...</p>
</div>
<h3>Column 3</h3>
laboris...</p>
</div>
</div>
</div>
Why Use Bootstrap?
Advantages of Bootstrap:
 Easy to use: Anybody with just basic knowledge of HTML and CSS can
start using Bootstrap
 Responsive features: Bootstrap's responsive CSS adjusts to phones,
tablets, and desktops
 Mobile-first approach: In Bootstrap, mobile-first styles are part of the
core framework
 Browser compatibility: Bootstrap 5 is compatible with all modern
browsers (Chrome, Firefox, Edge, Safari, and Opera). Note that if you
need support for IE11 and down, you must use either BS4 or BS3.
Bootstrap 5 CDN
If you don't want to download and host Bootstrap 5 yourself, you can include it
from a CDN (Content Delivery Network).
jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:
MaxCDN:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstra
p.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstra
p.bundle.min.js"></script>
One advantage of using the Bootstrap 5 CDN:

Many users already have downloaded Bootstrap 5 from jsDelivr when visiting
another site. As a result, it will be loaded from cache when they visit your site,
which leads to faster loading time. Also, most CDN's will make sure that once a
user requests a file from it, it will be served from the server closest to them,
which also leads to faster loading time.
JavaScript?
Bootstrap 5 uses JavaScript for different components (like modals, tooltips,
popovers etc). However, if you just use the CSS part of Bootstrap, you don't
need them.
Create Your First Web Page With Bootstrap
1. Add the HTML5 doctype
Bootstrap 5 uses HTML elements and CSS properties that require the HTML5
doctype.
Always include the HTML5 doctype at the beginning of the page, along with the
lang attribute and the correct title and character set:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
</head>
</html>
2. Bootstrap 5 is mobile-first
Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles

are part of the core framework. To ensure proper rendering and touch zooming,
add the following <meta> tag inside the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1">
The width=device-width part sets the width of the page to follow the screen-width
of the device (which will vary depending on the device). The initial-scale=1 part
sets the initial zoom level when the page is first loaded by the browser.
3. Containers
Bootstrap 5 also requires a containing element to wrap site contents. There are
two container classes to choose from:
1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning the
entire width of the viewport
.container
.container-fluid
Two Basic Bootstrap Examples

The following example shows the code for a basic Bootstrap 5 page (with a
responsive fixed width container):
Container Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootst
rap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootst
rap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>
Container Fluid Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootst
rap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootst
rap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning
the entire width of the viewport.</p>
</div>
</body>
</html>
Bootstrap 5 Container
You learned from the previous chapter that Bootstrap requires a containing
element to wrap site contents. Containers are used to pad the content inside of
them, and there are two container classes available:
1. The .container class provides a responsive fixed width container

2. The .container-fluid class provides a full width container, spanning
the entire width of the viewport
.container.container-fluid
Fixed Container
Use the .container class to create a responsive, fixed-width container.
Note that its width (max-width) will change on different screen sizes:
Extra small Small Medium Large Extra Large XXL

<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
max-width 100% 540px 720px 960px 1140px 1320px
Open the example below and resize the browser window to see that the
container width will change at different breakpoints:
Example
<p>This is some text.</p>
</div>
Fluid Container
Use the .container-fluid class to create a full width container, that will always
span the entire width of the screen (width is always 100%):
Example
<p>This is some text.</p>
</div
Container Padding
By default, containers have left and right padding, with no top or bottom
padding. Therefore, we often use spacing utilities, such as extra padding and
margins to make them look even better. For example, .pt-5 means "add a
large top padding":
Example
<div class="container pt-5"></div>
Container Border and Color

Other utilities, such as borders and colors, are also often used together with
containers:
Example
<div class="container p-5 my-5 border"></div>
<div class="container p-5 my-5 bg-dark text-white"></div>
<div class="container p-5 my-5 bg-primary text-white"></div>
Responsive Containers
You can also use the .container-sm|md|lg|xl classes to determine when the
container should be responsive. The max-width of the container will change on
different screen sizes/viewports:
Class Extra small Small Medium Large Extra large XXL

<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
Example
<div class="container-sm">.container-sm</div>
<div class="container-md">.container-md</div>
<div class="container-lg">.container-lg</div>
<div class="container-xl">.container-xl</div>
<div class="container-xxl">.container-xxl</div>
Bootstrap Grid System
Bootstrap's grid system is built with flexbox and allows up to 12 columns across
the page. If you do not want to use all 12 columns individually, you can group
the columns together to create wider columns:
span span span span span span span span span span span spa
1 1 1 1 1 1 1 1 1 1 1 n1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
The grid system is responsive, and the columns will re-arrange automatically
depending on the screen size. Make sure that the sum adds up to 12 or fewer
(it is not required that you use all 12 available columns).
Grid Classes
The Bootstrap 5 grid system has six classes:
 .col- (extra small devices - screen width less than 576px)

 .col-sm- (small devices - screen width equal to or greater than 576px)
 .col-md- (medium devices - screen width equal to or greater than 768px)
 .col-lg- (large devices - screen width equal to or greater than 992px)
 .col-xl- (xlarge devices - screen width equal to or greater than 1200px)
 .col-xxl- (xxlarge devices - screen width equal to or greater than
1400px)
The classes above can be combined to create more dynamic and flexible
layouts.
Tip: Each class scales up, so if you want to set the same widths for sm and md,
you only need to specify sm.
Basic Structure of a Bootstrap Grid
The following is a basic structure of a Bootstrap 5 grid:

<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
</div>

<div class="row">
<div class="col"></div>
</div>
First example: create a row (<div class="row">). Then, add the desired
number of columns (tags with appropriate .col-*-* classes). The first star (*)
represents the responsiveness: sm, md, lg, xl or xxl, while the second star
represents a number, which should add up to 12 for each row. Second example:
instead of adding a number to each col, let bootstrap handle the layout, to
create equal width columns: two "col" elements = 50% width to each col, while
three cols = 33.33% width to each col. Four cols = 25% width, etc. You can
also use .col-sm|md|lg|xl|xxl to make the columns responsive. Below we
have collected some examples of basic Bootstrap 5 grid layouts.
Three Equal Columns

.col
.col
.col
The following example shows how to create three equal-width columns, on all
devices and screen widths:
Example
<div class="row">
<div class="col">.col</div>
</div>
Responsive Columns
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
The following example shows how to create four equal-width columns starting at
tablets and scaling to extra large desktops. On mobile phones or screens
that are less than 576px wide, the columns will automatically stack on
top of each other:
Example
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
</div>
Two Unequal Responsive Columns

.col-sm-4
.col-sm-8
The following example shows how to get two various-width columns starting at
tablets and scaling to large extra desktops:
Example
<div class="row">
</div>
Bootstrap Text/Typography
Bootstrap 5 Default Settings
Bootstrap 5 uses a default font-size of 1rem (16px by default), and its line-
height is 1.5.
In addition, all <p> elements have margin-top: 0 and margin-bottom: 1rem (16px by
default).
<h1> - <h6>
Bootstrap 5 styles HTML headings (<h1> to <h6>) with a bolder font-weight and a
responsive font-size.
Example
<p class="h1">h1 Bootstrap heading</p>
Display Headings
Display headings are used to stand out more than normal headings (larger font-
size and lighter font-weight), and there are six classes to choose from: .display-
1 to .display-6:
Example
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<small>
In Bootstrap 5 the HTML <small> element (and the .small class) is used to create
a smaller, secondary text in any heading:
<mark>
Bootstrap 5 will style <mark> and .mark with a yellow background color and some
padding:
Example
Use the mark element to highlight text.
<abbr>
Bootstrap 5 will style the HTML <abbr> element with a dotted border bottom and
a cursor with question mark on hove
Example
The WHO was founded in 1948.
<blockquote>
Add the .blockquote class to a <blockquote> when quoting blocks of content from
another source. And when naming a source, like "from WWF's website", use
the .blockquote-footer class:
<dl>
Bootstrap 5 will style the HTML <dl> element in the following way:
<code>
Bootstrap 5 will style the HTML <code> element in the following way:
<kbd>
Bootstrap 5 will style the HTML <kbd> element in the following way:
<pre>
Bootstrap 5 will style the HTML <pre> element in the following way:
Bootstrap Colors
Text Colors
Bootstrap 5 has some contextual classes that can be used to provide "meaning
through colors". The classes for text colors are: .text-muted, .text-primary, .text-
success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-
dark, .text-body (default body color/often black) and .text-light:
Example
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background

Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
Secondary background color.
Dark grey background color.
Light grey background color.
Bootstrap Tables
Basic Table
A basic Bootstrap 5 table has a light padding and horizontal dividers.
The .table class adds basic styling to a table:
Striped Rows
The .table-striped class adds zebra-stripes to a table:
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
Hover Rows
The .table-hover class adds a hover effect (grey background color) on table
rows:
Black/Dark Table
The .table-dark class adds a black background to the table:
Dark Striped Table

Combine .table-dark and .table-striped to create a dark, striped table:
Hoverable Dark Table

The .table-hover class adds a hover effect (grey background color) on table
rows:
Borderless Table
The .table-borderless class removes borders from the table:
Contextual Classes
Contextual classes can be used to color the whole table (<table>), the table
rows (<tr>) or table cells (<td>).
Example
Default Defaultson def@somemail.com
Primary Joe joe@example.com
Success Doe john@example.com
Danger Moe mary@example.com

Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com
Secondary Secondson sec@example.com
Light Angie angie@example.com
Dark Bo bo@example.com
The contextual classes that can be used are:
Class Description
.table-primary Blue: Indicates an important action
.table-success Green: Indicates a successful or positive action
.table-danger Red: Indicates a dangerous or potentially negative action
.table-info Light blue: Indicates a neutral informative change or action
.table-warning Orange: Indicates a warning that might need attention
.table-active Grey: Applies the hover color to the table row or table cell
.table-secondary Grey: Indicates a slightly less important action
.table-light Light grey table or table row background
.table-dark Dark grey table or table row background

Table Head Colors
You can also use any of the contextual classes to only add a background color
to the table header:
Small table
The .table-sm class makes the table smaller by cutting cell padding in half:
Responsive Tables
The .table-responsive class adds a scrollbar to the table when needed (when it is
too big horizontally):
Example
<div class="table-responsive">
<table class="table">
...
</table>
</div>
You can also decide when the table should get a scrollbar, depending on the
screen width:
Class Screen
.table-responsive-sm < 576p
.table-responsive-md < 768p
.table-responsive-lg < 992p
.table-responsive-xl < 1200
.table-responsive-xxl < 1400

Example
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
Bootstrap Images
Image Shapes
Rounded Corners:
Circle:
Thumbnail:
Rounded Corners
The .rounded class adds rounded corners to an image:
Example
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Circle
The .rounded-circle class shapes the image to a circle:
Example
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail (bordered):
Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Aligning Images
Float an image to the left with the .float-start class or to the right with .float-
end:
Example
<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">
Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-
block (display:block) to the image:
Example
<img src="paris.jpg" class="mx-auto d-block">
Responsive Images
Images come in all sizes. So do screens. Responsive images automatically
adjust to fit the size of the screen. Create responsive images by adding an .img-
fluid class to the <img> tag. The image will then scale nicely to the parent
element. The .img-fluid class applies max-width: 100%; and height: auto; to the
image:
Example
<img class="img-fluid" src="ny.jpg" alt="New York">
Bootstrap Jumbotron
A jumbotron was introduced in Bootstrap 3 as a big padded box for
calling extra attention to some special content or information.
Jumbotrons are no longer supported in Bootstrap 5. However, you can use

a <div> element and add special helper classes together with a color class to
achieve the same effect:
Jumbotron Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..
Example
<div class="mt-4 p-5 bg-primary text-white rounded">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum...</p>
</div>
Bootstrap Alerts
Alerts
Bootstrap 5 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by one of the contextual
classes .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-
primary, .alert-secondary, .alert-light or .alert-dark:
Example
<div class="alert alert-success">
<strong>Success!</strong> Indicates a successful or positive action.
</div>
Alert Links
Add the .alert-link class to any links inside the alert box to create "matching
colored links":
Example
<div class="alert alert-success">
<strong>Success!</strong> You should <a href="#" class="alert-link">read
this message</a>.
</div>
Closing Alerts
Success! This alert box could indicate a successful or positive action.
To close the alert message, add a .alert-dismissible class to the alert container.
Then add class="btn-close" and data-bs-dismiss="alert" to a link or a button
element (when you click on this the alert box will disappear).
Example
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-
dismiss="alert"></button>
<strong>Success!</strong> This alert box could indicate a successful or
positive action.
</div>
Animated Alerts
The .fade and .show classes adds a fading effect when closing the alert message:
Example
<div class="alert alert-danger alert-dismissible fade show">
Bootstrap Buttons
Button Styles
Bootstrap 5 provides different styles of buttons:
Basic Primary Secondary Success Info Warning Danger Dark Light Link
Example
<button type="button" class="btn">Basic</button>
<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-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
The button classes can be used on <a>, <button>, or <input> elements:
Example
<a href="#" class="btn btn-success">Link Button</a>
<button type="button" class="btn btn-success">Button</button>
<input type="button" class="btn btn-success" value="Input Button">
<input type="submit" class="btn btn-success" value="Submit Button">
<input type="reset" class="btn btn-success" value="Reset Button">
Why do we put a # in the href attribute of the link?
Since we do not have any page to link it to, and we do not want to get a "404"
message, we put # as the link. In real life it should of course been a real URL to
the "Search" page.
Button Outline
Bootstrap 5 also provides eight outline/bordered buttons.
Move the mouse over them to see an additional "hover" effect:
Primary Secondary Success Info Warning Danger Dark Light
Example
<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-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-
dark">Light</button>
Button Sizes
Use the .btn-lg class for large buttons or .btn-sm class for small buttons:
Large Default Small
Example
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
Block Level Buttons

To create a block level button that spans the entire width of the parent element,
use the .d-grid "helper" class on the parent element:
Full-Width Button
Example
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
</div>
If you have many block-level buttons, you can control the space between them
with the .gap-* class:
Full-Width ButtonFull-Width ButtonFull-Width Button
Example
<div class="d-grid gap-3">
Button</button>
Button</button>
Button</button>
</div>
Active/Disabled Buttons
A button can be set to an active (appear pressed) or a disabled (unclickable)
state: Active Primary Disabled Primary. The class .active makes a button appear
pressed, and the disabled attribute makes a button unclickable. Note that <a>
elements do not support the disabled attribute and must therefore use
the .disabled class to make it visually appear disabled.
Example
<button type="button" class="btn btn-primary active">Active
Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled
Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
Spinner Buttons
You can also add "spinners" to a button, which you will learn more about in
our BS5 Spinners Tutorial:
Loading.. Loading.. Loading..
Example
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>

Loading..
</button>
<button class="btn btn-primary" disabled>

Loading..
</button>

<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Bootstrap Button Groups

Button Groups
Bootstrap 5 allows you to group a series of buttons together (on a single line) in
a button group:
AppleSamsungSony
Use a <div> element with class .btn-group to create a button group:

Example
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
Tip: Instead of applying button sizes to every button in a group, use class .btn-
group-lg for a large button group or the .btn-group-sm for a small button group:
Large Buttons:
AppleSamsungSony
Default Buttons:
AppleSamsungSony
Small Buttons:
AppleSamsungSony
Example
<div class="btn-group btn-group-lg">
</div>
Vertical Button Groups

Bootstrap 5 also supports vertical button groups:
AppleSamsungSony
Use the class .btn-group-vertical to create a vertical button group:

Example
<div class="btn-group-vertical">
</div>
Button Groups Side by Side

Button groups are "inline" by default, which makes them appear side by side
when you have multiple groups:
AppleSamsungSony
BMWMercedesVolvo
Example
</div>
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
Nesting Button Groups & Dropdown Menus
AppleSamsung
Sony
Nest button groups to create dropdown menus (you will learn more about
dropdowns in a later chapter):
Example
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-
toggle="dropdown">Sony</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Bootstrap Badges
Badges
Badges are used to add additional information to any content:
Example heading New

Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Use the .badge class together with a contextual class (like .bg-secondary)
within <span> elements to create rectangular badges. Note that badges scale to
match the size of the parent element (if any):
Example
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
Contextual Badges Primary Seco
Use any of the contextual classes (.bg-*) to change the color of a badge:
Example
<span class="badge bg-primary">Primary</span>
<span class="badge bg-secondary">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning">Warning</span>
<span class="badge bg-info">Info</span>
<span class="badge bg-light">Light</span>
<span class="badge bg-dark">Dark</span>
Pill Badges
Use the .rounded-pill class to make the badges more round:
Example
<span class="badge rounded-pill bg-primary">Primary</span>
<span class="badge rounded-pill bg-secondary">Secondary</span>
<span class="badge rounded-pill bg-success">Success</span>
<span class="badge rounded-pill bg-danger">Danger</span>
<span class="badge rounded-pill bg-warning">Warning</span>
<span class="badge rounded-pill bg-info">Info</span>
<span class="badge rounded-pill bg-light">Light</span>
<span class="badge rounded-pill bg-dark">Dark</span>
Badge inside an Element

An example of using a badge inside a button:
Messages 4
Example
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-danger">4</span>
</button>
Bootstrap Progress Bars

Basic Progress Bar
A progress bar can be used to show how far a user is in a process. To create a
default progress bar, add a .progress class to a container element and add
the .progress-bar class to its child element. Use the CSS width property to set the
width of the progress bar:
Example
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Progress Bar Height
The height of the progress bar is 1rem (usually 16px) by default. Use the
CSS height property to change it. Note that you must set the same height for
the progress container and the progress bar:
Example
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Progress Bar Labels

Add text inside the progress bar to show the visible percentage:
70%
Example
<div class="progress-bar" style="width:70%">70%</div>
</div>
Colored Progress Bars

By default, the progress bar is blue (primary). Use any of the contextual
background classes to change its color:
Example

<div class="progress-bar" style="width:10%"></div>
</div>

<div class="progress-bar bg-success" style="width:20%"></div>
</div>

<div class="progress-bar bg-info" style="width:30%"></div>
</div>

<div class="progress-bar bg-warning" style="width:40%"></div>
</div>

<div class="progress-bar bg-danger" style="width:50%"></div>
</div>

<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>

<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>


<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>


<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Striped Progress Bars
Use the .progress-bar-striped class to add stripes to the progress bars:
Example
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:
Example
<div class="progress-bar progress-bar-striped progress-bar-
animated" style="width:40%"></div>
Multiple Progress Bars

Progress bars can also be stacked:
Free Space
Warning
Danger
Example
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
Bootstrap Spinners
Spinners
To create a spinner/loader, use the .spinner-border class:
Loading..
Example
<div class="spinner-border"></div>
Colored Spinners
Use any text color utilites to add a color to the spinner:
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Example
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
Growing Spinners
Use the .spinner-grow class if you want the spinner/loader to grow instead of
"spin":
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Loading..
Example
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
Spinner Size
Use .spinner-border-sm or .spinner-grow-sm to create a smaller spinner:
Loading..
Loading..
Example
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
Spinner Buttons
You can also add spinners to a button, with or without text:
Loading.. Loading.. Loading..
Example
</button>

Loading..
</button>

Loading..
</button>

<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
Bootstrap Pagination
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of
pagination to each page.
 Previous
 1
 2
 3
 Next
To create a basic pagination, add the .pagination class to an <ul> element. Then
add the .page-item to each <li> element and a .page-link class to each link
inside <li>:
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="#">Next</a></li>
</ul>
Active State
The .active class is used to "highlight" the current page:
 Previous
 1
 2
 3
 Next
Example
<li class="page-item active"><a class="page-link" href="#">2</a></li>
</ul>
Disabled State
The .disabled class is used for un-clickable links:
 Previous
 1
 2
 3
 Next
Example
<li class="page-item disabled"><a class="page-
link" href="#">Previous</a></li>
</ul>
Pagination Sizing
Pagination blocks can also be sized to a larger or a smaller size:
 Previous
 1
 2
 3
 Next
 Previous
 1
 2
 3
 Next
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks:
Example
<ul class="pagination pagination-lg">
</ul>
<ul class="pagination pagination-sm">

</ul>
Pagination Alignment
Use utility classes to change the alignment of the pagination:
 Previous
 1
 2
 3
 Next
 Previous
 1
 2
 3
 Next
 Previous
 1
 2
 3
 Next
Example

<ul class="pagination" style="margin:20px 0">
<li class="page-item">...</li>
</ul>


<ul class="pagination justify-content-center" style="margin:20px 0">
</ul>


<ul class="pagination justify-content-end" style="margin:20px 0">
</ul>
Breadcrumbs
Another form for pagination, is breadcrumbs:
 Photos
 Summer 2017
 Italy
 Rome
The .breadcrumb and .breadcrumb-item classes indicates the current page's location
within a navigational hierarchy:
Example
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
Bootstrap List Groups
Basic List Groups
The most basic list group is an unordered list with list items:
 First item
 Second item
 Third item
To create a basic list group, use an <ul> element with class .list-group,
and <li> elements with class .list-group-item:
Example
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Active State
 Active item
 Second item
 Third item
Use the .active class to highlight the current item:
Example
<li class="list-group-item active">Active item</li>
</ul>
List Group With Linked Items
First itemSecond itemThird item
To create a list group with linked items, use <div> instead

of <ul> and <a> instead of <li>. Optionally, add the .list-group-item-
action class if you want a grey background color on hover:
Example
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First
item</a>
<a href="#" class="list-group-item list-group-item-action">Second
item</a>
<a href="#" class="list-group-item list-group-item-action">Third
item</a>
</div>
Disabled Item
The .disabled class adds a lighter text color to the disabled item. And when
used on links, it will remove the hover effect:
Disabled itemDisabled itemThird item
Example
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Flush / Remove Borders

Use the .list-group-flush class to remove some borders and rounded corners:
 First item
 Second item
 Third item
 Fourth item
Example
<ul class="list-group list-group-flush">
<li class="list-group-item">Fourth item</li>
</ul>
Numbered List Groups

Use the .list-group-numbered class to create list items with numbers in front
of them:
 First item
 Second item
 Third item
Example
<ol class="list-group list-group-numbered">
</ol>
Horizontal List Groups

If you want the list items to display horizontally instead of vertically (side by
side instead of on top of each other), add the .list-group-horizontal class
to .list-group:
 First item
 Second item
 Third item
 Fourth item
Example
<ul class="list-group list-group-horizontal">
<li class="list-group-item">Fourth item</li>
</ul>
Contextual Classes
Contextual classes can be used to add color to the list items:
 Success item
 Secondary item
 Info item
 Warning item
 Danger item
 Primary item
 Dark item
 Light item
The classes for coloring list-items are: .list-group-item-success, list-group-

item-secondary, list-group-item-info, list-group-item-warning, .list-
group-item-danger, .list-group-item-primary, list-group-item-
dark and list-group-item-light,:
Example
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary
item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li class="list-group-item list-group-item-light">Light item</li>
</ul>
Link items with Contextual Classes
Action itemSuccess itemSecondary itemInfo itemWarning itemDanger
itemPrimary itemDark itemLight item
Example
<a href="#" class="list-group-item list-group-item-action">Action
item</a>
<a href="#" class="list-group-item list-group-item-action list-group-
item-success">Success item</a>
item-secondary">Secondary item</a>
item-info">Info item</a>
item-warning">Warning item</a>
item-danger">Danger item</a>
item-primary">Primary item</a>
item-dark">Dark item</a>
item-light">Light item</a>
</div>
List Group with Badges

Combine .badge classes with utility/helper classes to add badges inside the list
group:
 Inbox12
 Ads50
 Junk99
Example
<li class="list-group-item d-flex justify-content-between align-items-
center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
center">
Ads
</li>
center">
Junk
</li>
</ul>
Bootstrap Cards
Cards
A card in Bootstrap 5 is a bordered box with some padding around its content.
It includes options for headers, footers, content, colors, etc.
John Doe
Some example text some example text. John Doe is an architect and engineer
See Profile
Basic Card
A basic card is created with the .card class, and content inside the card has
a .card-body class:
Basic card
Example
<div class="card">
<div class="card-body">Basic card</div>
</div>
Header and Footer

Header
Content
Footer
The .card-header class adds a heading to the card and the .card-footer class adds
a footer to the card:
Example
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div class="card-footer">Footer</div>
</div>
Contextual Cards
To add a background color the card, use contextual classes (.bg-primary, .bg-
success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
Basic card
Primary card
Success card
Info card
Warning card
Danger card
Secondary card
Dark card
Light card
Titles, text, and links

Card title
Some example text. Some example text.
Card link Another link
Use .card-title to add card titles to any heading element. The .card-text class is
used to remove bottom margins for a <p> element if it is the last child (or the
only one) inside .card-body. The .card-link class adds a blue color to any link,
and a hover effect.
Example
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Card Images
John Doe
Some example text some example text. John Doe is an architect and engineer
See Profile
Jane Doe
Some example text some example text. Jane Doe is an architect and engineer
See Profile
Add .card-img-top or .card-img-bottom to an <img> to place the image at the top or

at the bottom inside the card. Note that we have added the image outside of
the .card-body to span the entire width:
Example
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
Card Image Overlays
John Doe
Some example text some example text. Some example text some example text.
Some example text some example text. Some example text some example text.
See Profile
Turn an image into a card background and use .card-img-overlay to add text on
top of the image:
Example
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
Bootstrap Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to choose one
value from a predefined list:
Dropdown button
Example
<div class="dropdown">
toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
</ul>
</div>
Example Explained
The .dropdown class indicates a dropdown menu. To open the dropdown menu,
use a button or a link with a class of .dropdown-toggle and the data-bs-
toggle="dropdown" attribute.
Add the .dropdown-menu class to a <div> element to actually build the dropdown
menu. Then add the .dropdown-item class to each element (links or buttons)
inside the dropdown menu.
Dropdown Divider
Dropdown button
The .dropdown-divider class is used to separate links inside the dropdown menu
with a thin horizontal border:
Example
<li><hr class="dropdown-divider"></hr></li>
Dropdown Header
Dropdown button
The .dropdown-header class is used to add headers inside the dropdown menu:
Example
<li><h5 class="dropdown-header">Dropdown header 1</h5></li>
Disable and Active items
Dropdown button
Highlight a specific dropdown item with the .active class (adds a blue
background color).
To disable an item in the dropdown menu, use the .disabled class (gets a light-
grey text color and a "no-parking-sign" icon on hover):
Example
<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Active</a></li>
<li><a class="dropdown-item disabled" href="#">Disabled</a></li>
Dropdown Position
Dropend
Dropstart
You can also create a "dropend" or "dropstart" menu, by adding

the .dropend or .dropstart class to the dropdown element. Note that the
caret/arrow is added automatically:
Dropright
<div class="dropdown dropend">
Dropleft
<div class="dropdown dropstart">
Dropdown Menu Right

Wide dropdown button to demonstrate this example
To right-align the dropdown menu, add the .dropdown-menu-end class to the

element with .dropdown-menu:
Example
<div class="dropdown-menu dropdown-menu-end">
Dropup
Dropdown button
If you want the dropdown menu to expand upwards instead of downwards,

change the <div> element with class="dropdown" to "dropup":
Example
<div class="dropup">
Dropdown Text
Dropdown button
The .dropdown-item-text class is used to add plain text to a dropdown item, or

used on links for default link styling.
Example
<li><a class="dropdown-item-text" href="#">Text Link</a></li>
<li><span class="dropdown-item-text">Just Text</span></li>
</ul>
Grouped Buttons with a Dropdown

AppleSamsung
Sony
Example
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
Vertical Button Group w/ Dropdown

AppleSamsung
Sony
Example
<div class="btn-group-vertical">
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
Bootstrap Collapse
Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of
content:
Click Me
Example
<button data-bs-toggle="collapse" data-bs-
target="#demo">Collapsible</button>
<div id="demo" class="collapse">

Lorem ipsum dolor text....
</div>
Example Explained
The .collapse class indicates a collapsible element (a <div> in our example);
this is the content that will be shown or hidden with a click of a button.
To control (show/hide) the collapsible content, add the data-bs-

toggle="collapse" attribute to an <a> or a <button> element. Then add the data-
bs-target="#id" attribute to connect the button with the collapsible content (<div
id="demo">).
Note: For <a> elements, you can use the href attribute instead of the data-bs-
target attribute:
Example
<a href="#demo" data-bs-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">

</div>
By default, the collapsible content is hidden. However, you can add
the .show class to show the content by default:
Example
<div id="demo" class="collapse show">
</div>
Accordion
Collapsible Group Item #1
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
The following example shows a simple accordion by extending the card

component.
Note: Use the data-bs-parent attribute to make sure that all collapsible elements
under the specified parent will be closed when one of the collapsible item is
shown.
Example
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-
parent="#accordion">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<a class="collapsed btn" data-bs-
toggle="collapse" href="#collapseTwo">
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
Lorem ipsum..
</div>
</div>
</div>
<div class="card">
<a class="collapsed btn" data-bs-
toggle="collapse" href="#collapseThree">
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
Lorem ipsum..
</div>
</div>
</div>
</div>
Bootstrap Navs
Nav Menus
LinkLinkLinkDisabled
If you want to create a simple horizontal menu, add the .nav class to
a <ul> element, followed by .nav-item for each <li> and add the .nav-link class to
their links:
Example
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Aligned Nav
LinkLinkLinkDisabledLinkLinkLinkDisabled
Add the .justify-content-center class to center the nav, and the .justify-content-
end class to right-align the nav.
Example

<ul class="nav justify-content-center">


<ul class="nav justify-content-end">
Vertical Nav
LinkLinkLinkDisabled
Add the .flex-column class to create a vertical nav:
Example
<ul class="nav flex-column">
Tabs
ActiveLinkLinkDisabled
Turn the nav menu into navigation tabs with the .nav-tabs class. Add
the .active class to the active/current link. If you want the tabs to be togglable,
see the last example on this page.
Example
<ul class="nav nav-tabs">
<a class="nav-link active" href="#">Active</a>
</li>
</li>
</li>
</li>
</ul>
Pills
ActiveLinkLinkDisabled
Turn the nav menu into navigation pills with the .nav-pills class. If you want the
pills to be togglable, see the last example on this page.
Example
<ul class="nav nav-pills">
</li>
</li>
</li>
</li>
</ul>
Justified Tabs/pills
Justify the tabs/pills with the .nav-justified class (equal width):
 Active
 Link
 Link
 Disabled
Active

 Link
 Link
 Disabled
Example
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pills with Dropdown
 Active
 Dropdown
 Link
 Disabled
Example
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-
toggle="dropdown" href="#">Dropdown</a>
</ul>
</li>
</li>
</li>
</ul>
Tabs with Dropdown

 Active
 Dropdown
 Link
 Disabled
Example
</li>
<a class="nav-link dropdown-toggle" data-bs-
toggle="dropdown" href="#">Dropdown</a>
</ul>
</li>
</li>
</li>
</ul>
Toggleable / Dynamic Tabs

 Home
 Menu 1
 Menu 2
HOME
incididunt ut labore et dolore magna aliqua.
To make the tabs toggleable, add the data-toggle="tab" attribute to each link.
Then add a .tab-pane class with a unique ID for every tab and wrap them inside
a <div> element with class .tab-content.
If you want the tabs to fade in and out when clicking on them, add
the .fade class to .tab-pane:
Example

<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>


<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
</div>
Toggleable / Dynamic Pills

 Home
 Menu 1
 Menu 2
HOME
incididunt ut labore et dolore magna aliqua.
The same code applies to pills; only change the data-toggle attribute to data-
toggle="pill":
Example

<a class="nav-link active" data-bs-toggle="pill" href="#home">Home</a>
</li>
<a class="nav-link" data-bs-toggle="pill" href="#menu1">Menu 1</a>
</li>
<a class="nav-link" data-bs-toggle="pill" href="#menu2">Menu 2</a>
</li>
</ul>


<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
</div>
Bootstrap Navbars
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page:
Logo
 Link
 Link
 Link
Search
Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the
screen size.
A standard navigation bar is created with the .navbar class, followed by a

responsive collapsing class: .navbar-expand-xxl|xl|lg|md|sm (stacks the
navbar vertically on xxlarge, extra large, large, medium or small screens).
To add links inside the navbar, use either an <ul> element (or a <div>)
with class="navbar-nav". Then add <li> elements with a .nav-item class
followed by an <a> element with a .nav-link class:
 Link 1
 Link 2
 Link 3
Example

<nav class="navbar navbar-expand-sm bg-light">

<ul class="navbar-nav">
<a class="nav-link" href="#">Link 1</a>
</li>
</li>
</li>
</ul>
</div>
</nav>
Vertical Navbar
Remove the .navbar-expand-* class to create a navigation bar that will always
be vertical:
 Link 1
 Link 2
 Link 3
Example

<nav class="navbar bg-light">
...
</nav>
Centered Navbar
Add the .justify-content-center class to center the navigation bar:
 Link 1
 Link 2
 Link 3
Example
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
Colored Navbar
 Active
 Link
 Link
 Disabled
Active
 Link
 Link
 Disabled
 Active
 Link
 Link
 Disabled
Use any of the .bg-color classes to change the background color of the navbar
(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-
secondary, .bg-dark and .bg-light)
Tip: Add a white text color to all links in the navbar with the .navbar-
dark class, or use the .navbar-light class to add a black text color.
Example

<nav class="navbar navbar-expand-sm bg-light navbar-light">
</li>
</li>
</li>
</li>
</ul>
</div>
</nav>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>

<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
Active/disabled state: Add the .active class to an <a> element to highlight
the current link, or the .disabled class to indicate that the link is un-clickable.
Brand / Logo
The .navbar-brand class is used to highlight the brand/logo/project name of
your page:
Logo
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
</div>
</nav>
When using the .navbar-brand class with images, Bootstrap 5 will automatically
style the image to fit the navbar vertically.
Example
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar
Logo" style="width:40px;" class="rounded-pill">
</a>
</div>
</nav>
Navbar Text
Navbar text
Use the .navbar-text class to vertical align any elements inside the navbar that
are not links (ensures proper padding and text color).
Example
<span class="navbar-text">Navbar text</span>
</div>
</nav>
LogoVery often, especially on small screens, you want to hide the navigation
links and replace them with a button that should reveal them when clicked on.
To create a collapsible navigation bar, use a button with class="navbar-
toggler", data-bs-toggle="collapse" and data-bs-target="#thetarget".
Then wrap the navbar content (links, etc) inside a <div> element
with class="collapse navbar-collapse", followed by an id that matches
the data-bs-target of the button: "thetarget".
Example
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
</li>
</li>
</li>
</ul>
</div>
</div>
</nav>
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar
links and display the toggler button.
Navbar With Dropdown
 Link
 Link
 Link
 Dropdown
Navbars can also hold dropdown menus:
Example
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-
toggle="dropdown">Dropdown</a>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
Navbar Forms and Buttons

Logo
 Link
 Link
 Link
Search
You can also include forms inside the navigation bar:
Example
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="javascript:void(0)">Logo</a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#mynavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="navbar-nav me-auto">
<a class="nav-link" href="javascript:void(0)">Link</a>
</li>
</li>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
</div>
</nav>
Fixed Navigation Bar

The navigation bar can also be fixed at the top or at the bottom of the page.
A fixed navigation bar stays visible in a fixed position (top or bottom)

independent of the page scroll.
The .fixed-top class makes the navigation bar fixed at the top:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Use the .fixed-bottom class to make the navbar stay at the bottom of the
page:
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Use the .sticky-top class to make the navbar fixed/stay at the top of the page
when you scroll past it. Note: This class does not work in IE11 and earlier (will
treat it as position:relative).
Example
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
Bootstrap Carousel
Carousel / Slideshow
The Carousel is a slideshow for cycling through elements:
How To Create a Carousel
The following example shows how to create a basic carousel with indicators and
controls:
Example

<div id="demo" class="carousel slide" data-bs-ride="carousel">

<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-
to="0" class="active"></button>
to="1"></button>
to="2"></button>
</div>


<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block w-100">
</div>
<img src="ny.jpg" alt="New York" class="d-block w-100">
</div>
</div>


<button class="carousel-control-prev" type="button" data-bs-
target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-
target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Example explained
A description of what each class from the example above do:
Class Description
.carousel Creates a carousel
.carousel- Adds indicators for the carousel. These are the little dots at
indicators the bottom of each slide (which indicates how many slides
there are in the carousel, and which slide the user are
currently viewing)
.carousel- Adds slides to the carousel

inner
.carousel-item Specifies the content of each slide
.carousel- Adds a left (previous) button to the carousel, which allows

control-prev the user to go back between the slides
.carousel- Adds a right (next) button to the carousel, which allows the
control-next user to go forward between the slides
.carousel- Used together with .carousel-control-prev to create a

control-prev- "previous" button
icon
.carousel- Used together with .carousel-control-next to create a "next"

control-next- button
icon
.slide Adds a CSS transition and animation effect when sliding from
one item to the next. Remove this class if you do not want
this effect
Add Captions to Slides

New York
We love the Big Apple!
Add elements inside <div class="carousel-caption"> within each <div

class="carousel-item"> to create a caption for each slide:
Example
<img src="la.jpg" alt="Los Angeles">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
Bootstrap Modal
Modals
The Modal component is a dialog box/popup window that is displayed on top of
the current page:
Open modal
How To Create a Modal

The following example shows how to create a basic modal:
Example

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-
bs-target="#myModal">
Open modal
</button>


<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">


<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
dismiss="modal"></button>
</div>


<div class="modal-body">
Modal body..
</div>

<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Add animation
Use the .fade class to add a fading effect when opening and closing the modal:
Example

<div class="modal fade"></div>


<div class="modal"></div>
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals
(max-width 300px), .modal-lg class for large modals (max-width 800px),
or .modal-xl for extra large modals (max-width 1140px). Default is 500px
max-width.
Add the size class to the <div> element with class .modal-dialog:
Small Modal
<div class="modal-dialog modal-sm">
Large Modal
<div class="modal-dialog modal-lg">
Extra Large Modal

<div class="modal-dialog modal-xl">
By default, modals are "medium" in size (500px max-width).
Fullscreen Modals
If you want the modal to span the whole width and height of the page, use
the .modal-fullscreen class:
Example
<div class="modal-dialog modal-fullscreen">
Responsive Fullscreen Modals

You can also control when the modal should be in fullscreen, with the .modal-
fullscreen-*-* classes:
Class Description
.modal-fullscreen-sm-down Fullscreen below 576px
.modal-fullscreen-md-down Fullscreen below 768px
.modal-fullscreen-lg-down Fullscreen below 992px
.modal-fullscreen-xl-down Fullscreen below 1200px

.modal-fullscreen-xxl-down Fullscreen below 1400px
Centered Modal
Center the modal vertically and horizontally within the page, with the .modal-
dialog-centered class:
Example
<div class="modal-dialog modal-dialog-centered">
Bootstrap Tooltip
Tooltips
The Tooltip component is small pop-up box that appears when the user moves
the mouse pointer over an element:
Hover over me!
How To Create a Tooltip

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element.
Use the title attribute to specify the text that should be displayed inside the
tooltip:
<button type="button" class="btn btn-primary" data-bs-

toggle="tooltip" title="Hooray!">Hover over me!</button>
Note: Tooltips must be initialized with JavaScript to work.
The following code will enable all tooltips in the document:

Example
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-
bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Positioning Tooltips
By default, the tooltip will appear on top of the element.
Use the data-bs-placement attribute to set the position of the tooltip on top,
bottom, left or the right side of the element:
Example
<a href="#" data-bs-toggle="tooltip" data-bs-
placement="top" title="Hooray!">Hover</a>
placement="bottom" title="Hooray!">Hover</a>
placement="left" title="Hooray!">Hover</a>
placement="right" title="Hooray!">Hover</a>
Bootstrap Popover
Popovers
The Popover component is similar to tooltips; it is a pop-up box that appears
when the user clicks on an element. The difference is that the popover can
contain much more content.
Toggle popover
How To Create a Popover
To create a popover, add the data-bs-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, and use
the data-bs-content attribute to specify the text that should be displayed inside
the popover's body:
<button type="button" class="btn btn-primary" data-bs-

toggle="popover" title="Popover Header" data-bs-content="Some content
inside the popover">Toggle popover</button>
Note: Popovers must be initialized with JavaScript to work.
The following code will enable all popovers in the document:
Example
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-
bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
Positioning Popovers
By default, the popover will appear on the right side of the element.
Use the data-bs-placement attribute to set the position of the popover on top,
bottom, left or the right side of the element:
Example
<a href="#" title="Header" data-bs-toggle="popover" data-bs-
placement="top" data-content="Content">Top</a>
placement="bottom" data-content="Content">Bottom</a>
placement="left" data-content="Content">Left</a>
placement="right" data-content="Content">Right</a>
Note: The placement attributes do not work as you expect if it is not enough
room for them. For example: if you use the top placement at the top of a page
(where it is no room for it), it will instead display the popover below the
element or to the right (wherever it is room for it).
Closing Popovers
By default, the popover is closed when you click on the element again.
However, you can use the data-bs-trigger="focus" attribute which will close the
popover when clicking outside the element:
Example
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-
trigger="focus" data-bs-content="Click anywhere in the document to close
this popover">Click me</a>
Hoverable Popover
Tip: If you want the popover to be displayed when you move the mouse pointer
over the element, use the data-bs-trigger attribute with a value of "hover":
Example
trigger="hover" data-bs-content="Popover text">Hover over me</a>
Bootstrap Toasts
Toasts
The toast component is like an alert box that is only shown for a couple of
seconds when something happens (i.e. when the user clicks on a button,
submits a form, etc.).
Toast Header5 mins ago
Some text inside the toast body
How To Create a Toast

To create a toast, use the .toast class, and add a .toast-header and a .toast-
body inside of it.
Note: Toasts are hidden by default. Use the .show class if you want to display it.
To close it, use a <button> element and add data-bs-dismiss="toast":
<div class="toast show">

<div class="toast-header">
Toast Header
dismiss="toast"></button>
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
Open a Toast
To show a toast with a click of a button, you must initialize it with JavaScript:
select the specified element and call the toast() method. The following code will
show all "toasts" in the document when you click on a button:
Example
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
Bootstrap Scrollspy
Scrollspy
Scrollspy is used to automatically update links in a navigation list based
on scroll position.
How To Create a Scrollspy

The following example shows how to create a scrollspy:
Example

<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<li><a href="#section1">Section 1</a></li>
...
</nav>


<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while
scrolling!</p>
</div>
...
</body>
Example Explained
Add data-bs-spy="scroll" to the element that should be used as the scrollable
area (often this is the <body> element).
Then add the data-bs-target attribute with a value of the id or the class name of
the navigation bar (.navbar). This is to make sure that the navbar is connected
with the scrollable area.
Note that scrollable elements must match the ID of the links inside the navbar's
list items (<div id="section1"> matches <a href="#section1">).
The optional data-bs-offset attribute specifies the number of pixels to offset from
top when calculating the position of scroll. This is useful when you feel that the
links inside the navbar changes the active state too soon or too early when
jumping to the scrollable elements. Default is 10 pixels.
Requires relative positioning: The element with data-bs-spy="scroll"

requires the CSS position property, with a value of "relative" to work properly.
Bootstrap Offcanvas
Offcanvas
Offcanvas is similar to modals (hidden by default and shown when activated),
except that is often used as a sidebar navigation menu.
Open Offcanvas Sidebar

How To Create an Offcanvas Sidebar
The following example shows how to create an offcanvas sidebar:
Example

<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close text-reset" data-bs-
dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
<p>Some text lorem ipsum.</p>
<button class="btn btn-secondary" type="button">A Button</button>
</div>
</div>


<button class="btn btn-primary" type="button" data-bs-
toggle="offcanvas" data-bs-target="#demo">
Open Offcanvas Sidebar
</button>
Example Explained
The .offcanvas class creates the offcanvas sidebar.
The .offcanvas-start class positions the offcanvas, and makes it 400px wide.
See examples below for more positioning classes.
The .offcanvas-title class ensures proper margins and line-height.
Then, add your content inside the .offcanvas-body class.
To open the offcanvas sidebar, you must use a <button> or an <a> element that
points to the id of the .offcanvas container (#demo in our example).
To open the offcanvas sidebar with an <a> element, you can point to #demo with
the href attribute, instead of data-bs-target attribute.
Offcanvas Position
Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left,
right, top or bottom:
Right Example
<div class="offcanvas offcanvas-end" id="demo">
Toggle Right Offcanvas
Top Example
<div class="offcanvas offcanvas-top" id="demo">
Toggle Top Offcanvas
Bottom Example
<div class="offcanvas offcanvas-bottom" id="demo">
Toggle Bottom Offcanvas
Responsive OffCanvas Menu

You can also control when you want to hide or show the offcanvas menu on
different screen widths, with the .offcanvas-sm|md|lg|xl|xxl classes:
Example
<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">
Dark OffCanvas Menu

Use the .text-bg-dark class to create a dark offcanvas menu.
Tip: We have also added the .btn-close-white class to .btn-close, to create a

white close button that looks nice with the dark background:
Example
<div class="offcanvas offcanvas-end" id="demo">
<button type="button" class="btn-close btn-close-white" data-bs-
dismiss="offcanvas"></button>
Toggle Dark Offcanvas
Bootstrap Utilities
Utilities / Helper Classes
Bootstrap 5 has a lot of utility/helper classes to quickly style elements without
using any CSS code.
Borders
Use the border classes to add or remove borders from an element:
Example
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
<br>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Border Width
Use .border-1 to .border-5 to change the width of the border:
Example

Border Color
Add a color to the border with any of the contextual border color classes:
Example
<span class="border border-primary"></span>

<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Border Radius
Add rounded corners to an element with the rounded classes:
Example
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-end"></span>
<span class="rounded-bottom"></span>
<span class="rounded-start"></span>
<span class="rounded-circle"></span>
<span class="rounded-pill" style="width:130px"></span>
<span class="rounded-0"></span>
Float and Clearfix

Float an element to the right with the .float-end class or to the left with .float-
start, and clear floats with the .clearfix class:
Example
Float leftFloat right
<div class="clearfix">
<span class="float-start">Float left</span>
<span class="float-end">Float right</span>
</div>
Responsive Floats
Float an element to the left or to the right depending on screen width, with the
responsive float classes (.float-*-start|end - where *
is sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)
or xxl (>=1400px)):
Example
Float right on small screens or wider
Float right on medium screens or wider
Float right on large screens or wider
Float right on extra large screens or wider
Float right on XXL screens or wider
Float none
<div class="float-sm-end">Float right on small screens or wider</div><br>
<div class="float-md-end">Float right on medium screens or wider</div><br>
<div class="float-lg-end">Float right on large screens or wider</div><br>
<div class="float-xl-end">Float right on extra large screens or
wider</div><br>
<div class="float-xxl-end">Float right on XXL screens or wider</div><br>
<div class="float-none">Float none</div>
Center Align
Center an element with the .mx-auto class (adds margin-left and margin-right:
auto):
Example
Centered
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
Width
Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-
auto, .mw-100):
Example
Width 25%
Width 50%
Width 75%
Width 100%
Auto Width
Max Width 100%
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-auto bg-warning">Auto Width</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Height
Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-
auto, .mh-100):
Example
Height 25%
Height 50%
Height 75%
Height 100%
Auto Height
Max Height 100%

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-auto bg-warning">Auto Height</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height
100%</div>
</div>
Spacing
Bootstrap 5 has a wide range of responsive margin and padding utility classes.
They work for all
breakpoints: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>
=1200px) or xxl (>=1400px)):
The classes are used in the format: {property}{sides}-

{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl and xxl.
Where property is one of:
 m - sets margin
 p - sets padding
Where sides is one of:
 t - sets margin-top or padding-top

 b - sets margin-bottom or padding-bottom
 s - sets margin-left or padding-left
 e - sets margin-right or padding-right
 x - sets both padding-left and padding-right or margin-left and margin-right
 y - sets both padding-top and padding-bottom or margin-top and margin-bottom
 blank - sets a margin or padding on all 4 sides of the element
Where size is one of:
 0 - sets margin or padding to 0

 1 - sets margin or padding to .25rem
 2 - sets margin or padding to .5rem
 3 - sets margin or padding to 1rem
 4 - sets margin or padding to 1.5rem
 5 - sets margin or padding to 3rem
 auto - sets margin to auto
Example
I only have a top padding (1.5rem)
I have a padding on all sides (3rem)
I have a margin on all sides (3rem) and a bottom padding (3rem)
<div class="pt-4 bg-warning">I only have a top padding (1.5rem)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem) and a
bottom padding (3rem)</div>
More Spacing Examples
.m-# / m-*-# margin on all sides Try it
.mt-# / mt-*-# margin top Try it
.mb-# / mb-*-# margin bottom Try it
.ms-# / ms-*-# margin left Try it

.me-# / me-*-# margin right Try it
.mx-# / mx-*-# margin left and right Try it
.my-# / my-*-# margin top and bottom Try it
.p-# / p-*-# padding on all sides Try it
.pt-# / pt-*-# padding top Try it
.pb-# / pb-*-# padding bottom Try it
.ps-# / ps-*-# padding left Try it
.pe-# / pe-*-# padding right Try it
.py-# / py-*-# padding top and bottom Try it
.px-# / px-*-# padding left and right Try it
Shadows
Use the shadow- classes to add shadows to an element:
Example
No shadow
Small shadow
Default shadow
Large shadow
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
Vertical Align
Use the align- classes to change the alignment of elements (only works on
inline, inline-block, inline-table and table cell elements):
Example
baseline top middle bottom text-top text-bottom
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
Aspect Ratio
Create responsive video or slideshows based on the width of the parent.
Add the .ratio class together with an aspect ratio of your choice .ratio-* to a
parent element, and add the embed (video or iframe) inside of it:
Example

<div class="ratio ratio-1x1">
<iframe src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>

</div>

</div>

</div>
Visibility
Use the .visible or .invisible classes to control the visibility of
elements. Note: These classes do not change the CSS display value. They only
add visibility:visible or visibility:hidden:
Example
I am visible
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
Close icon
Use the .btn-close class to style a close icon. This is often used for alerts and
modals.
Example
<button type="button" class="btn-close"></button>
Screenreaders
Use the .visually-hidden class to hide an element on all devices, except screen
readers:
Example
<span class="visually-hidden">I will be hidden on all screens except for
screen readers.</span>
Colors
As described in the Colors chapter, here is a list of all text and background color
classes:
The classes for text colors are: .text-muted, .text-primary, .text-success, .text-
info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-
body (default body color/often black) and .text-light:
Example
This text is muted.
Secondary text.
Dark grey text.
Body text.
Light grey text.
Contextual text classes can also be used on links:
Example
Muted link. Primary link. Success link. Info link. Warning link. Danger
link. Secondary link. Dark grey link. Body/black link. Light grey link.
You can also add 50% opacity for black or white text with the .text-black-
50 or .text-white-50 classes:
Example
Black text with 50% opacity on white background
White text with 50% opacity on black background
Background Colors
The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-
warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.
Example
The .bg-color classes above does not work well with text, or atleast then you
have to specify a proper .text-color class to get the right text color for each
background.
However, you can use the .text-bg-color classes and Bootstrap will
automatically handle the appropriate text color for each background color:
Example
Secondary background color.
Dark grey background color.
Light grey background color.

Bootstrap Flex
Flexbox
The biggest difference between Bootstrap 3 and Bootstrap 4 & 5 is that
Bootstrap 5 now uses flexbox, instead of floats, to handle the layout.
The Flexible Box Layout Module, makes it easier to design flexible responsive
layout structure without using float or positioning. If you are new to flex, you
can read about it in our CSS Flexbox Tutorial.
Note: Flexbox is not supported in IE9 and earlier versions.
If you require IE8-9 support, use Bootstrap 3. It is the most stable version
of Bootstrap, and it is still supported by the team for critical bugfixes and
documentation changes. However, no new features will be added to it.
To create a flexbox container and to transform direct children into flex items,
use the d-flex class:
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
To create an inline flexbox container, use the d-inline-flex class:

Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-inline-flex p-3 bg-secondary text-white">
</div>
Horizontal Direction
Use .flex-row to display the flex items horizontally (side by side). This is default.
Tip: Use .flex-row-reverse to right-align the horizontal direction:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex flex-row bg-secondary">
</div>
<div class="d-flex flex-row-reverse bg-secondary">
</div>
Vertical Direction
Use .flex-column to display the flex items vertically (on top of each other),
or .flex-column-reverse to reverse the vertical direction:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex flex-column">
</div>
<div class="d-flex flex-column-reverse">

</div>
Justify Content
Use the .justify-content-* classes to change the alignment of flex items. Valid
classes are start (default), end, center, between or around:
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
Fill / Equal Widths
Use .flex-fill on flex items to force them into equal widths:
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
Grow
Use .flex-grow-1 on a flex item to take up the rest of the space. In the example
below, the first two flex items take up their necessary space, while the last item
takes up the rest of the available space:
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex">
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
Tip: Use .flex-shrink-1 on a flex item to make it shrink if necessary.
Order
Change the visual order of a specific flex item(s) with the .order classes. Valid
classes are from 0 to 5, where the lowest number has highest priority (order-1
is shown before order-2, etc..):
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>
Auto Margins
Easily add auto margins to flex items with .ms-auto (push items to the right), or
by using .me-auto (push items to the left):
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Example
<div class="p-2 ms-auto bg-info">Flex item 1</div>
</div>

<div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>
Wrap
Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-
wrap or .flex-wrap-reverse.
Click on the buttons below to see the difference between the three classes, by
changing the wrapping of the flex items in the example box:
flex-wrap flex-wrap-reverse flex-nowrap
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Example
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>
Align Content
Control the vertical alignment of gathered flex items with the .align-content-
* classes. Valid classes are .align-content-start (default), .align-content-
end, .align-content-center, .align-content-between, .align-content-around and .align-
content-stretch.
Note: These classes have no effect on single rows of flex items.
Click on the buttons below to see the difference between the five classes, by
changing the vertical alignment of the flex items in the example box:
align-content-start align-content-end align-content-center align-content-

around align-content-stretch
Example
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25
Example
<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>
Align Items
Control the vertical alignment of single rows of flex items with the .align-
items-* classes. Valid classes are .align-items-start, .align-items-end, .align-items-
center, .align-items-baseline, and .align-items-stretch (default).
Click on the buttons below to see the difference between the five classes:
align-items-start align-items-end align-items-center align-items-baseline align-

items-stretch
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
Align Self
Control the vertical alignment of a specified flex item with the .align-self-
* classes. Valid classes are .align-self-start, .align-self-end, .align-self-
center, .align-self-baseline, and .align-self-stretch (default).
Click on the buttons below to see the difference between the five classes:
align-self-start align-self-end align-self-center align-self-baseline align-self-

stretch
Example
Flex item 1
Flex item 2
Flex item 3
Example
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
Bootstrap Forms
Stacked Form
All textual <input> and <textarea> elements with class .form-control get
proper form styling:
Email:
Password:
Remember me
Submit
Example
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter
email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-
control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-
input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Also note that we add a .form-label class to each label element to ensure correct
padding.
Checkboxes have different markup. They are wrapped around a container
element with .form-check, and labels have a class of .form-check-label, while
checkboxes and radio buttons use .form-check-input.
Textarea
Comments:
Submit
Example
<label for="comment">Comments:</label>
<textarea class="form-
control" rows="5" id="comment" name="text"></textarea>
Form Row/Grid (Inline Forms)
If you want your form elements to appear side by side, use .row and .col:
Example
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter
password" name="pswd">
</div>
</div>
</form>
Form Control Size
You can change the size of .form-control inputs with .form-control-lg or .form-
control-sm:
Example
<input type="text" class="form-control form-control-lg" placeholder="Large
input">
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control form-control-sm" placeholder="Small
input">
Disabled and Readonly
Use the disabled and/or readonly attributes to disable the input field:
Example
<input type="text" class="form-control" placeholder="Disabled
input" disabled>
<input type="text" class="form-control" placeholder="Readonly
input" readonly>
Plain text Inputs

Use the .form-control-plaintext class to style an input field without borders, but
keep proper marigins and padding:
Example
<input type="text" class="form-control-plaintext" placeholder="Plaintext
input">
Color Picker
To style an input with type="color" properly, use the .form-control-color class:
Example
<input type="color" class="form-control form-control-
color" value="#CCCCCC">
Bootstrap Select
Select Menu
Select menu (select one):
Multiple select menu (hold ctrl or shift (or drag with the mouse) to select more
than one):
Select menus are used if you want to allow the user to pick from multiple
options.
To style a select menu in Bootstrap 5, add the .form-select class to the <select>
element:
Example
<select class="form-select">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Select Menu Size
Use the .form-select-lg or .form-select-sm class to change the size of the select
menu:
Example
<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">
Disabled Select Menu
Use the disabled attribute to disable the select menu:
Example
<select class="form-select" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Data Lists
Bootstrap will also style data lists, which is a list of pre-defined options for an
<input> element:
Choose your browser from the list:
Example
<label for="browser" class="form-label">Choose your browser from the
list:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Bootstrap Checkboxes and Radio

buttons
Checkboxes
Checkboxes are used if you want the user to select any number of options from
a list of preset options.
Option 1
Option 2
Disabled Option
Example
<div class="form-check">
input" type="checkbox" id="check1" name="option1" value="something" checke
d>
<label class="form-check-label">Option 1</label>
</div>
Example Explained
To style checkboxes, use a wrapper element with class="form-check" to ensure

proper margins for labels and checkboxes. Then, add the .form-check-
label class to label elements, and .form-check-input to style checkboxes
properly inside the .form-check container. Use the checked attribute if you want
the checkbox to be checked by default.
Radio buttons
Radio buttons are used if you want to limit the user to just one selection from a
list of preset options.
Option 1
Option 2
Option 3
Example
<input type="radio" class="form-check-
input" id="radio1" name="optradio" value="option1" checked>Option 1
<label class="form-check-label" for="radio1"></label>
</div>
<input type="radio" class="form-check-
input" id="radio2" name="optradio" value="option2">Option 2
<label class="form-check-label" for="radio2"></label>
</div>
<input type="radio" class="form-check-input" disabled>Option 3
<label class="form-check-label"></label>
</div>
Toggle Switches
If you want your checkbox to be styled as a toggle switch, use the .form-
switch class together with the .form-check container:
Dark Mode
Example
<div class="form-check form-switch">
input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
<label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
Bootstrap Range
Custom Range
To style a range menu, add the .form-range class to the input element with
type="range":
Custom range
Default range
Example
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange"
Steps
By default, the interval between the range numbers is 1. You can change it by
using the step attribute:
Example
<input type="range" class="form-range" step="10">
Min and Max
By default, the minimum value is 0 and maximum value is 100. You can use
the min and/or max attribute change it:
Example
<input type="range" class="form-range" min="0" max="4">
Bootstrap Input Groups

Input Groups
The .input-group class is a container to enhance an input by adding an icon, text
or a button in front or behind the input field as a "help text".
To style the specified help text, use the .input-group-text class:
@example.com
Example
<form>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@example.com</span>
</div>
</form>
Input Group Size

Use the .input-group-sm class for small input groups and .input-group-lg for large
inputs groups:
Small
Default
Large
Example
<div class="input-group mb-3 input-group-sm">
<span class="input-group-text">Small</span>
<input type="text" class="form-control">
</div>
<div class="input-group mb-3">

<span class="input-group-text">Default</span>
</div>
<div class="input-group mb-3 input-group-lg">

<span class="input-group-text">Large</span>
</div>
Multiple Inputs and Helpers

Add multiple inputs or addons:
Person
OneTwoThree
Example

<span class="input-group-text">Person</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>


<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
Input Group with Checkboxes and Radios

You can also use checkboxes or radio buttons instead of text:
Example
<div class="input-group-text">
<input type="checkbox">
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>

<div class="input-group-text">
<input type="radio">
</div>
</div>
Input Group Buttons

Basic Button
Go
OKCancel
Example
<button class="btn btn-outline-primary" type="button">Basic
Button</button>
</div>

<input type="text" class="form-control" placeholder="Search">
<button class="btn btn-success" type="submit">Go</button>
</div>

<input type="text" class="form-control" placeholder="Something
clever..">
<button class="btn btn-primary" type="button">OK</button>
<button class="btn btn-danger" type="button">Cancel</button>
</div>
Input Group with Dropdown Button

Add a dropdown button in the input group. Note that you don't need the
.dropdown wrapper, as you normally would.
Dropdown button
Example
<div class="input-group mt-3 mb-3">
toggle="dropdown">
Dropdown button
</button>
</ul>
<input type="text" class="form-control" placeholder="Username">
</div>
Bootstrap Form Floating Labels

Floating Labels / Animated Labels
By default, when using labels, they normally appear on top of the input field:
Email Label
With floating labels, you can insert the label inside the input field, and make
them float/animate when you click on the input field:
Email
Password
Example
<div class="form-floating mb-3 mt-3">
<input type="text" class="form-control" id="email" placeholder="Enter
<label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">

<input type="text" class="form-control" id="pwd" placeholder="Enter
password" name="pswd">
<label for="pwd">Password</label>
</div>
Notes on floating labels: The <label> elements must come after the <input>
element, and the placeholder attribute is required for each <input> element
(even though it is not shown).
Textarea
It also works for textareas:
Comments
Example
<div class="form-floating">
<textarea class="form-
control" id="comment" name="text" placeholder="Comment goes
here"></textarea>
<label for="comment">Comments</label>
</div>
Select Menus
You can also use "floating-labels" on select menus. However, they will not
float/get animated. The label will always appear in the top left corner, inside the
select menu:
Select list (select one):
Example
<div class="form-floating">
<select class="form-select" id="sel1" name="sellist">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<label for="sel1" class="form-label">Select list (select one):</label>
</div>
Bootstrap Form Validation

Form Validation
Username:
Please fill out this field.
Password:
Please fill out this field.
I agree on blabla.
Check this checkbox to continue.
You can use different validation classes to provide valuable feedback to users.
Add either .was-validated or .needs-validation to the <form> element, depending on
whether you want to provide validation feedback before or after submitting the
form. The input fields will have a green (valid) or red (invalid) border to indicate
what's missing in the form. You can also add a .valid-feedback or .invalid-
feedback message to tell the user explicitly what's missing, or needs to be done
before submitting the form.
Example
In this example, we use .was-validated to indicate what's missing before
submitting the form:
<form action="/action_page.php" class="was-validated">

<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter
username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-
control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on
blabla.</label>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Bootstrap Grid System

The Grid System
Bootstrap's grid system is built with flexbox and allows up to 12 columns across
the page.
If you do not want to use all 12 columns individually, you can group the
columns together to create wider columns:
span span span span span span span span span span span span
1 1 1 1 1 1 1 1 1 1 1 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
The grid system is responsive, and the columns will re-arrange automatically
depending on the screen size.
Make sure that the sum adds up to 12 or fewer (it is not required that you use
all 12 available columns).
Grid Classes
The Bootstrap 5 grid system has six classes:

 .col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)
layouts.
Tip: Each class scales up, so if you want to set the same widths for sm and md,
Basic Structure of a Bootstrap 5 Grid

The following is a basic structure of a Bootstrap 5 grid:

<div class="row">
</div>
<div class="row">
</div>


<div class="row">
</div>
First example: create a row (<div class="row">). Then, add the desired number of
columns (tags with appropriate .col-*-* classes). The first star (*) represents
the responsiveness: sm, md, lg, xl or xxl, while the second star represents a
number, which should add up to 12 for each row. Second example: instead of
adding a number to each col, let bootstrap handle the layout, to create equal
width columns: two "col" elements = 50% width to each col, while three cols =
33.33% width to each col. Four cols = 25% width, etc. You can also use .col-
sm|md|lg|xl|xxl to make the columns responsive.
Grid Options
The following table summarizes how the Bootstrap 5 grid system works across
different screen sizes:
Extra
Small Medium Large Extra Large XXL
small
(>=576px) (>=768px) (>=992px) (>=1200px) (>=1400px)
(<576px)
Class .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
prefix
Collapsed to Collapsed to Collapsed to Collapsed to Collapsed to

start, start, start, start, start,
Grid Horizontal
horizontal horizontal horizontal horizontal horizontal
behaviour at all times
above above above above above
breakpoints breakpoints breakpoints breakpoints breakpoints
Container
None (auto) 540px 720px 960px 1140px 1320px
width
Suitable Portrait Landscape Laptops and Laptops and

Tablets Laptops
for phones phones Desktops Desktops
# of
12 12 12 12 12 12
columns
1.5rem 1.5rem 1.5rem 1.5rem 1.5rem 1.5rem

Gutter (.75rem on (.75rem on (.75rem on (.75rem on (.75rem on (.75rem on
width each side of each side of each side of each side of each side of a each side of a
a column) a column) a column) a column) column) column)
Nestable Yes Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes Yes

Column
Yes Yes Yes Yes Yes Yes
ordering
Bootstrap Grid Stacked to

horizontal
Grid Example: Stacked-to-horizontal
Let's create a basic grid system that starts out stacked on extra small devices,
before becoming horizontal on larger devices.
The following example shows a simple "stacked-to-horizontal" two-column

layout, meaning it will result in a 50%/50% split on all screens, except for extra
small screens, which it will automatically stack (100%):
col-sm-6
col-sm-6
Example: Stacked-to-horizontal
<div class="row">
<div class="col-sm-6 bg-primary">
</div>
<div class="col-sm-6 bg-dark">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tip: The numbers in the .col-sm-* classes indicates how many columns the div
should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4
columns, .col-sm-6 spans 6 columns, etc.
Note: Make sure that the sum adds up to 12 or fewer (it is not required that
you use all 12 available columns):
Tip: You can turn any full-width layout into a fixed-width responsive layout,
by changing the .container-fluid class to .container:
Example: Responsive Container

<div class="row">
</div>
</div>
</div>
</div>
Auto Layout Columns

In Bootstrap 5, there is an easy way to create equal width columns for all
devices: just remove the number from .col-size-* and only use the .col-
size class on a specified number of col elements. Bootstrap will recognize how
many columns there are, and each column will get the same width.
The size classes (sm, md, etc.) determines when the columns should be
responsive:

<div class="row">
<div class="col-sm">1 of 2</div>
</div>

<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Extra Small

Extra Small Grid Example
XSmall Small Medium Large Extra Large XXL
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Screen width <576px >=576px >=768px >=992px >=1200px >=1400px
Assume we have a simple layout with two columns. We want the columns to
split 25%/75% for ALL devices.
We will add the following classes to our two columns:
<div class="col-3">....</div>
<div class="col-9">....</div>
The following example will result in a 25%/75% split on all devices (extra small,
small, medium, large, xlarge and xxlarge).
col-3
col-9
Example
<div class="row">
<div class="col-3 bg-primary">
</div>
<div class="col-9 bg-dark">
</div>
</div>
</div>
For a 33.3%/66.6% split, you would use .col-4 and .col-8 (and for a 50%/50%
split, you would use .col-6 and .col-6):
col-4
col-8
col-6
col-6
Example

<div class="row">
</div>
</div>
</div>
</div>

<div class="row">
</div>
</div>
</div>
</div>
Auto Layout Columns

devices: just remove the number from .col-* and only use the .col class on a
specified number of col elements. Bootstrap will recognize how many columns
there are, and each column will get the same width:


<div class="row">
<div class="col">1 of 2</div>
</div>


<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Small

Small Grid Example
Assume we have a simple layout with two columns. We want the columns to be
split 25%/75% for small devices.
Small devices are defined as having a screen width from 576 pixels to 767
pixels.
For small devices we will use the .col-sm-* classes.
We will add the following classes to our two columns:
<div class="col-sm-3">....</div>
The following example will result in a 25%/75% split on small (and medium,
large, xlarge and xxlarge) devices. On extra small devices, it will automatically
stack (100%):
.col-sm-3
.col-sm-9
Example
<div class="row">
</div>
</div>
</div>
</div>
For a 33.3%/66.6% split, you would use .col-sm-4 and .col-sm-8 (and for a
50%/50% split, you would use .col-sm-6 and .col-sm-6):
.col-sm-4
.col-sm-8
.col-sm-6
.col-sm-6
Example

<div class="row">
</div>
</div>
</div>
</div>


<div class="row">
</div>
</div>
</div>
</div>
Auto Layout Columns

devices: just remove the number from .col-sm-* and only use the .col-sm class
on a specified number of col elements. Bootstrap will recognize how many
columns there are, and each column will get the same width.
If the screen size is less than 576px, the columns will stack horizontally:

<div class="row">
</div>

<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Medium

Medium Grid Example
In the previous chapter, we presented a grid example with classes for small
devices. We used two divs (columns) and we gave them a 25%/75% split:
But on medium devices the design may be better as a 50%/50% split.
Medium devices are defined as having a screen width from 768 pixels to 991
pixels.
For medium devices we will use the .col-md-* classes:
<div class="col-sm-3 col-md-6">....</div>

Now Bootstrap is going to say "at the small size, look at classes with -sm- in
them and use those. At the medium size, look at classes with -md- in them and
use those".
The following example will result in a 25%/75% split on small devices and a
50%/50% split on medium (and large, xlarge and xxlarge) devices. On extra
small devices, it will automatically stack (100%):
.col-sm-3 .col-md-6
.col-sm-9 .col-md-6
Example
<div class="row">
<div class="col-sm-3 col-md-6">
</div>
<div class="col-sm-9 col-md-6">
</div>
</div>
</div>
Using Only Medium

In the example below, we only specify the .col-md-6 class (without .col-sm-*).
This means that medium, large, extra large and XXL devices will split 50%/50%
- because the class scales up. However, for small and extra small devices, it will
stack vertically (100% width):
Example
<div class="row">
<div class="col-md-6">
</div>
<div class="col-md-6">
</div>
</div>
Auto Layout Columns
devices: just remove the number from .col-md-* and only use the .col-md class


<div class="row">
<div class="col-md">1 of 2</div>
</div>


<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Large

Large Grid Example
In the previous chapter, we presented a grid example with classes for small and
medium devices. We used two divs (columns) and we gave them a 25%/75%
split on small devices, and a 50%/50% split on medium devices:

But on large devices the design may be better as a 33%/66% split.
Large devices are defined as having a screen width from 992 pixels to 1199
pixels.
For large devices we will use the .col-lg-* classes:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>

Now Bootstrap is going to say "at the small size, look at classes with -sm- in
them and use those. At the medium size, look at classes with -md- in them and
use those. At the large size, look at classes with the word -lg- in them and use
those.
The following example will result in a 25%/75% split on small devices, a

50%/50% split on medium devices, and a 33%/66% split on large, xlarge and
xxlarge devices. On extra small devices, it will automatically stack (100%):
.col-sm-3 .col-md-6 .col-lg-4
.col-sm-9 .col-md-6 .col-lg-8
Example
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
</div>
</div>
</div>
Using Only Large

In the example below, we only specify the .col-lg-6 class (without .col-md-
* and/or .col-sm-*). This means that large, xlarge and xxlarge devices will split
50%/50%. However, for medium, small AND extra small devices, it will stack
vertically (100% width):
Example
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
Auto Layout Columns

devices: just remove the number from .col-lg-* and only use the .col-lg class


<div class="row">
<div class="col-lg">1 of 2</div>
</div>


<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Extra Large

Extra Large Grid Example

In the previous chapter, we presented a grid example with classes for small,
medium and large devices. We used two divs (columns) and we gave them a
25%/75% split on small devices, and a 50%/50% split on medium devices and
a 33%/66% split on large devices:

But on xlarge devices the design may be better as a 20%/80% split.
Extra large devices are defined as having a screen width from 1200 pixels and
above.
For xlarge devices we will use the .col-xl-* classes:
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">....</div>

<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">....</div>
The following example will result in a 25%/75% split on small devices, a

50%/50% split on medium devices, a 33%/66% split on large devices and a
20%/80% split on xlarge and xxlarge devices. On extra small devices, it will
automatically stack (100%):
col-sm-3 col-md-6 col-lg-4 col-xl-2
col-sm-9 col-md-6 col-lg-8 col-xl-10
Example
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
</div>
</div>
</div>
Note: Make sure that the sum always adds up to 12.
Using Only XLarge

In the example below, we only specify the .col-xl-6 class (without .col-lg-
*, .col-md-* and/or .col-sm-*). This means that xlarge and xxlarge devices will
split 50%/50%. However, for large, medium, small AND extra small devices, it
will stack vertically (100% width):
Example
<div class="row">
<div class="col-xl-6">
</div>
<div class="col-xl-6">
</div>
</div>
</div>
Auto Layout Columns

devices: just remove the number from .col-xl-* and only use the .col-xl class

<div class="row">
<div class="col-xl">1 of 2</div>
</div>


<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid XXL

XXL Grid Example

XXL devices are defined as having a screen width from 1400 pixels and
above.
The following example will result in a 50%/50% split on medium, large and
extra large devices, and a 25%/75% split on XXL devices. On small and extra
small devices, it will automatically stack (100%):
col-md-6 col-xxl-3
col-md-6 col-xxl-9
Example
<div class="row">
<div class="col-md-6 col-xxl-3">
</div>
<div class="col-md-6 col-xxl-9">
</div>
</div>
</div>
Note: Make sure that the sum always adds up to 12.
Using Only XXL

In the example below, we only specify the .col-xxl-6 class (without .col-md-*,
and/or .col-sm-*). This means that xxlarge devices will split 50%/50%.
However, for extra large, large, medium, small AND extra small devices, it will
stack vertically (100% width):
Example
<div class="row">
<div class="col-xxl-6">
</div>
<div class="col-xxl-6">
</div>
</div>
</div>
Auto Layout Columns

devices: just remove the number from .col-xxl-* and only use the .col-xxl class


<div class="row">
<div class="col-xxl">1 of 2</div>
</div>


<div class="row">
</div>
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
Bootstrap Grid Examples

Below we have collected some examples of Bootstrap 5 grid layouts.
Three Equal Columns

Use the .col class on a specified number of elements and Bootstrap will
recognize how many elements there are (and create equal-width columns). In
the example below, we use three col elements, which gets a width of 33.33%
each.
col
col
col
Example
<div class="row">
<div class="col">col</div>
</div>
Three Equal Columns Using Numbers

You can also use numbers to control the column width. Just make sure that the
sum adds up to 12 or fewer (it is not required that you use all 12 available
columns):
col-4
col-4
col-4
Example
<div class="row">
<div class="col-4">col-4</div>
</div>
Three Unequal columns

To create unequal columns, you have to use numbers. The following example
will create a 25%/50%/25% split:
col-3
col-6
col-3
Example
<div class="row">
</div>
Setting One Column Width

However, it is enough to only set the width of one column, and have the sibling
columns automatically resize around it. The following example will create a
25%/50%/25% split:
col
col-6
col
Example
<div class="row">
</div>
More Equal Columns

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6
Example

<div class="row">
</div>


<div class="row">
</div>


<div class="row">
</div>
Row Cols
You can also control how many columns that should appear next to each other
(regardless of how many cols), with the .row-cols-* classes:
1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6
Example
<div class="row row-cols-1">
</div>

</div>

</div>
More Unequal Columns

1 of 2
2 of 2
1 of 4
2 of 4
3 of 4
4 of 4
1 of 4
2 of 4
3 of 4
4 of 4
Example

<div class="row">
<div class="col-8">1 of 2</div>
</div>


<div class="row">
</div>


<div class="row">
</div>
Equal Height
If one of the column is taller than the other (due to text or CSS height), the rest
will follow:
Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim
volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse
nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat
platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
col
col
Example
<div class="row">
<div class="col">Lorem ipsum...</div>
</div>
Nested Columns
col-8
col-6
col-6
col-4
The following example shows how to create a two column layout, with another
two columns inside one of the columns:
Example
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
</div>
</div>
</div>
Responsive Classes
The Bootstrap 5 grid system has five classes:

 .col-xxl- (xxl devices - screen width equal to or greater than 1400px)
layouts.
Tip: Each class scales up, so if you wish to set the same widths for sm and md,
Stacked to Horizontal
col-sm-9
col-sm-3
col-sm
col-sm
col-sm
The following example shows how to create a column layout that starts out
stacked on extra small devices, before becoming horizontal on larger devices
(sm, md, lg and xl):
Example
<div class="row">
<div class="col-sm-9">col-sm-9</div>
<div class="col-sm-3">col-sm-3</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
</div>
Mix and Match

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8
Example

<div class="row">
<div class="col-6 col-sm-9">col-6 col-sm-9</div>
<div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<div class="row">
<div class="col-7 col-lg-8">col-7 col-lg-8</div>
<div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
<div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>
No Gutters
To change the gutters (extra space) between columns, use any of the .g-
1|2|3|4|5 classes (.g-4 is default).
To remove the gutter completely, use .g-0:
Example
<div class="row g-0">

What Is Bootstrap?

Uploaded by

Copyright:

Available Formats

What Is Bootstrap?

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is Bootstrap?

Uploaded by

Copyright:

Available Formats

What is Bootstrap?

 Bootstrap is a free front-end framework for faster and easier web

What is Responsive Web Design?

jsDelivr provides CDN support for Bootstrap's CSS and JavaScript:

One advantage of using the Bootstrap 5 CDN:

Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles

<meta name="viewport" content="width=device-width, initial-scale=1">

1. The .container class provides a responsive fixed width container

Two Basic Bootstrap Examples

1. The .container class provides a responsive fixed width container

Extra small Small Medium Large Extra Large XXL

max-width 100% 540px 720px 960px 1140px 1320px

Container Border and Color

<div class="container p-5 my-5 bg-dark text-white"></div>

<div class="container p-5 my-5 bg-primary text-white"></div>

Class Extra small Small Medium Large Extra large XXL

.container-sm 100% 540px 720px 960px 1140px 1320px

.container-md 100% 100% 720px 960px 1140px 1320px

.container-lg 100% 100% 100% 960px 1140px 1320px

.container-xl 100% 100% 100% 100% 1140px 1320px

.container-xxl 100% 100% 100% 100% 100% 1320px

span 4 span 4 span 4

 .col- (extra small devices - screen width less than 576px)

Three Equal Columns

Two Unequal Responsive Columns

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Dark grey text.

Light grey text.

White text with 50% opacity on black background

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

The .table class adds basic styling to a table:

Dark Striped Table

Hoverable Dark Table

Primary Joe joe@example.com

Success Doe john@example.com

Danger Moe mary@example.com

Warning Refs bo@example.com

Active Activeson act@example.com

Secondary Secondson sec@example.com

Light Angie angie@example.com

The contextual classes that can be used are:

.table-primary Blue: Indicates an important action

.table-success Green: Indicates a successful or positive action

.table-danger Red: Indicates a dangerous or potentially negative action

.table-info Light blue: Indicates a neutral informative change or action

.table-warning Orange: Indicates a warning that might need attention

.table-secondary Grey: Indicates a slightly less important action

.table-light Light grey table or table row background