Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. View details.
Default
Additional content
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Well done!
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
Badges
Documentation and examples for badges, our small count and labeling component. View details.
Default
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Button with badges
Breadcrumb
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. View details.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. View details.
Default
Outline buttons
Small buttons
Active state
Button group Basic
Button toolbar
Collapses
Toggle the visibility of content across your project with a few classes and our JavaScript plugins. View details.
Accordion
Collapsible Group Item #1
Collapsible Group Item #2
Collapsible Group Item #3
Link with href & data-target
Multiple targets
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. View details.
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
- Vestibulum at eros
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereSpecial title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhereForms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms. View details.
Forms Basic
Input Group
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin. View details.
Dropdown Default
Dropdown Left
Dropdown Right
List Group
List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. View details.
Default List Group
List Group With badges
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
- Cras justo odio 1
- Dapibus ac facilisis in 1
- Morbi leo risus 1
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
Modals
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. View details.
Modal Default
Modal Scrolling long content
Navs
Documentation and examples for how to use Bootstrap’s included navigation components. View details.
Some title should be here
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Donec rhoncus aliquet mi mattis consectetur. Curabitur viverra orci ac faucibus rutrum. Vivamus sit amet magna risus. Integer volutpat sapien at libero iaculis, et vulputate quam euismod. Nunc at neque lacinia nibh efficitur euismod. Integer molestie mauris vel dolor rhoncus posuere porta in diam. Praesent eget velit lorem. Sed suscipit orci dolor, ac tristique neque volutpat eu. Integer volutpat sapien at libero iaculis efficitur euismod.
This title is here
Donec rhoncus aliquet mi mattis consectetur. Curabitur viverra orci ac faucibus rutrum. Vivamus sit amet magna risus. Integer volutpat sapien at libero iaculis, et vulputate quam euismod. Nunc at neque lacinia nibh efficitur euismod. Integer molestie mauris vel dolor rhoncus posuere porta in diam. Praesent eget velit lorem. Sed suscipit orci dolor, ac tristique neque volutpat eu. Orci ac faucibus rutrum. Vivamus sit amet magna risus. Integer
Lorem ipsum dolor sit amet, consectetur adipisicing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Paginations
Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. View details.
Pagination Default
Tooltips
Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage. View details.
Tooltips Default
Progress
Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. View details.