General UI
Badges
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Pill Badges
Use the .badge-pill modifier class to make badges more rounded.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Badges Lighten
Badges scale to match the size of the immediate parent element by using relative font sizing and em units.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Pill Badges Lighten
Use the .badge-pill modifier class to make badges more rounded.
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Pagination
Provide pagination links for your site or app with the multi-page pagination component.
Default Pagination
Simple pagination inspired by Rdio, great for apps and search results.
Rounded Pagination
Add .pagination-rounded for rounded pagination.
Sizing
Add
.pagination-lg
or
.pagination-sm
for additional sizes.
Alignment
Change the alignment of pagination components with flexbox utilities.
Breadcrumb
Indicate the current page’s location within a navigational hierarchy.
Dropdowns
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
Single button dropdowns
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:
Dropright variation
Trigger dropdown menus at the right of the elements by adding .dropright to the parent element.
Dropup variation
Trigger dropdown menus above elements
by adding .dropup to the parent
element.
Split button dropdowns
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
Sizing
Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
Dropleft variation
Trigger dropdown menus at the right of the elements by adding .dropleft to the parent element.
Menu alignment
Add .dropdown-menu-right
to a .dropdown-menu to right
align the dropdown menu.
Border Spinner
Use the border spinners for a lightweight loading indicator.
Alignment
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
Size
Add .spinner-border-sm and
.spinner-border.avatar-**
to make a smaller spinner that can quickly be used within other components.
Growing Spinner
If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow!
Placement
Use flexbox utilities, float utilities, or text alignment utilities to place spinners exactly where you need them in any situation.
Buttons spinner
Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
Popovers
Add small overlays of content, like those on the iPad, to any element for housing secondary information.
Tooltips
Four options are available: top, right, bottom, and left aligned.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn moreScrollspy
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
@fat
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
@mdo
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
one
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
two
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
three
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.
