Rounded Corners
The .rounded class adds rounded corners to an image:
Bootstrap 5 is the newest version of Bootstrap, which is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.
Bootstrap 5 is completely free to download and use!
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 VersionsBootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new components, faster stylesheet and more responsiveness.
Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported.
The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to vanilla JavaScript instead of jQuery.
There are two ways to start using Bootstrap 5 on your own web site.
You can:
Include Bootstrap 5 from a CDN
Download Bootstrap 5 from getbootstrap.com
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:
This part is inside a .container class.
The .container class provides a responsive fixed width container.
This part is inside a .container-fluid class.
The .container-fluid class provides a full width container, spanning the entire width of the viewport.
Container Padding
By default, containers have left and right padding, with no top or bottom padding.
This container has an extra top padding.
Try to remove the .pt-5 class to see the difference.
This container has a border and some extra padding and margins.
This container has a dark background color and a white text, and some extra padding and margins.
This container has a blue background color and a white text, and some extra padding and margins.
Resize the browser window to see the effect.
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:
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.
The following example shows how to create three equal-width columns, on all devices and screen widths:
Note: Try to add a new div with class="col" inside the row class - this will create four equal-width columns.
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:
Resize the browser window to see the effect.
The columns will automatically stack on top of each other when the screen is less than 576px wide.
The following example shows how to get two various-width columns starting at tablets and scaling to large extra desktops:
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
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.
You can also use .h1 to .h6 classes on other elements to make them behave as headings if you want:
h1 Bootstrap heading
h2 Bootstrap heading
h3 Bootstrap heading
h4 Bootstrap heading
h5 Bootstrap heading
h6 Bootstrap heading
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:
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:
Use the mark element (or the .mark class) to highlight text.
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:
The blockquote element is used to present content from another source:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
The dl element indicates a description list:
< code>
Bootstrap 5 will style the HTML < code> element in the following way
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div defines a section in a document.
< kbd>
Bootstrap 5 will style the HTML < kbd> element in the following way
Use ctrl + p to open the Print dialog box.
< pre>
Bootstrap 5 will style the HTML < pre> element in the following way
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
For multiple lines of code, use the pre element:
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
Use the .lead class to make a paragraph "stand out":
This paragraph stands out.
This is a regular paragraph.
aligned text
Left-aligned text.
Right-aligned text.
Center-aligned text.
No wrap text. No wrap text. No wrap text. No wrap text.
Prevents long text from breaking layout
The .text-break class prevents long text from breaking layout.
With .text-break:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
Without .text-break:
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZzAaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz
.text-decoration-none --- Removes the underline from a link
Use the .text-decoration-none class to remove the underline from a link.
A link without underline.TEXT case
Lowercased text.
Uppercased text.
Capitalized text.
.initialism Displays the text inside an < abbr> element in a slightly smaller font size
The WHO was founded in 1948. (normal abbr)
The WHO was founded in 1948. (slightly smaller abbr)
.list-unstyled
The class .list-unstyled removes the default list-style and left margin on list items (immediate children only):
.list-inline
The class .list-inline places all list items on a single line, when used together with the .list-inline-item:
Bootstrap 5 has some contextual classes that can be used 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).
You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:
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
Background Colors
Use the contextual background classes to provide "meaning through colors".
Note that you can also add a .text-* class if you want a different 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.
The .table class adds basic styling (light padding and horizontal dividers) to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-striped class adds zebra-stripes to a table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-bordered class adds borders on all sides of the table and the cells:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-hover class enables a hover state (grey background on mouse over) on table rows:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-dark class adds a black background to the table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Combine .table-dark and .table-striped to create a dark, striped table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
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 |
The .table-borderless class removes borders from the table:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
Contextual classes can be used to color the table, table rows or table cells. The classes that can be used are: .table-primary, .table-success, .table-info, .table-warning, .table-danger, .table-active, .table-secondary, .table-light and .table-dark:
| Firstname | Lastname | |
|---|---|---|
| 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 |
You can use any of the contextual classes to only add a color to the table header:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-sm class makes the table smaller by cutting cell padding in half:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@example.com |
| July | Dooley | july@example.com |
The .table-responsive class adds a scrollbar to the table when needed:
| # | Firstname | Lastname | Age | City | Country | Sex | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example | Example |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| # | Firstname | Lastname | Age | City | Country | Sex | Example | Example | Example | Example |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Anna | Pitt | 35 | New York | USA | Female | Yes | Yes | Yes | Yes |
The .rounded class adds rounded corners to an image:
The .rounded-circle class shapes the image to a circle:
The .img-thumbnail class creates a thumbnail of the image:
Use the float classes to float the image to the left or to the right:
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
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:
The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):
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:
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..
Bootstrap 5 provides an easy way to create predefined alert messages:
Alerts are created with the .alert class, followed by a contextual color classes:
Add the .alert-link class to any links inside the alert box to create "matching colored links":
Add the alert-link class to any links inside the alert box to create "matching colored links".
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).
The button with class="btn-close" and data-bs-dismiss="alert" is used to close the alert box.
The alert-dismissible class aligns the button to the right.
The .fade and .show classes adds a fading effect when closing the alert message:
The .fade and .show classes adds a fading effect when closing the alert message.
Bootstrap 5 also provides eight outline/bordered buttons.
Move the mouse over them to see an additional "hover" effect:
Use the .btn-lg class for large buttons or .btn-sm class for small 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:
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:
If you have many block-level buttons, you can control the space between them with the .gap-* class:
If you have many block-level buttons, you can control the space between them with the .gap-* class:
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.
You can also add "spinners" to a button
Add spinners to buttons:
Bootstrap 5 allows you to group a series of buttons together (on a single line) in a button group:
Use a < div> element with class .btn-group to create a button group:
The .btn-group class creates a button group:
Add class .btn-group-* to size all buttons in a button group.
Use the class .btn-group-vertical to create a vertical button group:
Use the .btn-group-vertical class to create a vertical button group:
Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:
Button groups are "inline" by default, which makes them appear side by side when you have multiple groups:
Nest button groups to create dropdown menus:
Nest button groups to create dropdown menus:
Badges are used to add additional information to any content:
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):
Use any of the contextual classes (.bg-*) to change the color of a badge:
Use the .rounded-pill class to make the badges more round:
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:
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:
Add text inside the progress bar to show the visible percentage:
By default, the progress bar is blue (primary). Use any of the contextual background classes to change its color:
Use any of the contextual color classes to change the color of the progress bar:
Use the .progress-bar-striped class to add stripes to the progress bars:
The .progress-bar-striped class adds stripes to the progress bars:
Add the .progress-bar-animated class to animate the progress bar:
Add the .progress-bar-animated class to animate the progress bar:
Progress bars can also be stacked:
Create a stacked progress bar by placing multiple bars into the same div with class="progress":
To create a spinner/loader, use the .spinner-border class:
To create a spinner/loader, use the .spinner-border class:
Use any text color utilites to add a color to the spinner:
Use any text color utilites to add a color to the spinner:
Use the .spinner-grow class if you want the spinner/loader to grow instead of "spin":
Use .spinner-border-sm or .spinner-grow-sm to create a smaller spinner:
Add spinners to buttons:
Basic Pagination
If you have a web site with lots of pages, you may wish to add some sort of pagination to each page.
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:
Active State
The .active class is used to "highlight" the current page:
Add class .active to let the user know which page he/she is on:
Disabled State
The .disabled class is used for un-clickable links:
Add class .disabled if a page for some reason is disabled:
Pagination Sizing
Pagination blocks can also be sized to a larger or a smaller size:
Add class .pagination-lg for larger blocks or .pagination-sm for smaller blocks.
Large:
Default:
Small:
Use utilitiy classes to change the alignment of the pagination:
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
Basic List Groups
The most basic list group is an unordered list with list items:
To create a basic list group, use an < ul> element with class .list-group, and < li> elements with class .list-group-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:
The .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:
The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.
Use the .list-group-flush class to remove some borders and rounded corners:
Use the .list-group-numbered class to create list items with numbers in front of them:
The .list-group-horizontal class displays the list items horizontally instead of vertically:
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:
Contextual classes can be used to add color to the list items:
Move the mouse over the linked items to see the hover effect:
The .breadcrumb class indicates the current page's location within a navigational hierarchy:
To create a basic list group, use an < ul> element with class .list-group, and < li> elements with class .list-group-item:
Use the .active class to highlight the current 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:
The .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:
The disabled class adds a lighter text color to the disabled item. And if used on links, it will remove the default hover effect.
Use the .list-group-flush class to remove some borders and rounded corners:
Use the .list-group-flush class to remove some borders and rounded corners:
Use the .list-group-numbered class to create list items with numbers in front of them:
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:
The .list-group-horizontal class displays the list items horizontally instead of vertically:
Contextual classes can be used to add color to the list items:
Move the mouse over the linked items to see the hover effect:
Combine .badge classes with utility/helper classes to add badges inside the list group:
Combine .badge classes with utility/helper classes to add badges inside the list group:
A card in Bootstrap 5 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.
A basic card is created with the .card class, and content inside the card has a .card-body class:
The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card:
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.
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) in card-body. The .card-link class adds a blue color to any link, and a hover effect.
Image at the top (card-img-top):
Image at the bottom (card-img-bottom):
Turn an image into a card background and use .card-img-overlay to overlay the card's text:
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:
We had such a great time in LA!
Thank you, Chicago!
We love the Big Apple!
The following example shows how to create a basic carousel with indicators and controls.
Add elements inside < div class="carousel-caption"> within each < div class="carousel-item"> to create a caption for each slide:
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
The .dropdown class is used to indicate a dropdown menu.
Use the .dropdown-menu class to actually build the dropdown menu.
To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".
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-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.
The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border:
The .dropdown-header class is used to add headers inside the dropdown menu:
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):
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:
Add the .dropend class next to the dropdown menu to right-align the dropdown. Note that the caret/arrows is added automatically:
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:
To right-align the dropdown menu, add the .dropdown-menu-end class to the element with .dropdown-menu:
Add the .dropdown-menu-end class to .dropdown-menu to right-align the dropdown menu.
If you want the dropdown menu to expand upwards instead of downwards, change the < div> element with class="dropdown" to "dropup":
The .dropup class makes the dropdown menu expand upwards instead of downwards:
It must be room for the dropup menu to grow. That is why we add some extra lorem ipsum text.
Lorem ipsum one more time!
The .dropdown-item-text class is used to add plain text to a dropdown item, or used on links for default link styling.
The .dropdown-item-text class is used to add plain text to a dropdown, or used on links for default link styling.
Nest button groups to create dropdown menus:
Basic Collapsible
Collapsibles are useful when you want to hide and show large amount of content:
Click on the button to toggle between showing and hiding content.
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:
Add the show class next to the collapse class to show the content by default.
Click on the button to toggle between showing and hiding content.
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.
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.
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:
Basic horizontal menu:
Add the .justify-content-center class to center the nav, and the .justify-content-end class to right-align the nav.
Left-aligned nav (default):
Centered nav:
Right-aligned nav:
Add the .flex-column class to create a vertical nav:
Use the .flex-column class to create a vertical nav:
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.
Turn the nav menu into navigation tabs with the .nav 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 the tutorial page.
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.
Turn the nav menu into navigation pills with the .nav nav-pills class:
Justify the tabs/pills with the .nav-justified class (equal width):
To justify tabs/pills (equal width), use the .nav-justified class:
Justified tabs:
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:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
A navigation bar is a navigation header that is placed at the top of the page:
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:
A navigation bar is a navigation header that is placed at the top of the page.
The navbar-expand-xxl|xl|lg|md|sm class determines when the navbar should stack vertically (on xxlarge, extra large, large, medium or small screens).
Remove the .navbar-expand-* class to create a navigation bar that will always be vertical:
A navigation bar is a navigation header that is placed at the top of the page.
Add the .justify-content-center class to center the navigation bar:
Use the .justify-content-center class to center the navigation bar.
In this example, the navbar will be centered on medium, large and extra large screens. On small screens it will be displayed vertically and left-aligned (because of the .navbar-expand-sm class).
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.
Use any of the .bg-color classes to add a background color to the navbar.
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.
The .navbar-brand class is used to highlight the brand/logo/project name of your page:
The .navbar-brand class is used to highlight the brand/logo/project name of your page.
When using the .navbar-brand class with images, Bootstrap 5 will automatically style the image to fit the navbar.
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding and text color).
Use the .navbar-text class to vertical align any elements inside the navbar that are not links (ensures proper padding).
In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
Only when the button is clicked, the navigation bar will be displayed.
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.
Navbars can also hold dropdown menus:
This example adds a dropdown menu in the navbar.
You can also include forms inside the navigation bar:
You can also include forms inside the 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:
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
Use the .fixed-bottom class to make the navbar stay at the bottom of the page:
A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.
A sticky navigation bar stays fixed at the top of the page when you scroll past it.
Scroll this page to see the effect. Note: sticky-top does not work in IE11 and earlier.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
Some example text. Some example text. Some example text. Some example text. Some example text.
The Modal component is a dialog box/popup window that is displayed on top of the current page:
How To Create a Modal
The following example shows how to create a basic modal:
Click on the button to open the modal.
Use the .fade class to add a fading effect when opening and closing the modal:
Click on the button to open the modal.
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:
Click on the button to open the modal.
Click on the button to open the modal.
Click on the button to open the modal.
If you want the modal to span the whole width and height of the page, use the .modal-fullscreen class:
Click on the button to open the fullscreen modal.
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
Click on the button to open the modal.
When you have alot of content inside the modal, a scrollbar is added to the page. See the examples below to understand it:
Click on the button to open the modal.
However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-scrollable to .modal-dialog:
Click on the button to open the modal.
The Tooltip component is small pop-up box that appears when the user moves the mouse pointer over an element:
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:
Note: Tooltips must be initialized with JavaScript to work.
The following code will enable all tooltips in the document:
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:
The data-bs-placement attribute specifies the tooltip position.
Top Bottom Left RightHow 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:
Note: Popovers must be initialized with JavaScript to work.
The following code will enable all popovers in the document:
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:
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:
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":
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.).
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":
A toast is like an alert box that is only shown for a couple of seconds when something happens (i.e. when a user clicks on a button, submits a form, etc.).
In this example, we use the .show class to always show the toast by default. You can close it by clicking on the close (x) icon inside the toast header.
Some text inside the toast body
In this example, we use a button to show the toast message.
Some text inside the toast body
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!
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.
Some text lorem ipsum.
Some text lorem ipsum.
Some text lorem ipsum.
Offcanvas is similar to modals, except that it is often used as a sidebar.
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.
Use the .offcanvas-start|end|top|bottom to position the offcanvas to the left, right, top or bottom:
Some text lorem ipsum.
Some text lorem ipsum.
Some text lorem ipsum.
The .offcanvas-end class positions the offcanvas to the right of the page.
Some text lorem ipsum.
The .offcanvas-top class positions the offcanvas at the top of the page.
Some text lorem ipsum.
The .offcanvas-bottom class positions the offcanvas at the bottom of the page.
Borders Use the border classes to add or remove borders from an element
Use the border classes to add or remove borders from an element:
Use .border-1 to .border-5 to change the width of the border:
Use a contextual border color to add a color to the border: