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.

Primary Secondary Success Info Warning Danger Dark
Soft Badges

Use .bg-soft-* class for a pill badge.

Primary Success Info Warning Danger Dark
Soft Badges

Use .bg-soft-* class for a pill badge.

Primary Secondary Success Info Warning Danger Dark
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 image cap
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Card image cap
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 link
Card title
Support card subtitle
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link
Tabs
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.

Link with href
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
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.

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.

Get New Jobs Notification!

Subscribe & get all related jobs notification.

Select your color
Light/dark Layout