UI Elements
Buttons
Basic
Bootstrap includes six predefined button styles, each serving its own semantic purpose..
Outline
Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
Rounded
Use class .btn-rounded for button round.
Sizes
Add .btn-lg or .btn-sm for additional sizes.
Width
Add .w-xs, .w-sm, .w-md and .w-lg class for additional buttons width.
Tags
The .btn
classes are designed to be used with the <button> element.
However, you can also use these classes on <a> or <input> elements (though
some browsers may apply a slightly different rendering).
Badges
Basic
Add any of the below mentioned modifier classes to change the appearance of a badge.
Pill
Use the .rounded-pill modifier class to make badges more rounded.
Lighten
Use .bg-soft-* class for a badge lighten.
Soft Pill
Use .bg-soft-* class for a pill badge.
Badges in Buttons
Badges can be used as part of links or buttons to provide a counter.
Badges Position Examples
Example of Badges Position
Dropdowns
Basic
Any single .btn can be turned into a dropdown
toggle with some markup changes. Here’s how you can put them to work
with either <button>
elements:
Variant
The best part is you can do this with any button variant, too:
Split Button
The best part is you can do this with any button variant, too:
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Dark Dropdowns
Opt into darker dropdowns to match a dark navbar or custom style by adding .dropdown-menu-dark onto an existing .dropdown-menu. No changes are required to the dropdown items.
Menu Alignment
Add .dropdown-menu-end
to a .dropdown-menu to right
align the dropdown menu.
Menu Alignment Option
Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.
Auto Close Behavior
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.
Menu Content
Example of dropdown menu Headers, Text, Forms content
Dropup Variation
Trigger dropdown menus above elements
by adding .dropup to the parent
element.
Dropright Variation
Trigger dropdown menus at the right of the elements by adding .dropend to the parent element.
Dropleft Variation
Trigger dropdown menus at the left of the elements by adding .dropend to the parent element.
Images
Rounded & Circle
Use classes
.rounded and .rounded-circle.
Thumbnails
In addition to our border-radius utilities, you can use
.img-thumbnail to give an image a
rounded 1px border appearance.
Sizes
.avatar-sm
.avatar-md
.avatar-lg
.avatar-sm
.avatar-md
.avatar-lg
Media Object
The images or other media can be aligned top, middle, or bottom. The default is top aligned.
Top-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Center-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Bottom-aligned media
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Button
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
Card title
This is a wider card with as a to additional content.
Last updated 3 mins ago
Card title
This is a wider card with as a to additional content.
Last updated 3 mins ago
Card background Color
Primary Card
If several languages coalesce, the grammar of the resulting individual
Success Card
If several languages coalesce, the grammar of the resulting individual
Info Card
If several languages coalesce, the grammar of the resulting individual
Card Border Color
Warning outline Card
card title
If several languages coalesce, the grammar of the resulting individual
Danger outline Card
card title
If several languages coalesce, the grammar of the resulting individual
Success Card
card title
If several languages coalesce, the grammar of the resulting individual
Collapse
Basic Collapse
You can use a link with the href attribute, or a button with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
Basic Horizontal Collapse
The collapse plugin also supports horizontal collapsing. Add the .collapse-horizontal modifier class to transition the width instead of height and set a width on the immediate child element.
Multiple Targets Collapse
A <button> or <a> can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute.
Tabs & Accordions
Basic Tabs
Example of Default Nav Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh iphone. Seitan aliquip butcher voluptate nisi qui.
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, aesthetic magna delectus.
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy mi whatever gluten yr.
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia farm-to-table VHS.
Basic Nav Pills
Example of Default Nav Pills
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, vinyl cillum PBR. Homo nostrud organic labore
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy Leggings gentrify squid 8-bit cred pitchfork
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table.
Custom Nav Tabs
Example of Custom Nav Tabs
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis butcher
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork
Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby.
Vertical Nav Tabs
Use flex-column class to create Vertical nav tabs.
Basic Accordions
Extend the default collapse behavior to create an accordion.
Accordion Flush
Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
.accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content..accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.Offcanvas
Demo
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.
Offcanvas
Placement
Offcanvas Diffrent Placement Example: Left, Right & Bottom
Offcanvas top
Offcanvas right
Offcanvas bottom
Backdrop
Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.
Colored with scrolling
Try scrolling the rest of the page to see this option in action.
Offcanvas with backdrop
.....
Backdroped with scrolling
Try scrolling the rest of the page to see this option in action.
Modals
Basic
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Optional Sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.
Toggle Between Modals
Toggle between multiple modals with some clever placement of the data-bs-target and data-bs-toggle attributes.
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Scrollable
You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.
Static Backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Pagination
Basic
Pagination links indicate a series of related content exists across multiple pages.
Custom
Add .pagination-rounded with .pagination class for rounded pagination.
Sizing
Add .pagination-lg or .pagination-sm for pagination additional
sizes.
Placeholder
Basic
Use loading placeholders for your components or pages to indicate something may still be loading
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereWidth
You can change the width through grid column classes, width utilities,
or
inline styles.
Sizing
The size of .placeholders are based on the typographic style of the
parent
element. Customize them with sizing modifiers: .placeholder-lg, .placeholder-sm,
or
.placeholder-xs.
Color
By default, the placeholder uses currentColor. This can be overriden with a custom color or utility class.
Placeholder Glow Animation
Animate placehodlers with .placeholder-glow to better convey the perception of something being actively loaded.
Placeholder Wave Animation
Animate placehodlers with .placeholder-wave to better convey the perception of something being actively loaded.
Progress
Basic
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
Heights
We only set a height value on the .progress-bar, so if you change
that value the outer .progress
will automatically resize accordingly.
Striped & Animated
Add .progress-bar-striped
to any .progress-bar to apply a
stripe via CSS gradient over the progress bar’s background color.
Tooltips & Popovers
Tooltips
Hover over the links below to see tooltips.
Popovers
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Spinners
Border
Use the border spinners for a lightweight loading indicator.
Color Variation
Add text-* color for a Spinner color variation.
Growing
Switch to the grow spinner.it does repeatedly grow Continue!
Color Variation
Add text-* color for a Spinner color variation.
Grid
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||||
| Max container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 24px (12px on each side of a column) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Offsets | Yes | |||||
| Column ordering | Yes | |||||
Video
Responsive Embed Video 16:9
Aspect ratios can be customized with modifier classes.
Responsive Embed Video 21:9
Aspect ratios can be customized with modifier classes.
Responsive Embed Video 4:3
Aspect ratios can be customized with modifier classes.
Responsive Embed Video 1:1
Aspect ratios can be customized with modifier classes.
Utilities
Borders
Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.
Border Width
.border.border-1
.border.border-2
.border.border-3
.border.border-4
.border.border-5
Border color
.border-primary
.border-secondary
.border-success
.border-info
.border-warning
.border-danger
.border-dark
.border-light
Additive
.border
.border-top
.border-end
.border-bottom
.border-start
Subtractive
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
Border Opacity
.border-opacity-10
.border-opacity-25
.border-opacity-50
.border-opacity-75
.border
Borders Radius
Use below-mentioned class to an element to easily round its corners.
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
Size
Use below-mentioned class to an element to easily round its corners.
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5
Box Shadow
While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).
.shadow-none No shadow.shadow-sm Small shadow.shadow Regular shadow.shadow-lg Larger shadowText selection
Change the way in which the content is selected when the user interacts with it.
This paragraph will be entirely selected when clicked by the user.
This paragraph has default select behavior.
This paragraph will not be selectable when clicked by the user.
Width
Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.
Height
Width and height utilities are generated from the utility API in _utilities.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.