Matt

Header Two


Header Three

Has this nifty blue underline feature.

Header Four

. . . is basic blue.

Header Five

. . . is basic black.


Header Six is Centered, By Default

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

In these examples, we use a simple — <style type=”text/css”> — at the top of the html file to see the col shapes in green.

Five grid tiers

There are five tiers to the Bootstrap grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden, but we use mostly — col-sm-[x] — where [x] is a number between 3 and 9.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa hic adipisci quia explicabo iure? A velit quam sapiente dolorum placeat rerum, quibusdam doloremque dicta neque dignissimos voluptates eum enim pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur mollitia, reiciendis expedita, magni nam inventore consequuntur eveniet quisquam, provident assumenda soluta commodi quod quis magnam voluptatibus fuga necessitatibus deserunt at!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit nihil sequi rerum exercitationem harum quibusdam, dolorum, sapiente maxime deserunt suscipit enim impedit deleniti, repellendus maiores pariatur ad facere repudiandae libero.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique dolorem aspernatur dolore ex quae eos, eligendi odio totam molestias nostrum labore, explicabo sunt adipisci deserunt illum, ipsum quasi, ullam hic.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, tempore, officia. Suscipit recusandae consectetur itaque adipisci ullam. Incidunt quidem placeat, repellat. Quis iusto sed eligendi accusamus repellendus aperiam, impedit iure?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis totam sequi iste possimus sed tempore pariatur dignissimos voluptate itaque et explicabo omnis, tenetur, laudantium deserunt minima veritatis rerum quos cumque?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio unde excepturi odit quas, ut, in voluptatem delectus tenetur, molestias omnis maiores facilis ea non ab cumque, expedita error officiis. Quia.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quisquam veritatis eos illo fuga amet quaerat sed, nemo beatae praesentium, ullam iusto molestiae eligendi deserunt expedita officia culpa. Magni, maiores.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat maxime accusantium delectus, maiores cumque eveniet nesciunt, officia numquam natus eius soluta neque quia enim molestias magnam iusto totam facere optio.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, laboriosam, deleniti! Quasi porro reprehenderit eligendi sit, molestias obcaecati modi numquam laudantium, eum ex debitis est inventore illum magnam earum nobis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, praesentium rem, repudiandae vero enim minus fuga reiciendis corrupti atque excepturi perspiciatis error libero adipisci repellendus dolorum molestias quis. Ex, quas.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure voluptatum qui magni possimus debitis iste, consectetur dolorem cumque, at libero maiores! Nam quidem unde, corporis tempora aut, reiciendis iste doloribus?


Colors and Other Utils

Link Colors

Primary link
Secondary link
Success link
Danger link
Warning link
Info link
Light link
Dark link
Muted link
White link

Background Color

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Sizing

Width 25%
Width 50%
Width 75%
Width 100%
Width auto
Height 25%
Height 50%
Height 75%
Height 100%
Height auto

Flex Box Direction

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Flex Box Grow and Shrink

Flex item
Flex item
Third flex item

Flex Box Auto Margins

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Flex Box Align Self

Use align-self utilities on flexbox items to individually change their alignment on the cross axis

Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item

Float

Float left on all viewport sizes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Float right on all viewport sizes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Don’t float on all viewport sizes

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Float left on viewports sized SM (small) or wider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Float left on viewports sized MD (medium) or wider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Float left on viewports sized LG (large) or wider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!

Float left on viewports sized XL (extra-large) or wider

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint commodi praesentium libero, consequatur cum quisquam perferendis totam porro tenetur voluptatum, distinctio, optio exercitationem velit ea non illo error minima! Harum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis sint vero odio, natus ducimus in dignissimos incidunt doloremque rem? Accusamus est fugit commodi, eaque excepturi explicabo possimus quasi quo repellat!


Buttons

Solid Buttons

| | | | | | |
|


Outline Buttons

| | | | | | |


Buttons: Other Sizes

| | |

Buttons at Block Level

|

Badges

Badges on Headings

Heading with badge-primaryPrimary
Heading with badge-secondary Secondary
Heading with badge-success Success
Heading with badge-danger Danger
Heading with badge-warning Warning
Heading with badge-info Info
Heading with badge-warning Light
Heading with badge-info Dark

Badges on Buttons


Badges as Pills

Primary | Secondary | Success | Danger | Warning | Info | Light | Dark


Badges as Links

Primary | Secondary | Success | Danger | Warning | Info | Light | Dark |


Button Groups

Button Toolbar







Button Toolbar


Button Nesting



Alerts


Cards

Starter 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


Card Quote

Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card Markup

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere


Card Text Alignment

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere


Cards and Navigation

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere


Cards with Image Caps

...

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...


Horizontal

...
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago


Card Background and Color

Header
Primary card title

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

Header
Secondary card title

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

Header
Success card title

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

Header
Danger card title

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

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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


Card Groups

...

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...

Card title

This card has supporting text below as a natural lead-in to additional content.

...

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.


Card decks

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

...

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

...

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago


Grid Cards

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

...

Card title

This is a short card.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

...

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.


Card Columns

...

Card title that wraps to a new line

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Someone famous in Source Title

...

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.


Someone famous in Source Title

Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Someone famous in Source Title

Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago


List Groups

Flush

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Horizontal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus

Contextual Classes

Custom List Goups


Javacript Behavior


Other Stuff

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mixed: mobile and desktop

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Mixed: mobile, tablet, and desktop

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Containers

Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint.

.container
.container-sm
.container-md
.container-lg
.container-xl
.container-fluid