Bootstrap 4 Kitchen Sink

This is heading h1

This is heading h2

This is heading h3

This is heading h4

This is heading h5

This is heading h6

Display Styles

This is display-1

This is display-2

This is display-3

This is display-4

Heading Classes

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Bootstrap heading class .h1

h2. Bootstrap heading class .h2

h3. Bootstrap heading class .h3

h4. Bootstrap heading class .h4

h5. Bootstrap heading class .h5

h6. Bootstrap heading class .h6

Customized Headings

h3 Heading With faded secondary text that uses text-muted

Inline Text Elements

You can use the mark tag to highlighttext.

~~Use the del tag to show a text as deleted.~~

This line of text will render as underlined. It uses the u tag.

Use the small tag for fine or small print.

Use the strong tag for bold text.

Use the em tag for italicized text.

Text alignment

This paragraph uses the text-justify class. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi.Cras mattis iudicium purus sit amet fermentum.

Use text-left for Left aligned text on all viewport sizes.

Use text-center for Center aligned text on all viewport sizes.

Use text-right for Right aligned text on all viewport sizes.

Use text-sm-right for right aligned text on viewports sized SM. (small) or wider.

Use text-md-right for right aligned text on viewports sized MD (medium) or wider.

Use text-lg-right for right aligned text on viewports sized LG (large) or wider.

Use text-xl-left for Left aligned text on viewports sized XL (extra-large) or wider.

Text transform

Transform text in components with text capitalization classes.

Use text-lowercase for Lowercased text.

Use text-uppercase for Uppercased text.

Use text-capitalize to capitalize the first letter in each word.

Containers

This paragraph is not inside a container. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque molestiae incidunt obcaecati placeat, beatae iure dolores vero earum accusamus ipsum soluta magni ut quasi cumque debitis, ducimus voluptatem architecto est!

This paragraph is inside a container. It resizes based on the responsive breakpoints. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio omnis minima vitae. Accusamus reprehenderit aspernatur nihil tempora atque voluptas magni, consequatur nostrum odit iste eaque mollitia esse cumque tenetur ad.

This paragraph is inside a container-fluid. Use .container-fluid for a full width container, spanning the entire width of the viewport. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi odit cum assumenda possimus, non, doloribus. Nam odio ut totam repellat, facilis sequi repudiandae ea provident debitis explicabo quibusdam veniam molestias!

Min Width Media Queries

-xs Extra small devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap

-sm Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

-md Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

-lg Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

-xl Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Max Width Media Queries

-xs Extra small devices (portrait phones, less than 576px) @media (max-width: 575px) { ... }

-sm Small devices (landscape phones, less than 768px) @media (max-width: 767px) { ... }

-md Medium devices (tablets, less than 992px) @media (max-width: 991px) { ... }

-lg Large devices (desktops, less than 1200px) @media (max-width: 1199px) { ... }

-xl Extra large devices (large desktops) No media query since the extra-large breakpoint has no upper bound on its width

Grid System

Auto-layout columns

Column 1 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.

Column 2 of 2: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.

Column 1 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.

Column 2 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.

Column 3 of 3: The column class col applies to every device and viewport, from xs to xl and every column will be the same width.

Variable width content

Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.

Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column. This column class is col-6

Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.

Setting one column width

Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just col.

Column 3 of 3: This column class is just col. Note that the other columns will resize no matter the width of the center column.

Variable width columns

Column 1 of 3

This column is using "col col-xl-2" Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.

Column 2 of 3 is Using "col-12 col-md-auto"

Column3 of 3 is using "col col-xl-2"

This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.

Column 1 of 3

This column is using "col" only. Fugiat qui nostrum beatae, quod officiis animi nulla incidunt magni, delectus repellendus tempora saepe consectetur illum ullam facilis voluptates impedit quisquam nesciunt!

Column 2 of 3. This column is using "col-12 col-md-auto"

Column 3 of 3. This column is using "col col-xl-2"

Equal-width multi-row

This column uses just "col"

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.

This column uses just "col"

This column uses "w-100"

This column uses just "col"

All Breakpoints

Column 1 of 4. For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.

Column 2 of 4.

Column 3 of 4

Column 4 of 4: Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

Column 1 of 2. This column uses "col-8"

Column 2 of 2. This column uses "col-4"

Stacked to horizontal

This column uses "col-md-8". Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

This column uses "col-md-4". These columns will always stack when viewed on small devices.

This column uses "col-sm". These columns will always stack when viewed on small devices.

Mix and Match Columns

