Basic Components

Alert

Basic Alerts
Link Alerts
Dismissing
Additional Content

Badges

Basic Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Button Badges
Contextual Variations
Primary Secondary Success Danger Warning Info Light Dark
Pill Badges
Primary Secondary Success Danger Warning Info Light Dark

Button

Default
Outline
Square Button

use .btn-square in class .btn class to get square button

Disabled Button

use .disabled in class .btn class to get Disabled button

Rounded Button

use .btn-rounded in class .btn class to get Rounded button


use .btn-rounded in class .btn-outline-8 class to get Rounded Outline button

Glow Button

use .btn-glow in class .btn class to get Glow button

Shadow Button

use .shadow-{ 1 / 2 / 3 / 4 / 5 } in class .btn class to get Shadow button

Sizes [ Large ]

use .btn-lg in class .btn class to get Large button

Sizes [ Small ]

use .btn-sm in class .btn class to get Small button

Checkbox Button
Radio Buttons
Button With Icon
Outline Icon Buttons
Only Icon
Outline Icon
Icon Button Rounded
Icon Outline Button Rounded
Basic Button Group
Button Toolbar
Button Toolbar Size

use .btn-group-lg in class .btn-group class to get Large size button group

this is default size

use .btn-group-sm in class .btn-group class to get Small size button group

Nesting
Vertical Variation
Breadcrumb
Breadcrumb Icon
Pagination
Working With Icons

Disabled and Active States

Sizing

Alignment

Modal

Demo Modal

Scrolling Long Content

Vertically Centered

Tooltips Modal
Using the Grid

Optional Sizes

Varying Modal Content

Card

Body Content

This is some text within a card body.
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
Header and Footer

Featured
Special title treatment

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

Go somewhere
Left Align

Special title treatment

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

Go somewhere
Center Align

Special title treatment

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

Go somewhere
Right Align

Special title treatment

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

Go somewhere
Image Caps

Card image cap
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

Image Caps[ Bottom ]

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 image cap
Image Overlays

Card image
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 Styles

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 image cap
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 image cap
Card title

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

Card image cap
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 image cap
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 image cap
Card title

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

Card image cap
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 Columns

Card image cap
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 image cap
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

Card image

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

Collapse

Basic Collapse

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Multiple Targets

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordion Example

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.
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.
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.
Basic Carousel
Carousel Controls
Carousel Indicators
Carousel Crossfade
Carousel With Captions

Grid

Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

How it works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.

New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.

One of three columns
One of three columns
One of three columns
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col-sm">
                                                    One of three columns
                                                </div>
                                                <div class="col-sm">
                                                    One of three columns
                                                </div>
                                                <div class="col-sm">
                                                    One of three columns
                                                </div>
                                            </div>
                                        </div>
                                    
                                

The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent .container.

Breaking it down, here’s how it works:

  • Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
  • Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
  • Thanks to flexbox, grid columns without a specified width will automatically layout as equal width columns. For example, four instances of .col-sm will each automatically be 25% wide from the small breakpoint and up. See the auto-layout columns section for more examples.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
  • Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
  • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).
  • You can use predefined grid classes (like .col-4) or Sass mixins for more semantic markup.

Be aware of the limitations and bugs around flexbox, like the inability to use some HTML elements as flex containers.

Grid Options

While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes
Auto-layout Columns

Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like .col-sm-6.

Equal-width

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col">
                                                    1 of 2
                                                </div>
                                                <div class="col">
                                                    2 of 2
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    1 of 3
                                                </div>
                                                <div class="col">
                                                    2 of 3
                                                </div>
                                                <div class="col">
                                                    3 of 3
                                                </div>
                                            </div>
                                        </div>
                                    
                                

Equal-width columns can be broken into multiple lines, but there was a Safari flexbox bug that prevented this from working without an explicit flex-basis or border. There are workarounds for older browser versions, but they shouldn’t be necessary if you’re up-to-date.

