Components
Font Family
A
Font Family
"Inter", sans-serif
Aa
Font Weight
400
Aa
Font Weight
500
Aa
Font Weight
600
Typography Heading
Headings
All HTML headings, <h1> through <h6>, are available.
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Display Heading
Display headings
Traditional heading elements are designed to work best in the meat of your page content.
Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
Button
Basic Buttons
Bootstrap includes six predefined button styles, each serving its own semantic purpose..
Soft Buttons
Use .bg-soft-* class for a badge lighten.
Outline Buttons
Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.
Rounded Buttons
Use the .rounded-pill modifier class to make badges more rounded.
Badges
Basic
Add any of the below mentioned modifier classes to change the appearance of a badge.
Soft Badges
Use .bg-soft-* class for a pill badge.
Soft Badges
Use .bg-soft-* class for a pill badge.
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:
Alerts
Basic
Alerts are available for any length of text, as well as an optional close button.
Dismissing Alerts
Alerts are available for any length of text, as well as an optional close button.
Images
Image Sizes
Use classes .avatar-*.
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkCard title
Support card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkTabs
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 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 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.
Offcanvas
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
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.
Pagination
Pagination links indicate a series of related content exists across multiple pages.
Progress
Basic
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
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
Tooltips
Hover over the links below to see tooltips.
Spinners
Border
Add text-* color for a Spinner color variation.
Growing
Switch to the grow spinner.it does repeatedly grow Continue!
Grid
|
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
container Max 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.