This column uses "col col-lg-8". Use a combination of different classes for each tier as needed.

This column uses "col-6 col-lg-4". Stack the columns on mobile by making one full-width and the other half-width

This column uses "col-6 col-lg-4". Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop

This column uses "col-6 col-lg-4"

This column uses "col-6. Columns are always 50% wide, on mobile and desktop.

Column Alignment

Vertical alignment

One of three columns.

Two of three columns. This row uses"row align-items-start" Use flexbox alignment utilities to vertically and horizontally align columns.

Three of three columns. Notice how the text is aligned to the top of the columns.

One of three columns. This row uses "row align-items-center"

One of three columns

One of three columns. Notice how the text is aligned to the center of the columns

One of three columns. This row uses "row align-items-end"

One of three columns

One of three columns. Notice how the text is aligned to the bottom of the columns.

One of three columns

Horizontal Alignment

One of two columns

No Gutters

The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns. This column uses "col-12 col-md-8".

Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more.This column uses "col-12 col-md-4"

Column Wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. This column uses "col-9"

Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. This column uses "col-4"

Subsequent columns continue along the new line. This column uses "col-6"

Column Resets How to use clearfix to fix uneven columns

With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes. This column uses "col-6 col-md-3"

Added the extra clearfix for only the required viewport. To do this, we created an empty div with the class of "clearfix d-sm-none-up".

This column uses "col-6 col-md-3"

Column Offsets

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. This column uses "col-md-5 col-lg-6"

Resize your screen to see this in action. This column uses "col-md-5 offset-sm-2 col-lg-6 offset-md-0"

This column uses "col col-md-6 col-lg-5 col-xl-6"

This column uses "col-md-6 col-lg-5 offset-md-2 col-xl-6 offset-lg-0"

This column uses "col-lg-4"

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-lg-4 over four columns. This column uses "col-lg-4 offset-md-4"

This column uses "col-lg-3 offset-md-3"

This column uses "col-lg-3 offset-md-3" Resize your screen to see it in action.

This column uses "col-lg-6 offset-md-3"

Reordering

First, but unordered. Use flexbox utilities for controlling the visual order of your content. This column uses "col flex-unordered". The background-color is lightskyblue.

Second, but last. This column uses "col flex-last". The background-color is darkcyan.

Third, but first. This column uses "col flex-first". The background-color is lightsteelblue.

Nesting

Level 1: This column uses "col-md-9". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.

Level 2: This is part of a nested row. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns) This column uses "col-8 col-md-6"

Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6"

This is part of level 1.

More Nesting

Level 1: This column uses "col-md-12". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. The background color is "bg-danger"

Level 2: This is also part of a nested row. Notice that it is inheriting the background color from level 1. This is the default behavior unless you specify a background-color. This column uses "col-4 col-md-6" and the "border:thin solid grey;" is specified as an inline style.

Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6" the background-color is using "bg-light".

This is still part of level 1.

Images

Responsive Images (img-fluid)

Responsive images in Bootstrap are made responsive with img-fluid. The attributes max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

This 200x200px image has "img-fluid" class applied. This image will scale with the parent element, col-md-3.

This 400x300px image has "img-fluid" class applied. This image will scale with the parent element, col-md-4.

This 800x400px image has "img-fluid" class applied. This image will scale with the parent element, col-md-2.

Image Thumbnails

200x200px image has "img-fluid" class and the parent element is col-md-2.

200x200px image has "img-fluid" class and the parent element is col-md-4. In addition to the border-radius utilities, you can use img-thumbnail to give an image a rounded 1px border appearance.

This 400x400px image has "img-fluid" class and the parent element is col-md-4.

Aligning Images

Floats

Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.

This image has "img-fluid rounded float-left" and it also has the class "mr-2" to add some space to the right of the image.

This image has "rounded float-right". Resize your screen and notice how the image is not responsive and jumps out of the containing element. To make it responsive, you will also need to add the class "img-fluid".

Centering Images

This 300x300px image is centered inside the parent element col-md-6. The classes "img-fluid rounded mx-auto d-block"

This 300x300px image is centered inside the parent element col-md-6 using " text-center" on the containing div. The classes " img-fluid rounded" has been applied.

Image Shapes

This 300x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle" have been applied.

This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle" has been applied. Since the image is rectangle, it appears oval when rounded-circle is applied.

Image Shapes with Borders

This 300x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle mx-auto d-block" have been applied.

This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "img-fluid rounded-circle mx-auto d-block" has been applied. Since the image is rectangle, it appears oval when rounded-circle is applied.