Column
Column
Column
Column
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col">Column</div>
                                                <div class="col">Column</div>
                                                <div class="w-100"></div>
                                                <div class="col">Column</div>
                                                <div class="col">Column</div>
                                            </div>
                                        </div>
                                        </div>
                                    
                                
Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns 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.

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col">
                                                    1 of 3
                                                </div>
                                                <div class="col-6">
                                                    2 of 3 (wider)
                                                </div>
                                                <div class="col">
                                                    3 of 3
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    1 of 3
                                                </div>
                                                <div class="col-5">
                                                    2 of 3 (wider)
                                                </div>
                                                <div class="col">
                                                    3 of 3
                                                </div>
                                            </div>
                                        </div>

                                    
                                
Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
                                    
                                        <div class="container">
                                            <div class="row justify-content-md-center">
                                                <div class="col col-lg-2">
                                                    1 of 3
                                                </div>
                                                <div class="col-md-auto">
                                                    Variable width content
                                                </div>
                                                <div class="col col-lg-2">
                                                    3 of 3
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col">
                                                    1 of 3
                                                </div>
                                                <div class="col-md-auto">
                                                    Variable width content
                                                </div>
                                                <div class="col col-lg-2">
                                                    3 of 3
                                                </div>
                                            </div>
                                        </div>
                                    
                                
Equal-width multi-row

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.

col
col
col
col
                                    
                                        <div class="row">
                                            <div class="col">col</div>
                                            <div class="col">col</div>
                                            <div class="w-100"></div>
                                            <div class="col">col</div>
                                            <div class="col">col</div>
                                        </div>
                                    
                                
Responsive Classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

col
col
col
col
col-8
col-4
                                    
                                        <div class="row">
                                            <div class="col">col</div>
                                            <div class="col">col</div>
                                            <div class="col">col</div>
                                            <div class="col">col</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-8">col-8</div>
                                            <div class="col-4">col-4</div>
                                        </div>
                                    
                                
Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (sm).

col-sm-8
col-sm-4
col-sm
col-sm
col-sm
                                    
                                        <div class="row">
                                            <div class="col-sm-8">col-sm-8</div>
                                            <div class="col-sm-4">col-sm-4</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm">col-sm</div>
                                            <div class="col-sm">col-sm</div>
                                            <div class="col-sm">col-sm</div>
                                        </div>
                                    
                                
Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-12 .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
                                    
                                        <!-- Stack the columns on mobile by making one full-width and the other half-width -->
                                        <div class="row">
                                            <div class="col-12 col-md-8">.col-12 .col-md-8</div>
                                            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                        </div>

                                        <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
                                        <div class="row">
                                            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                        </div>

                                        <!-- Columns are always 50% wide, on mobile and desktop -->
                                        <div class="row">
                                            <div class="col-6">.col-6</div>
                                            <div class="col-6">.col-6</div>
                                        </div>
                                    
                                
Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
                                    
                                        <div class="container">
                                            <div class="row align-items-start">
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                            </div>
                                            <div class="row align-items-center">
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                            </div>
                                            <div class="row align-items-end">
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                                <div class="col">
                                                    One of three columns
                                                </div>
                                            </div>
                                        </div>
                                    
                                
One of three columns
One of three columns
One of three columns
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col align-self-start">
                                                    One of three columns
                                                </div>
                                                <div class="col align-self-center">
                                                    One of three columns
                                                </div>
                                                <div class="col align-self-end">
                                                    One of three columns
                                                </div>
                                            </div>
                                        </div>
                                    
                                
Horizontal alignment

