Bootstrap 5 Tutorial - check our video
This video is available as text (below) as well as 1,5 crash course which you can watch on the right side.
Summary of the tutorial:
Do you want to be up to date with Bootstrap 5 news and get notification about new Bootstrap 5 tutorials? Sign up for our newsletter
By subscribing you agree to receive the newsletter & commercial information from StartupFlow s.c. Kijowska 7, Warsaw. Policy
Bootstrap 5 tutorial - crash course for beginners
Download & documentation
Download Bootstrap 5 Bootstrap 5 documentationInstallation
Starter
The easiest way is to download this starting package. It contains all required css and js as well as index.html file with all dependencies included.
Manual / CDN
If you have an existing project you can either download css/js files from here.
Copy them into your project directory and link as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Import Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css" />
[...]
</head>
<body>
[...]
<!-- Import Bootstrap dependency (Popper) and JS -->
<script src="https://unpkg.com/@popperjs/core@2.4.0/dist/umd/popper.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
Bootstrap cards
Basic card
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut
dolore quia officia earum nemo libero, culpa neque error! Provident,
asperiores itaque. Ipsam molestiae deserunt quo. Id pariatur repellat
aperiam.
</p>
</div>
</div>
Card with image
Card title
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut dolore quia officia earum nemo libero, culpa neque error! Provident, asperiores itaque. Ipsam molestiae deserunt quo. Id pariatur repellat aperiam.
<div class="card my-3" style="width: 18rem;">
<img
class="card-img-top"
src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-dark.jpg"
alt=""
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic ut
dolore quia officia earum nemo libero, culpa neque error!
Provident, asperiores itaque. Ipsam molestiae deserunt quo. Id
pariatur repellat aperiam.
</p>
</div>
</div>
Typography
Hadings preview:
h1 heading
h2 heading
h3 heading
h4 heading
h5 heading
h6 heading
<h1>h1 heading</h1>
<h2>h2 heading</h2>
<h3>h3 heading</h3>
<h4>h4 heading</h4>
<h5>h5 heading</h5>
<h6>h6 heading</h6>
Heading classes
If for some reason you can't use heading tag, you can easily style other elements like paragraphs to imitate Headings.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>
Displays
If you need something more verbose - use display classes.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Responsive images
<img class="img-fluid rounded" src="https://mdbootstrap.com/img/Marketing/mdb-press-pack/mdb-dark.jpg">
You can also add classes like rounded to round image corners.
Alerts
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Carousel
.jpg)
.jpg)
.jpg)
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(35).jpg" class="d-block w-100" alt="Image 1">
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(33).jpg" class="d-block w-100" alt="Image 2">
</div>
<div class="carousel-item">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(31).jpg" class="d-block w-100" alt="Image 3">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
Icons
<svg class="bi bi-alarm-fill" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.5.5A.5.5 0 0 1 6 0h4a.5.5 0 0 1 0 1H9v1.07a7.002 7.002 0 0 1 3.537 12.26l.817.816a.5.5 0 0 1-.708.708l-.924-.925A6.967 6.967 0 0 1 8 16a6.967 6.967 0 0 1-3.722-1.07l-.924.924a.5.5 0 0 1-.708-.708l.817-.816A7.002 7.002 0 0 1 7 2.07V1H5.999a.5.5 0 0 1-.5-.5zM.86 5.387A2.5 2.5 0 1 1 4.387 1.86 8.035 8.035 0 0 0 .86 5.387zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1zm-5 4a.5.5 0 0 0-1 0v3.882l-1.447 2.894a.5.5 0 1 0 .894.448l1.5-3A.5.5 0 0 0 8.5 9V5z" />
</svg>
<svg class="bi bi-alt" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M1 13.5a.5.5 0 0 0 .5.5h3.797a.5.5 0 0 0 .439-.26L11 3h3.5a.5.5 0 0 0 0-1h-3.797a.5.5 0 0 0-.439.26L5 13H1.5a.5.5 0 0 0-.5.5zm10 0a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0-.5.5z" />
</svg>
<svg class="bi bi-toggles" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M11.5 1h-7a2.5 2.5 0 0 0 0 5h7a2.5 2.5 0 0 0 0-5zm-7-1a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7h-7zm0 9a3.5 3.5 0 1 0 0 7h7a3.5 3.5 0 1 0 0-7h-7zm7 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
<path fill-rule="evenodd"
d="M8 3.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0zM4.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z" />
</svg>
<svg class="bi bi-bar-chart" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5h-2v12h2V2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z" />
</svg>
<svg class="bi bi-reply-all-fill" width="4rem" height="4rem" viewBox="0 0 16 16" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path
d="M8.079 11.9l4.568-3.281a.719.719 0 0 0 0-1.238L8.079 4.1A.716.716 0 0 0 7 4.719V6c-1.5 0-6 0-7 8 2.5-4.5 7-4 7-4v1.281c0 .56.606.898 1.079.62z" />
<path fill-rule="evenodd"
d="M10.868 4.293a.5.5 0 0 1 .7-.106l3.993 2.94a1.147 1.147 0 0 1 0 1.946l-3.994 2.94a.5.5 0 0 1-.593-.805l4.012-2.954a.493.493 0 0 1 .042-.028.147.147 0 0 0 0-.252.496.496 0 0 1-.042-.028l-4.012-2.954a.5.5 0 0 1-.106-.699z" />
</svg>
Bootstrap 5 & Material Design
MDB has officially released the Material Design UI Kit for Bootstrap 5.
Please remember that this is still an alpha version and is not yet stable. Major changes will follow up to the beta.
Material Design for Bootstrap 5