Figures

A generic square placeholder image with rounded corners in a figure. — A caption for the above image.

Tables

Bootstrap Default Tables

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Inverse

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Table Head Options

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Rows

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered Tables

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Mark	Otto	@TwBootstrap
3	Jacob	Thornton	@fat
4	Larry the Bird		@twitter

Hoverable Rows

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small Tables

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Breadcrumbs

Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through ::before and content.

Breadcrumbs Using List Markup

Breadcrumbs Without List Markup

Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replace our old panels, wells, and thumbnails from Bootstrap 3. Similar functionality to those components is available as modifier classes for cards.

Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Using the grid, wrap cards in columns and rows as needed. The following cards are wrapped in rows and columns:

Basic card with mixed content and a fixed width

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 with Image

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

Titles, text and links

Card title

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 link

Cards with List Groups

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

Kitchen Sink Card

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 link Another link

Cards with Headers and Footers

Featured

Special title treatment

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

Go somewhere

2 days ago

Cards Using the Sizing Utilities

Card with w-75

This card is using the sizing utility w-75 which means its 75%. Resize your screen to see it in action.

Button

Card with w-50

This card is using the sizing utility w-50 which means its 50%

Button

Cards styled with inline css

Special title treatment

This card has inline css style="width: 20rem;"

Go somewhere

Cards using Text-Alignment Elements

Special title treatment

This card is using the default alignment

Go somewhere

Special title treatment

This card is using "text-center" alignment.

Go somewhere

Special title treatment

This card is using "text-right" alignment.

Go somewhere

Cards with Navigation

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

Go somewhere

Cards with Image Caps

If your images get distorted, wrap your cards in grids.

Card title

This card is wrapped within a row and column. This content is a little bit longer.

This is small text-muted.

Card title

This card is wrapped within a row and column. This content is a little bit longer.

This is small text-muted.

Image Overlays

Card title

This card is styled with "card card-inverse". This card is wrapped in a column. The image is styled with card-img img-fluid.

Card title

This card is styled with "card card-inverse". This card is wrapped in a column. The image is styled with card-img img-fluid.

Outline Cards

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

Someone famous in Source Title

Card Groups

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive. Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

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 Groups with Footers

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.

This is a footer

Card title

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

This is a footer

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.

This is a footer

Card Decks

Card decks are a set of equal width and height cards that aren't attached to one another.

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.

This is a footer

Card title

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

This is a footer

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.

This is a footer

Card Decks with Footers

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.

This is a footer

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. See what happens with more text.

This is a footer

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.

This is a footer

Accordions

Accordion One

Media Object Nesting

Media objects can be infinitely nested, though we suggest you stop at some point. Place nested .media within the .media-body of a parent media object.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Accordion Two

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Accordion Three

No Bullet List

Item One
Item Two
Item Three

Ordered List

list item one
list item two
list item three

Unordered List

list item one
list item two
list item three

Spacing

Margin-Tops

img-thumbnail mt-0

img-thumbnail, mt-1

img-thumbnail mt-2

img-thumbnail mt-3

img-thumbnail mt-4

img-thumbnail mt-5

Margin-Bottoms

img-thumbnail mb-0

img-thumbnail mb-1

img-thumbnail mb-2

img-thumbnail mb-3

img-thumbnail mb-4

img-thumbnail mb-5

Margin-Left

img-thumbnail ml-0

img-thumbnail ml-1

img-thumbnail ml-2

img-thumbnail ml-3

img-thumbnail ml-4

img-thumbnail ml-5

Padding-Right

img-thumbnail pr-0

img-thumbnail pr-1

img-thumbnail pr-2

img-thumbnail pr-3

img-thumbnail pr-4

img-thumbnail pr-5

Padding all around

img-thumbnail p-0

img-thumbnail p-1

img-thumbnail p-2

img-thumbnail p-3

img-thumbnail p-4

img-thumbnail p-5

Combined Spacing

img-thumbnail px-2
= Padding Left/Right 2rem

img-thumbnail py-4
= Padding Top/Bottom 4rem

img-thumbnail my-3
= Margin Top/Bottom 3rem

img-thumbnail my-2 px-2
= Margin Top/Bottom 2rem; Padding Left/Right 2rem

Modals

Vertically Centered Modal

Vertically centered Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Modal with Tooltip and Popover

Tooltip and Popover Within a Modal

Modal with Grid

Modal with Grid Inside

Abbreviations and Blockquotes

Abbreviations

attr

How to use

HTML