One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
                                    
                                        <div class="container">
                                            <div class="row justify-content-start">
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                            </div>
                                            <div class="row justify-content-end">
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                            </div>
                                            <div class="row justify-content-around">
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                            </div>
                                            <div class="row justify-content-between">
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                                <div class="col-4">
                                                    One of two columns
                                                </div>
                                            </div>
                                        </div>
                                    
                                
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.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

                                
                                    .no-gutters {
                                        margin-right: 0;
                                        margin-left: 0;

                                        > .col,
                                        > [class*="col-"] {
                                            padding-right: 0;
                                            padding-left: 0;
                                        }
                                    }
                                
                            

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
                                    
                                        <div class="row no-gutters">
                                            <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
                                            <div class="col-6 col-md-4">.col-6 .col-md-4</div>
                                        </div>
                                    
                                
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.

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.
                                    
                                        <div class="row">
                                            <div class="col-9">.col-9</div>
                                            <div class="col-4">.col-4
                                                <br />Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
                                            </div>
                                            <div class="col-6">.col-6
                                                <br />Subsequent columns continue along the new line.
                                            </div>
                                        </div>
                                    
                                
Column breaks

Breaking columns to a new line in flexbox requires a small hack: add an element with width: 100% wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple .rows, but not every implementation method can account for this.

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
                                    
                                        <div class="row">
                                            <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                            <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

                                            <!-- Force next columns to break to new line -->
                                            <div class="w-100"></div>

                                            <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                            <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
                                        </div>
                                    
                                

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
                                    
                                        <div class="row">
                                            <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                            <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

                                            <!-- Force next columns to break to new line at md breakpoint and up -->
                                            <div class="w-100 d-none d-md-block"></div>

                                            <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                            <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
                                        </div>
                                    
                                
Reordering
Order classes

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g., .order-1.order-md-2). Includes support for 1 through 12 across all five grid tiers.

First, but unordered
Second, but last
Third, but first
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col">
                                                    First, but unordered
                                                </div>
                                                <div class="col order-12">
                                                    Second, but last
                                                </div>
                                                <div class="col order-1">
                                                    Third, but first
                                                </div>
                                            </div>
                                        </div>
                                    
                                

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

First, but last
Second, but unordered
Third, but first
                                    
                                        <div class="container">
                                            <div class="row">
                                                <div class="col order-last">
                                                    First, but last
                                                </div>
                                                <div class="col">
                                                    Second, but unordered
                                                </div>
                                                <div class="col order-first">
                                                    Third, but first
                                                </div>
                                            </div>
                                        </div>
                                    
                                
Offsetting Columns

You can offset grid columns in two ways: our responsive .offset- grid classes and our margin utilities. Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

Offset classes

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-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
                                    
                                        <div class="row">
                                            <div class="col-md-4">.col-md-4</div>
                                            <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                                            <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
                                        </div>
                                    
                                

In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
                                    
                                        <div class="row">
                                            <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
                                            <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
                                            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
                                        </div>
                                    
                                
Margin utilities

With the move to flexbox in v4, you can use margin utilities like .mr-auto to force sibling columns away from one another.

.col-md-4
.col-md-4 .ml-auto
.col-md-3 .ml-md-auto
.col-md-3 .ml-md-auto
.col-auto .mr-auto
.col-auto
                                    
                                        <div class="row">
                                            <div class="col-md-4">.col-md-4</div>
                                            <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
                                            <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-auto mr-auto">.col-auto .mr-auto</div>
                                            <div class="col-auto">.col-auto</div>
                                        </div>
                                    
                                
