Bootstrap 5 UI Tutorial

Build fast, responsive sites with Bootstrap 5

Chapter Quiz Exercises
Course Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities

BS5 Get Started

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development. It 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.

Why use Bootstrap?

  • Easy to use
  • Responsive features
  • Mobile-first approach
  • Browser compatibility

Get Started with Latest Links

You can include Bootstrap 5 via CDN. Add these links to your HTML:

CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
JS:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code
Result
Topics
BS5 Get Started BS5 Containers BS5 Grid Basic BS5 Typography BS5 Colors BS5 Tables BS5 Images BS5 Alerts BS5 Buttons BS5 Button Groups BS5 Badges BS5 Progress Bars BS5 Spinners BS5 Pagination BS5 List Groups BS5 Cards BS5 Dropdowns BS5 Collapse BS5 Navs BS5 Navbar BS5 Carousel BS5 Modal BS5 Forms BS5 Input Groups BS5 Floating Labels BS5 Form Validation BS5 Grid System BS5 Dark Mode BS5 Flex BS5 Utilities