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 Typography

Bootstrap 5 Typography

Bootstrap 5 uses default text formatting, such as font size, line-height, and margins.

  • Font-family: Native font stack (system fonts)
  • Global Font Size: 1rem (16px)
  • Line-height: 1.5

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight). Classes .display-1 to .display-6.

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