Circle
The .rounded-circle class shapes the image to a circle:
My First Bootstrap Page
This container has a border and some extra padding and margins.
My First Bootstrap Page
This container has a dark background color and a white text, and some extra padding and margins.
My First Bootstrap Page
This container has a blue background color and a white text, and some extra padding and margins.
Abbreviations
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
Typography
Lowercased text.
Uppercased text.
Capitalized text.
Contextual Colors
Use the contextual classes to provide "meaning through colors":
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.
This text is dark grey.
Default body color (often black).
This text is light grey (on white background).
This text is white (on white background).
Opacity Text Colors
Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
Black text with 50% opacity on white background
White text with 50% opacity on black background
Contextual Backgrounds
Use the contextual background classes to provide "meaning through colors".
Background Color with Contrasting Text Color
This text is important.
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.
Hoverable Dark Table
The .table-hover class adds a hover effect (grey background color) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Button Styles
Spinner
Growing Spinner
Numbered List Group
Use the .list-group-numbered class to create list items with numbers in front of them:
- First item
- Second item
- Third item
Dropdowns
Add the .dropstart class next to the dropdown menu to left-align the dropdown. Note that the caret/arrow is added automatically. Also note that we float the dropdown to the right:
Dropdowns
Add the .dropend class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:
Accordion Example
Note: The data-bs-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.
Toggleable Tabs
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Toggleable Pills
HOME
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Navbar With Dropdown
This example adds a dropdown menu in the navbar.
Navbar Forms
You can also include forms inside the navigation bar.
Los Angeles
We had such a great time in LA!
Chicago
Thank you, Chicago!
New York
We love the Big Apple!
Carousel Example
The following example shows how to create a basic carousel with indicators and controls.
Fading Modal Example
Click on the button to open the modal.
Toast Example
In this example, we use a button to show the toast message.
Some text inside the toast body
My Heading
Offcanvas Sidebar
Offcanvas is similar to modals, except that it is often used as a sidebar.
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Some text lorem ipsum.
Right Offcanvas
The .offcanvas-end class positions the offcanvas to the right of the page.
Heading
Some text lorem ipsum.
Some text lorem ipsum.
Some text lorem ipsum.
Dark Offcanvas Sidebar
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:
Shadows
Use the shadow- classes to to add shadows to an element:
Dark Mode Dropdown
Click on the dropdown menu to see the effect.
Color Picker
To style an input with type="color" properly, use the .form-control-color class:
Data List
Checkboxes
To style a checkbox, use a container element with a .form-check class, and add .form-check-label to labels, and .form-check-input to the input with type="checkbox".
The form below contains three checkboxes. The first option is checked by default, and the last option is disabled:
Radio buttons
The form below contains three radio buttons. The first option is checked by default, and the last option is disabled:
Toggle Switch
Try to submit the form with and without toggling the switch.
Custom Range
To create a custom range menu, add the .form-range class to the input element with type="range":
Form Validation
Try to submit the form.