Nesting

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. 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).

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
                                    
                                        <div class="row">
                                            <div class="col-sm-9">
                                                Level 1: .col-sm-9
                                                <div class="row">
                                                    <div class="col-8 col-sm-6">
                                                        Level 2: .col-8 .col-sm-6
                                                    </div>
                                                    <div class="col-4 col-sm-6">
                                                        Level 2: .col-4 .col-sm-6
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    
                                

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

                                
                                    $grid-columns:      12;
                                    $grid-gutter-width: 30px;

                                    $grid-breakpoints: (
                                        // Extra small screen / phone
                                        xs: 0,
                                        // Small screen / phone
                                        sm: 576px,
                                        // Medium screen / tablet
                                        md: 768px,
                                        // Large screen / desktop
                                        lg: 992px,
                                        // Extra large screen / wide desktop
                                        xl: 1200px
                                    );

                                    $container-max-widths: (
                                        sm: 540px,
                                        md: 720px,
                                        lg: 960px,
                                        xl: 1140px
                                    );
                                
                            
Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

                                
                                    // Creates a wrapper for a series of columns
                                    @include make-row();

                                    // Make the element grid-ready (applying everything but the width)
                                    @include make-col-ready();
                                    @include make-col($size, $columns: $grid-columns);

                                    // Get fancy by offsetting, or changing the sort order
                                    @include make-col-offset($size, $columns: $grid-columns);
                                
                            
Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

                                
                                    .example-container {
                                        width: 800px;
                                        @include make-container();
                                    }

                                    .example-row {
                                        @include make-row();
                                    }

                                    .example-content-main {
                                        @include make-col-ready();

                                        @include media-breakpoint-up(sm) {
                                            @include make-col(6);
                                        }
                                        @include media-breakpoint-up(lg) {
                                            @include make-col(8);
                                        }
                                    }

                                    .example-content-secondary {
                                        @include make-col-ready();
                                        @include media-breakpoint-up(sm) {
                                            @include make-col(6);
                                        }
                                        @include media-breakpoint-up(lg) {
                                            @include make-col(4);
                                        }
                                    }
                                
                            
Main content
Secondary content
                                    
                                        <div class="example-container">
                                            <div class="example-row">
                                                <div class="example-content-main">Main content</div>
                                                <div class="example-content-secondary">Secondary content</div>
                                            </div>
                                        </div>
                                    
                                
Customizing the Grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width allows breakpoint-specific widths that are divided evenly across padding-left and padding-right for the column gutters.

                                
                                    $grid-columns: 12 !default;
                                    $grid-gutter-width: 30px !default;
                                
                            
Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

                                
                                    $grid-breakpoints: (
                                        xs: 0,
                                        sm: 480px,
                                        md: 768px,
                                        lg: 1024px
                                    );

                                    $container-max-widths: (
                                        sm: 420px,
                                        md: 720px,
                                        lg: 960px
                                    );
                                
                            

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).

Progress

Progress
Labels
25%
Height
Backgrounds
Multiple Bars
Striped
Animated Stripes

Navs & Tabs

Basic 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 mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, 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, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

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 salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Basic Pills

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

Vertical Pills

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit excepteur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

Typography

Headings

This is a Heading 1

Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.

This is a Heading 2

In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.

This is a Heading 3

Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.

This is a Heading 4

Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.

This is a Heading 5

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus elementum. Suspendisse molestie ullamcorper ornare.

This is a Heading 6

Donec ultricies, lacus id tempor condimentum, orci leo faucibus sem, a molestie libero lectus ac justo. ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.

Inline Text Elements

Your title goes here

You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as an addition to the document.
rendered as bold text
rendered as italicized text
Contextual Text Colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Unordered
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Ordered
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Unstyled
  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Blockquotes

Your awesome text goes here.

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

Someone famous in Source Title

Add .text-right for a blockquote with right-aligned content.

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

Someone famous in Source Title
Horizontal Description
Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Tooltip & Popover

Tooltip
Popover

Spinner

Border spinner
Loading...
Border spinner [ Colors ]
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Growing spinner
Loading...
Growing spinner [ Colors ]
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Placement
Start
Loading...

Center
Loading...

End
Loading...
Size
Small
Loading...
Loading...

Custom
Loading...
Loading...
Buttons

Toasts

Toasts
Translucent
Stacking
data-delay
Placement

Border

Additive
Subtractive
Border color
Border-radius

Extra

Shadows
No shadow
Small shadow
Regular shadow
Larger shadow
Embeds
Aspect Ratios
Aspect Ratios 21by9

Aspect Ratios 16by9

Aspect Ratios 4by3

Aspect Ratios 1by1

×