Default Example

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.

Nesting

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

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.

Alignment

Top-aligned media

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.

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.

Center-aligned media

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.

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.

Bottom-aligned media

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.

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.

Order

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.

Media list

• 

  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.

Media list inside list group

Media heading 3min

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

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

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

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.

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Headings through classes

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

Customizing headings

h1. Bootstrap heading With faded secondary text

h2. Bootstrap heading With faded secondary text

h3. Bootstrap heading With faded secondary text

h4. Bootstrap heading With faded secondary text

h5. Bootstrap heading With faded secondary text

h6. Bootstrap heading With faded secondary text

Display headings

Display 1

Display 2

Display 3

Display 4

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

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.

Abbreviations

attr

HTML

Blockquotes

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

Naming a source

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

Alignment

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.

Unstyled 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

Inline list

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

Description list alignment

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.

Nesting

Nested definition list

Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Default Buttons:

Button tags

Outline buttons

Sizes

block level buttons

Active state

Disabled state

Disabled link state

Checkbox and radio buttons

Basic

Button toolbar

mix input groups with button groups in your toolbars

Sizing

Nesting

Vertical variation

Vertical variation with dropdown

Default 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

Content types

Titles, text, and links

Images

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

List groups

Kitchen sink

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

Header and footer

Navigation

Background and color

Card groups

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card decks

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

Slides only

With controls

Previous Next

With indicators

Previous Next

With captions

First slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Second slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Third slide label

Nulla vitae elit libero, a pharetra augue mollis interdum.

Previous Next

Single button dropdowns

And with <a> elements:

Using button variants

Split button dropdowns

Sizing

Dropup variation

Buttons Menu items

Menu forms

Simple Form Styling

Form controls

For file inputs, swap the .form-control for .form-control-file

Sizing

Readonly

Inline form

Checkboxes and radios

Form grid

Form row

complex layouts

Horizontal form

Horizontal form label sizing

Column sizing

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

Auto-sizing

And Using custom form controls are supported too:

Inline forms

Custom form controls and selects are also supported

Help text

Disabled forms

Validation

Browser defaults

Server side

Supported Validation Elements

Tooltips Validations

custom form controls validation

Custom forms

Checkboxes

Radios

Inline

Disabled

Switches

Select menu

File browser

Range

Range inputs have implicit values for min and max—0 and 100, respectively. You may specify new values for those using the min and max attributes.

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

Basic example

Sizing

Checkboxes and radio addons

Multiple addons

Button addons

Buttons with dropdowns

Segmented buttons

Basic example

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

Active items

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

Disabled items

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

Links and buttons

Contextual classes

• 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

With badges

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

Custom content

tabbable panes

Basic Hardcoded examples

Base nav

• Active
• Link
• Link
• Disabled

With link Only

Horizontal alignment

• Active
• Link
• Link
• Disabled

• Active
• Link
• Link
• Disabled

Vertical

• Active
• Link
• Link
• Disabled

Vertical using a link

Tabs

• Active
• Link
• Link
• Disabled

Pills

• Active
• Link
• Link
• Disabled

Fill and justify

• Active
• Longer nav link
• Link
• Disabled

Fill and justify using a link

Tabs with dropdowns

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

Pills with dropdowns

• Active
• Dropdown
  Action Another action Something else here

  Separated link
• Link
• Disabled

Tabs Example

Pills Example

vertical pills

Basic

Brand

Nav

dropdowns in your navbar nav

Form control inside navbar

Color schemes

Toggler

Toggler For external content

Example in navbar

Example with nested nav

Example with list-group

Pill Example

Default with only tableclass

With.table-dark

Table head options

Striped rows

With table table-striped table-dark

Bordered table

Hoverable rows

Small table

Contextual classes

Responsive tables

Use .table-responsive{-sm|-md|-lg|-xl}