Expand All
Highlight new in v4
  • card
    Card image cap

    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-block
    This is some text within a card block.
  • card-title

    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
  • card-subtitle

    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
  • card-text

    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
  • card-link

    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
  • card-img-top
    Card image cap
    Some more card content
  • card-img-bottom
    Some more card content
    Card image cap
  • card-img-overlay
    Card image

    I'm text that has a background image!

  • middle image

    This image is in the middle

    Card image

    of a card.

  • list-group
    • Cras justo odio
    • Dapibus ac facilisis in
    • Vestibulum at eros
  • card-header
    Featured

    Special title treatment

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

  • h*.cardheader

    Featured

    Special title treatment

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

    Go somewhere
  • card-footer

    Some more card content

    2 days ago
  • card-inverse
    Card image

    I'm INVERTED text that has a background image!

  • card-primary

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

    Someone famous in Source Title
  • card-info

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

    Someone famous in Source Title
  • card-success

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

    Someone famous in Source Title
  • card-warning

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

    Someone famous in Source Title
  • card-danger

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

    Someone famous in Source Title
  • card-outline-primary

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

    Someone famous in Source Title
  • card-outline-secondary

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

    Someone famous in Source Title
  • card-outline-success

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

    Someone famous in Source Title
  • card-outline-info

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

    Someone famous in Source Title
  • card-outline-warning

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

    Someone famous in Source Title
  • card-outline-danger

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

    Someone famous in Source Title
  • card-group

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

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

    Some action

  • Jumbotron-fluid

    Fluid jumbotron

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

  • media
    Generic placeholder image
    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.
  • nested media
    Generic placeholder image
    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.
    Generic placeholder image
    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.
  • d-flex align-self-start
    Generic placeholder image
    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.

    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.

  • d-flex align-self-center
    Generic placeholder image
    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.

    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.

  • d-flex align-self-end
    Generic placeholder image
    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.

    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.

  • right aligned media
    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.
    Generic placeholder image
  • data-spy

    Verse 1

    May
    the
    gods
    forgive
    me.

    Verse 2

    For
    this
    rampant
    abuse
    of
    br-tags.

  • tooltip
  • display-# (1-4)

    Display 1

    Display 2

    Display 3

    Display 4

  • lead

    Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

  • blockquote

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • blockquote-footer

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Someone famous in Source Title
  • blockquote-reverse

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Someone famous in Source Title
  • list-unstyled
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
    • Faucibus porta lacus fringilla vel
    • Eget porttitor lorem
  • list-inline
    • Lorem ipsum
    • Phasellus iaculis
    • Nulla volutpat
  • dl-horizontal
    Description lists
    A description list is perfect for defining terms.
    Euismod
    Vestibulum 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 dapibmodo, nibh, ut fermentum massa justo sit amet risus.
  • align-*
    baseline top middle bottom text-top text-bottom
  • bg-primary
    Nullam id dolor id nibh ultricies vehicula ut id elit.
  • bg-success
    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
  • bg-info
    Maecenas sed diam eget risus varius blandit sit amet non magna.
  • bg-warning
    Etiam porta sem malesuada magna mollis euismod.
  • bg-danger
    Donec ullamcorper nulla non metus auctor fringilla.
  • bg-inverse
    Cras mattis consectetur purus sit amet fermentum.
  • bg-faded
    Cras mattis consectetur purus sit amet fermentum.
  • clearfix
    ...
    ...
  • close
  • d-block
    Block
  • d-inline
    Inline
    Inline
  • d-inline-block

    inline-block

    Boot that strap!

    inline-block

    Strap that boot!
  • embed-responsive
  • float-*-left
    Float left on all viewport sizes
    Float left on viewports sized SM (small) or wider
    Float left on viewports sized MD (medium) or wider
    Float left on viewports sized LG (large) or wider
    Float left on viewports sized XL (extra-large) or wider
  • float-*-right
    Float right on all viewport sizes
    Float right on viewports sized SM (small) or wider
    Float right on viewports sized MD (medium) or wider
    Float right on viewports sized LG (large) or wider
    Float right on viewports sized XL (extra-large) or wider
  • float-*-none
    Don't float on all viewport sizes
    Don't float on viewports sized SM (small) or wider
    Don't float on viewports sized MD (medium) or wider
    Don't float on viewports sized LG (large) or wider
    Don't float on viewports sized XL (extra-large) or wider
  • font_weight-bold

    Bold text.

  • font-weight-normal

    Normal weight text.

  • font-italic

    Italicized text.

  • invisible
  • pos-f-t
    ...
  • rounded
    Rounded image
  • rounded-circle
    Circle image
  • rounded-*
    Circle image Circle image Circle image Circle image
  • sr-only
    Skip to main content
  • sr-only-focusable
    Skip to main content
  • text-justify

    Justified text.

  • text-nowrap

    No wrap text.

  • text-*-left

    Left 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-*-right

    Right aligned text on all viewport sizes.

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

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

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

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

  • text-*-center

    Center aligned text on all viewport sizes.

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

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

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

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

  • text-lowercase

    lowercased text.

  • text-uppercase

    uppercased text.

  • text-capitalize

    capitalized text.

  • text-muted

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

  • text-primary

    Nullam id dolor id nibh ultricies vehicula ut id elit.

  • text-success

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

  • text-info

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

  • text-warning

    Etiam porta sem malesuada magna mollis euismod.

  • text-danger

    Donec ullamcorper nulla non metus auctor fringilla.

  • text-white

    Donec ullamcorper nulla non metus auctor fringilla.

  • text-hide

    Custom heading

  • w-100
    Width 25%
    Width 50%
    Width 75%
    Width 100%
  • h-100
    Height 25%
    Height 50%
    Height 75%
    Height 100%
clear
Code Snippet
Preview

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.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.