Container

Hello, world!

Row

One of three columns

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

Column

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

col

col-8

col-4

col-sm-8

col-sm-4

col-sm

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

One of three columns

One of two columns

.col-6 .col-sm-3

First, but unordered

Second, but last

Third, but first

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

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

Top-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Center-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Bottom-aligned media

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Media object

List-based media object
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.
List-based media object
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.
List-based media object
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.

Display property

d-inline

d-block d-block

Clearfix

Close icon

Color

Text

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-muted

.text-white

Links

Background color

.bg-primary

.bg-secondary

.bg-success

.bg-danger

.bg-warning

.bg-info

.bg-light

.bg-dark

.bg-white

Embeds

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Sizing

Width 25%

Width 50%

Width 75%

Width 100%

Height 25%

Height 50%

Height 75%

Height 100%

Max-height 100%

Text

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Left aligned text on viewports sized SM (small) or wider.

Left aligned text on viewports sized MD (medium) or wider.

Left aligned text on viewports sized LG (large) or wider.

Left aligned text on viewports sized XL (extra-large) or wider.

Text transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Bold text.

Normal weight text.

Light weight text.

Italic text.

Inline text elements

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 no longer accurate.~~

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Blockquotes

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

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

Someone famous in Source Title

Lists

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

Lorem ipsum
Phasellus iaculis
Nulla volutpat

Code

For example, <section> should be wrapped as inline.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

y = mx + b

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Vertical alignment

baseline top middle bottom text-top text-bottom

baseline

top

middle

bottom

text-top

text-bottom

Visibility

XXX

Forms

Example legend

Example input

Example select

Check this checkbox

Option one is this and that Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example output 100

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio

3 (disabled)

Password Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.

Check this custom checkbox

Toggle this custom radio

Or toggle this other custom radio

Toggle this custom radio

Or toggle this other custom radio

Choose file

Seleccionar Archivo

Input group

@example.com

Your vanity URL

https://example.com/users/

.00

With textarea

Small

Default

Large

First and last name

$ 0.00

Options

Upload

Choose file

Upload

Choose file

Images

Responsive images

Image thumbnails

Tables

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

Table dark

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

Table head options

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

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

Striped rows

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

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

Bordered table

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

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

Hoverable rows

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

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

Small table

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

... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...

... ... ... ... ... ... ... ... ... ...

Alerts

This is a primary alert—check it out!

This is a secondary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is a info alert—check it out!

This is a light alert—check it out!

This is a dark alert—check it out!

Link color

This is a primary alert with an example link. Give it a click if you like.

This is a secondary alert with an example link. Give it a click if you like.

This is a success alert with an example link. Give it a click if you like.

This is a danger alert with an example link. Give it a click if you like.

This is a warning alert with an example link. Give it a click if you like.

This is a info alert with an example link. Give it a click if you like.

This is a light alert with an example link. Give it a click if you like.

This is a dark alert with an example link. Give it a click if you like.

Additional content

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Dismissing

Holy guacamole! You should check in on some of those fields below.

Badges

Example heading New

Primary Secondary Success Danger Warning Info Light Dark

Links

Primary Secondary Success Danger Warning Info Light Dark

Breadcrumb

Buttons

Link

Active Radio Radio

Cards

Card title

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

Go somewhere

This is some text within a card body.

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

Featured

Special title treatment

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

Go somewhere

Quote

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

Someone famous in Source Title

Featured

Special title treatment

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

Go somewhere

2 days ago

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 title

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

Button

Card title

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

Button

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

Navigation

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 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.

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.

Header

Success card title

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

Footer

Carousel

With controls

With indicators

With captions

Title

some text description

Collapse

Link with href

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.

Toggle first element

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.

Dropdowns

Jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

List groups

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

Cras justo odio
Dapibus ac facilisis in
Vestibulum at eros

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

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

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

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

Dapibus ac facilisis in
This is a primary list group item
This is a secondary list group item
This is a success list group item
This is a danger list group item
This is a warning list group item
This is a info list group item
This is a light list group item
This is a dark list group item

Dapibus ac facilisis in This is a primary list group item This is a secondary list group item This is a success list group item This is a danger list group item This is a warning list group item This is a info list group item This is a light list group item This is a dark list group item

Cras justo odio 14
Dapibus ac facilisis in 2
Morbi leo risus 1

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

List group item heading

3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.

Home Profile Messages Settings

...

Modal

Navs

111

222

333

111

222

333

Home Profile Messages Settings

...

Navbar

Collapsed content

Toggleable via the navbar brand.

Pagination

Progress

25%

Container

Hello, world!

Hello, world!

Row

Media object

Media heading

Media heading

Media heading

Top-aligned media

Center-aligned media

Bottom-aligned media

Media object

List-based media object

List-based media object

List-based media object

Display property

Clearfix

Close icon

Color

Text

Links

Background color

Embeds

Sizing

Text

Text transform

Inline text elements

Blockquotes

Lists

Code

Vertical alignment

Visibility

Forms

Input group

Images

Responsive images

Image thumbnails

Tables

Table dark

Table head options

Striped rows

Bordered table

Hoverable rows

Small table

Alerts

Link color

Additional content

Well done!

Dismissing

Badges

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New

Links

Breadcrumb

Buttons

Cards

Card title

Card title

Card subtitle

Special title treatment

Special title treatment

Special title treatment

Special title treatment

Card title

Card title

Text alignment

Special title treatment

Special title treatment

Special title treatment

Navigation

Special title treatment

Special title treatment

Card styles

Primary card title

Secondary card title

Success card title