Bootstrap 4 Cheat Sheet

An interactive list of Bootstrap classes for version 4.3.1

Have a look at my newly released Bootstrap admin template: Spur

Code snippet

Preview

alert-primary
alert-primary
<div class="alert alert-primary" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>
alert-secondary
alert-secondary
<div class="alert alert-secondary" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>
alert-success
alert-success
<div class="alert alert-success" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>
alert-info
alert-info
<div class="alert alert-info" role="alert">
    <strong>Heads up!</strong> This alert needs your attention,
    but it's not super important.
</div>
alert-warning
alert-warning
<div class="alert alert-warning" role="alert">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
alert-danger
alert-danger
<div class="alert alert-danger" role="alert">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
alert-light
alert-light
<div class="alert alert-light" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>
alert-dark
alert-dark
<div class="alert alert-dark" role="alert">
    <strong>Well done!</strong> You successfully read this
    important alert message.
</div>
alert-dismissible
alert-dismissible
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
</div>
alert-heading
alert-heading
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  You successfully read this important alert message.
</div>
badge
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
badge-pill
badge-pill
<span class="badge badge-pill badge-primary">Secondary</span>
Secondary
badge-primary
badge-primary
<span class="badge badge-primary">Primary</span>
Primary
badge-secondary
badge-secondary
<span class="badge badge-secondary">Secondary</span>
Secondary
badge-success
badge-success
<span class="badge badge-success">Success</span>
Success
badge-info
badge-info
<span class="badge badge-info">Info</span>
Info
badge-warning
badge-warning
<span class="badge badge-warning">Warning</span>
Warning
badge-danger
badge-danger
<span class="badge badge-danger">Danger</span>
Danger
badge-light
badge-light
<span class="badge badge-light">Light</span>
Light
badge-dark
badge-dark
<span class="badge badge-dark">Dark</span>
Dark
breadcrumb
breadcrumb
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>
btn-primary
btn-primary
<button type="button" class="btn btn-primary">Primary</button>
btn-secondary
btn-secondary
<button type="button" class="btn btn-secondary">Secondary</button>
btn-success
btn-success
<button type="button" class="btn btn-success">Success</button>
btn-info
btn-info
<button type="button" class="btn btn-info">Info</button>
btn-warning
btn-warning
<button type="button" class="btn btn-warning">Warning</button>
btn-danger
btn-danger
<button type="button" class="btn btn-danger">Danger</button>
btn-light
btn-light
<button type="button" class="btn btn-light">Light</button>
btn-dark
btn-dark
<button type="button" class="btn btn-dark">Dark</button>
btn-outline-primary
btn-outline-primary
<button type="button" class="btn btn-outline-primary">Primary</button>
btn-outline-secondary
btn-outline-secondary
<button type="button" class="btn btn-outline-secondary">Secondary</button>
btn-outline-success
btn-outline-success
<button type="button" class="btn btn-outline-success">Success</button>
btn-outline-info
btn-outline-info
<button type="button" class="btn btn-outline-info">Info</button>
btn-outline-warning
btn-outline-warning
<button type="button" class="btn btn-outline-warning">Warning</button>
btn-outline-danger
btn-outline-danger
<button type="button" class="btn btn-outline-danger">Danger</button>
btn-outline-light
btn-outline-light
<button type="button" class="btn btn-outline-light">Light</button>
btn-outline-dark
btn-outline-dark
<button type="button" class="btn btn-outline-dark">Dark</button>
btn-group
btn-group
<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
btn-group-lg
btn-group-lg
<div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
btn-group-sm
btn-group-sm
<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
btn-group-vertical
btn-group-vertical
<div class="btn-group-vertical" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
btn-group (nested)
btn-group
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button"
            class="btn btn-secondary dropdown-toggle"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#!">Dropdown link</a>
      <a class="dropdown-item" href="#!">Dropdown link</a>
    </div>
  </div>
</div>
btn-toolbar
btn-toolbar
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>
btn-lg
btn-lg
<button type="button" class="btn btn-primary btn-lg">Large button</button>
btn-sm
btn-sm
<button type="button" class="btn btn-primary btn-sm">Small button</button>
btn-block
btn-block
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
active button
active
<a href="#!" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
disabled button
disabled
<button type="button" class="btn btn-lg btn-primary" disabled>Disabled button</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Disabled link button</a>
Disabled link button
checkbox as button
checkbox
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Active
  </label>
  <label class="btn btn-secondary">
    <input type="checkbox" autocomplete="off"> Check
  </label>
</div>
radio as button
radio
<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
</div>
card
card
<div class="card">
  <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#!" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
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 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-body
card-body
<div class="card">
  <div class="card-body">
    This is some text within a card block.
  </div>
</div>
This is some text within a card block.
card-title
card-title
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#!" class="card-link">Card link</a>
    <a href="#!" class="card-link">Another link</a>
  </div>
</div>

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-subtitle
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#!" class="card-link">Card link</a>
    <a href="#!" class="card-link">Another link</a>
  </div>
</div>

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-text
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">
      Some quick example text to build on the card title
      and make up the bulk of the card's content.
    </p>
    <a href="#!" class="card-link">Card link</a>
    <a href="#!" class="card-link">Another link</a>
  </div>
</div>

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-img-top
<div class="card">
  <img class="card-img-top" src="/images/pathToYourImage.png" alt="Card image cap">
  <div class="card-body"> Some more card content </div>
</div>
Card image cap
Some more card content
Card image cap
Some more card content
middle image
<div class="card">
  <div class="card-body">
    <p class="card-text">This image is in the middle</p>
  </div>
  <img src="/images/pathToYourImage.png" alt="Card image">
  <div class="card-body">
    <p class="card-text">of a card.</p>
  </div>
</div>

This image is in the middle

Card image

of a card.

This image is in the middle

Card image

of a card.

card-img-bottom
card-img-bottom
<div class="card">
  <div class="card-body"> Some more card content </div>
  <img class="card-img-bottom" src="/images/pathToYourImage.png" alt="Card image cap">
</div>
Some more card content
Card image cap
Some more card content
Card image cap
card-img-overlay
card-img-overlay
<div class="card">
  <img class="card-img" src="/images/pathToYourImage.png" alt="Card image">
  <div class="card-img-overlay">
    <p class="card-text">I'm text that has a background image!</p>
  </div>
</div>
Card image

I'm text that has a background image!

Card image

I'm text that has a background image!

list-group
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
card-header
card-header
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
  </div>
</div>
Featured

Special title treatment

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

h*.card-header
card-header
<div class="card">
  <h3 class="card-header">Featured</h3>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#!" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Featured

Special title treatment

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

Go somewhere
card-group
card-group
<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">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.</p>
    </div>
  </div>
</div>

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-deck
<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">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.</p>
    </div>
  </div>
</div>

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
card-columns
<div class="card-columns">
  <div class="card">
    <div class="card-body">
      <!-- Card content -->
    </div>
  </div>
  <div class="card p-3">
    <!-- Card content -->
  </div>
  <div class="card">
    <div class="card-body">
      <!-- Card content -->
    </div>
  </div>
  <div class="card bg-primary p-3 text-center">
      <!-- Card content -->
  </div>
</div>

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

Someone famous in Source Title

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 bg-... text-...
card text-white bg-primary
<!-- Tip: use bg-* and text-* utilities to style the card -->
<div class="card text-white bg-primary mb-3 d-inline-block" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3 d-inline-block" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
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

Primary card title

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

collapse
<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    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.
  </div>
</div>

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
<div id="accordion" role="tablist">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>
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.
dropdown
dropdown
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu1" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>
dropdown (split)
dropdown-toggle
<div class="btn-group">
  <button type="button" class="btn btn-secondary">Dropdown</button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>
dropup
dropup
<br> <br> <br> <br>
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Something else here</a>
  </div>
</div>
dropup (split)
dropup
<br> <br> <br> <br>
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>




dropright
dropright
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>
dropleft
dropleft
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu" x-placement="right-start" style="position: absolute; transform: translate3d(111px, 0px, 0px); top: 0px; left: 0px; will-change: transform;">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
  </div>
</div>
dropdown-header
dropdown-header
<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu3" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <h6 class="dropdown-header">Dropdown header</h6>
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>
dropdown-item-text
dropdown-item-text
<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu4" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <span class="dropdown-item-text">Dropdown item text</span>
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>
dropdown-divider
dropdown-divider
<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu5" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#!">Separated link</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item" href="#!">Another action</a>
  </div>
</div>
dropdown-item disabled
dropdown-item disabled
<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle"
          type="button" id="dropdownMenu5" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#!">Action</a>
    <a class="dropdown-item disabled" href="#!">Disabled action</a>
  </div>
</div>
dropdown-menu-right
dropdown-menu-right
<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    This dropdown's menu is right-aligned
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>
form-group
form-group
<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>
form-inline
form-inline
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
@
form using the grid
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
form-control
form-control
<input class="form-control" type="text" placeholder="Default input">
form-control-lg
form-control-lg
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
form-control-sm
form-control-sm
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
form-control-file
form-control-file
<input type="file" class="form-control-file" id="exampleFormControlFile1">
form-control-plaintext
form-control-plaintext
<input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
form-control-range
form-control-range
<input type="range" class="form-control-range">
form-check
form-check
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
form-check-inline
form-check-inline
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
disabled items
disabled
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
      <label class="form-check-label" for="disabledFieldsetCheck">
        Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
readonly
readonly
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
input-group
input-group
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">Left addon</span>
  </div>
  <input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">Right addon</span>
  </div>
</div>
Left addon
Right addon
input-group-prepend
input-group-prepend
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-success" type="button">Love it</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
</div>
input-group-append
input-group-append
<div class="input-group">
  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Love it</button>
  </div>
</div>
input-group-sm
input-group-sm
<div class="input-group input-group-sm">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>
Small
input-group-lg
input-group-lg
<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>
Large
checkbox
checkbox
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>
radio
radio
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
    <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>
dropdown
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>
segmented buttons
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-primary">Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>
custom-checkbox
custom-checkbox
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
custom-radio
custom-radio
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
custom-switch
custom-switch
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
custom-select
custom-select
<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
custom-file
custom-file
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>
custom-range
custom-range
<label for="customRange1">Basic range</label>
<input type="range" class="custom-range" id="customRange1">
<label class="mt-3" for="customRange3">Range with steps</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
container
container
<div class="container">
  <!-- Content here -->
</div>
container-fluid
container-fluid
<div class="container-fluid">
  <!-- A fluid container that uses the full witdh -->
</div>
row
row
<div class="container">
  <div class="row">
  <!-- col- elements here -->
  </div>
</div>
No preview available for this one.
col-# ( <576px)
col-1
<div class="container">
  <div class="row">
    <div class="col-2">
      <!-- Content -->
    </div>
    <div class="col-2">
      <!-- Content -->
    </div>
    <div class="col-8">
      <!-- Content -->
    </div>
  </div>
</div>
col-2
col-2
col-8
col-sm-# ( ≥576px)
col-sm-1
<div class="container">
  <div class="row">
    <div class="col-sm-2">
      <!-- Content -->
    </div>
    <div class="col-sm-2">
      <!-- Content -->
    </div>
    <div class="col-sm-8">
      <!-- Content -->
    </div>
  </div>
</div>
col-sm-2
col-sm-2
col-sm-8
col-md-# ( ≥768px)
col-md-1
<div class="container">
  <div class="row">
    <div class="col-md-2">
      <!-- Content -->
    </div>
    <div class="col-md-2">
      <!-- Content -->
    </div>
    <div class="col-md-8">
      <!-- Content -->
    </div>
  </div>
</div>
col-md-2
col-md-2
col-md-8
col-lg-# ( ≥992px)
col-lg-1
<div class="container">
  <div class="row">
    <div class="col-lg-2">
      <!-- Content -->
    </div>
    <div class="col-lg-2">
      <!-- Content -->
    </div>
    <div class="col-lg-8">
      <!-- Content -->
    </div>
  </div>
</div>
col-lg-2
col-lg-2
col-lg-8
col-xl-# ( ≥1200px)
col-xl-1
<div class="container">
  <div class="row">
    <div class="col-xl-2">
      <!-- Content -->
    </div>
    <div class="col-xl-2">
      <!-- Content -->
    </div>
    <div class="col-xl-8">
      <!-- Content -->
    </div>
  </div>
</div>
col-xl-2
col-xl-2
col-xl-8
col
col
<!-- Equal width cols, same on all screen sizes -->
<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      1 of 3
    </div>
  </div>
</div>
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
col-*
col-sm
<!-- responsive equal width cols, can be sm, md, lg, or xl -->
<div class="container">
  <div class="row">
    <div class="col-sm">1 of 3</div>
    <div class="col-sm">1 of 3</div>
    <div class="col-sm">1 of 3</div>
  </div>
</div>
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
1 of 3
no-gutters
no-gutters
<div class="container">
  <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>
</div>
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4
offset-*-#
offset-6
<div class="container">
  <div class="row">
    <div class="col-3 offset-6">
      <!-- Content -->
    </div>
  </div>
  <!-- This class can be used with responsive classes such as -md- as well: -->
  <div class="row">
    <div class="col-md-3 offset-md-6">
      <!-- Content -->
    </div>
  </div>
</div>
col-3 offset-6
col-md-3 offset-md-6
order-#
order-1
<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>

<!-- responsive variations -->
<div class="col order-sm-3">Ordered column</div>
<div class="col order-md-3">Ordered column</div>
<div class="col order-lg-3">Ordered column</div>
<div class="col order-xl-3">Ordered column</div>
First, but unordered
Second, but last
Third, but first
Ordered column
Ordered column
Ordered column
Ordered column
First, but unordered
Second, but last
Third, but first
nested columns
<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>
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
img-fluid
img-fluid
<img src="/images/pathToYourImage.png" class="img-fluid" alt="Responsive image">
Responsive image
Responsive image
img-thumbnail
img-thumbnail
<img class="img-thumbnail" src="/images/pathToYourImage.png" alt="Thumbnail image">
Thumbnail image
Thumbnail image
jumbotron
jumbotron
<div class="jumbotron">
  <h1 class="display-3">Hello, world!</h1>
  <p class="lead">This is a simple hero unit, a simple jumbotron-style component for
                  calling extra attention to featured content or information.</p>
  <hr class="my-2">
  <p>It uses utility classes for typography and
     spacing to space content out within the larger container.</p>
  <p class="lead">
    <a class="btn btn-primary btn-lg" href="#!" role="button">Some action</a>
  </p>
</div>

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
jumbotron-fluid
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-3">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies
                    the entire horizontal space of its parent.</p>
  </div>
</div>

Fluid jumbotron

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

list-group
list-group
<ul class="list-group">
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
list-group-item active
active
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
list-group-item disabled
disabled
<ul class="list-group">
  <li class="list-group-item disabled">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
list-group-item-action
list-group-item-action
<div class="list-group">
  <a href="#!" class="list-group-item active">Cras justo odio</a>
  <a href="#!" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#!" class="list-group-item list-group-item-action">Morbi leo risus</a>
</div>
list-group-item-primary
list-group-item-primary
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-primary">Dapibus ac facilisis in</a>
</div>
list-group-item-secondary
list-group-item-secondary
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-secondary">Dapibus ac facilisis in</a>
</div>
list-group-item-success
list-group-item-success
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
</div>
list-group-item-info
list-group-item-info
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a>
</div>
list-group-item-warning
list-group-item-warning
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a>
</div>
list-group-item-danger
list-group-item-danger
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div>
list-group-item-light
list-group-item-light
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-light">Dapibus ac facilisis in</a>
</div>
list-group-item-dark
list-group-item-dark
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action list-group-item-dark">Dapibus ac facilisis in</a>
</div>
list-group with badges
badge badge-primary badge-pill float-right
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
list-group with d-flex
d-flex
<div class="list-group">
  <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</small>
  </a>
  <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#!" class="list-group-item list-group-item-action flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>
list-group-horizontal
list-group-horizontal
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
media
media
<div class="media">
  <img class="d-flex mr-3" data-src="holder.js/64x64?theme=sky" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    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.
  </div>
</div>
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.
nested media
<div class="media">
  <img class="d-flex mr-3" src="/images/pathToYourImage.png" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Media heading</h5>
    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.

    <div class="media mt-3">
      <a class="d-flex pr-3" href="#!">
        <img src="/images/pathToYourImage.png" alt="Generic placeholder image">
      </a>
      <div class="media-body">
        <h5 class="mt-0">Media heading</h5>
        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.
      </div>
    </div>
  </div>
</div>
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.
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
d-flex align-self-start
<div class="media">
  <img class="d-flex align-self-start mr-3" src="/images/pathToYourImage.png" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Top-aligned media</h5>
    <p>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.</p>
    <p>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.</p>
  </div>
</div>
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.

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
d-flex align-self-center
<div class="media">
  <img class="d-flex align-self-center mr-3" src="/images/pathToYourImage.png" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Center-aligned media</h5>
    <p>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.</p>
    <p class="mb-0">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.</p>
  </div>
</div>
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.

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
d-flex align-self-end
<div class="media">
  <img class="d-flex align-self-end mr-3" src="/images/pathToYourImage.png" alt="Generic placeholder image">
  <div class="media-body">
    <h5 class="mt-0">Bottom-aligned media</h5>
    <p>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.</p>
    <p class="mb-0">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.</p>
  </div>
</div>
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.

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
<div class="media">
  <div class="media-body">
    <h5 class="mt-0 mb-1">Media object</h5>
    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.
  </div>
  <img class="d-flex ml-3" src="/images/pathToYourImage.png" alt="Generic placeholder image">
</div>
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
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
modal
modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
modal-dialog-centered
modal-dialog-centered
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCentered">
  Launch centered demo modal
</button>

<!-- Modal -->
<div class="modal" id="exampleModalCentered" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenteredLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
modal-dialog-scrollable
modal-dialog-scrollable
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalScrollable">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenteredLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
modal fade
modal fade
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal3">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModal3Label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModal3Label">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
modal-lg
modal-lg
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">
  Large modal
</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
modal-sm
modal-sm
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">
  Small modal
</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
modal-xl
modal-xl
<!-- Huge modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">
  Huge modal
</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog"
     aria-labelledby="myHugeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
ul.nav
nav
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#!">Disabled</a>
  </li>
</ul>
nav.nav
nav
<nav class="nav">
  <a class="nav-link active" href="#!">Active</a>
  <a class="nav-link" href="#!">Link</a>
  <a class="nav-link disabled" href="#!">Disabled</a>
</nav>
nav justify-content-*
nav justify-content-center
<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
</ul>
nav flex-column
nav flex-column
<nav class="nav flex-column">
  <a class="nav-link active" href="#!">Active</a>
  <a class="nav-link" href="#!">Link</a>
  <a class="nav-link" href="#!">Link</a>
</nav>
nav-tabs
nav-tabs
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
</ul>
nav-pills
nav-pills
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#!">Disabled</a>
  </li>
</ul>
nav-fill
nav-fill
<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
</ul>
nav-justified
nav-justified
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#!">Link</a>
  </li>
</ul>
nav with flex utils
<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#!">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#!">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#!">Link</a>
</nav>
nav-tabs with dropdown
nav-item dropdown
<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown"
       href="#" role="button" aria-haspopup="true" aria-expanded="false">
       Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#!">Action</a>
      <a class="dropdown-item" href="#!">Another action</a>
    </div>
  </li>
</ul>
nav-pills with dropdown
nav-item dropdown
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#!">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#!">Action</a>
      <a class="dropdown-item" href="#!">Another action</a>
    </div>
  </li>
</ul>
navbar
navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
navbar-brand
navbar-brand
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#!">Navbar</a>
</nav>
navbar with form
form-inline
<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>
navbar-text
navbar-text
<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>
navbar-dark bg-dark
navbar-dark bg-dark
<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>
navbar-light
navbar-light
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>
navbar fixed-top
navbar fixed-top
<nav class="navbar fixed-top navbar-dark bg-primary">
  <a class="navbar-brand" href="#!">Fixed top</a>
</nav>
navbar fixed-bottom
navbar fixed-bottom
<nav class="navbar fixed-bottom navbar-dark bg-primary">
  <a class="navbar-brand" href="#!">Fixed bottom</a>
</nav>
navbar sticky-top
<nav class="navbar sticky-top navbar-dark bg-primary">
  <a class="navbar-brand" href="#!">Sticky top</a>
</nav>
collapse navbar-collapse
collapse navbar-collapse
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#!">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#!">Disabled</a>
      </li>
    </ul>
  </div>
</nav>
navbar-toggler
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#!">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#!">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
      </li>
    </ul>
  </div>
</nav>
navbar-expand-*
navbar-expand-lg
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#!">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-md-0">
      <li class="nav-item active">
        <a class="nav-link" href="#!">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#!">Link</a>
      </li>
    </ul>
  </div>
</nav>
pagination
pagination
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item">
      <a class="page-link" href="#!" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
        <span class="sr-only">Previous</span>
      </a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">1</a></li>
    <li class="page-item"><a class="page-link" href="#!">2</a></li>
    <li class="page-item"><a class="page-link" href="#!">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#!" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
        <span class="sr-only">Next</span>
      </a>
    </li>
  </ul>
</nav>
page-item disabled
page-item disabled
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#!" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#!">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#!">Next</a>
    </li>
  </ul>
</nav>
page-item active
page-item active
<nav aria-label="...">
  <ul class="pagination">
    <li class="page-item disabled">
      <a class="page-link" href="#!" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">1</a></li>
    <li class="page-item active">
      <a class="page-link" href="#!">2 <span class="sr-only">(current)</span></a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#!">Next</a>
    </li>
  </ul>
</nav>
pagination-lg
pagination-lg
<nav aria-label="...">
  <ul class="pagination pagination-lg">
    <li class="page-item disabled">
      <a class="page-link" href="#!" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">1</a></li>
    <li class="page-item"><a class="page-link" href="#!">2</a></li>
    <li class="page-item"><a class="page-link" href="#!">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#!">Next</a>
    </li>
  </ul>
</nav>
pagination-sm
pagination-sm
<nav aria-label="...">
  <ul class="pagination pagination-sm">
    <li class="page-item disabled">
      <a class="page-link" href="#!" tabindex="-1">Previous</a>
    </li>
    <li class="page-item"><a class="page-link" href="#!">1</a></li>
    <li class="page-item"><a class="page-link" href="#!">2</a></li>
    <li class="page-item"><a class="page-link" href="#!">3</a></li>
    <li class="page-item">
      <a class="page-link" href="#!">Next</a>
    </li>
  </ul>
</nav>
popovers
<!-- Note: A custom script is used to activate popovers:

$(function(){
  $('[data-toggle="popover"]').popover()
});
-->
<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="top"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="right"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="bottom"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body"
        data-toggle="popover" data-placement="left"
        data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>
dismissible popover
data-trigger
<!-- Note: A custom script is used to activate popovers:

$(function(){
  $('[data-toggle="popover"]').popover()
});
-->
<a tabindex="0" class="btn btn-lg btn-danger" role="button"
   data-toggle="popover" data-trigger="focus" title="Dismissible popover"
   data-content="Click anywhere to dismiss this popover">
   Dismissible popover
</a>
progress
progress
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar
progress-bar
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 41%" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar with label
progress-bar
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar with height
progress-bar
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%; height: 35px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar bg-*
progress-bar bg-success
<div class="progress"> <div class="progress-bar bg-primary" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-success" role="progressbar" style="width: 38%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-light" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
multiple progress-bar
progress-bar
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar-striped
progress-bar-striped
<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
progress-bar-striped bg-*
progress-bar-striped bg-success
<div class="progress"> <div class="progress-bar progress-bar-striped bg-primary" role="progressbar" style="width: 12%" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-secondary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 38%" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 62%" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 88%" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100"></div> </div>
<div class="progress"> <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>
progress-bar-animated
progress-bar-animated
<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>
data-spy
data-spy
<!-- Custom css that makes this example work like it does: -->
<style type="text/css" scoped>
.scrollspy-example {
    position: relative;
    height: 200px;
    margin-top: .5rem;
    overflow: auto;
}
</style>

<!-- Actual scrollspy markup: -->
<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <h3 class="navbar-brand">Project Name</h3>
  <ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link" href="#verse1">Verse 1</a></li>
    <li class="nav-item"><a class="nav-link" href="#verse2">Verse 2</a></li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0" class="scrollspy-example">
  <h4 id="verse1">Verse 1</h4>
  <p>May <br> the <br> gods <br> forgive <br> me.</p>
  <h4 id="verse2">Verse 2</h4>
  <p>For <br> this <br> rampant <br> abuse <br> of <br> br-tags.</p>
</div>

Verse 1

May
the
gods
forgive
me.

Verse 2

For
this
rampant
abuse
of
br-tags.

spinner-border
spinner-border
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
spinner-border text-*
spinner-border text-primary
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-border text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
spinner-border-sm
spinner-border-sm
<div class="spinner-border spinner-border-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
spinner-grow
spinner-grow
<div class="spinner-grow" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
spinner-grow text-*
spinner-grow text-primary
<div class="spinner-grow text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-secondary" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-success" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-danger" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-warning" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-info" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-light" role="status">
  <span class="sr-only">Loading...</span>
</div>
<div class="spinner-grow text-dark" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
spinner-grow-sm
spinner-grow-sm
<div class="spinner-grow spinner-grow-sm" role="status">
  <span class="sr-only">Loading...</span>
</div>
Loading...
table
table
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
thead-light
thead-light
<table class="table">
  <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
thead-dark
thead-dark
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-striped
table-striped
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-bordered
table-bordered
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-borderless
table-borderless
<table class="table table-borderless">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-hover
table-hover
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-sm
table-sm
<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-*-responsive
table-responsive
<table class="table table-responsive">
<!-- table content here -->
</table>

<table class="table table-sm-responsive"><!-- ... --></table>
<table class="table table-md-responsive"><!-- ... --></table>
<table class="table table-lg-responsive"><!-- ... --></table>
<table class="table table-xl-responsive"><!-- ... --></table>
# Table heading Table heading Table heading Table heading Table heading Table heading
1 Table cell Table cell Table cell Table cell Table cell Table cell
2 Table cell Table cell Table cell Table cell Table cell Table cell
3 Table cell Table cell Table cell Table cell Table cell Table cell
table-reflow
table-reflow
<table class="table table-reflow">
  <thead>
    <tr>
      <th>#</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>
# Table heading Table heading Table heading
1 Table cell Table cell Table cell
2 Table cell Table cell Table cell
3 Table cell Table cell Table cell
table-active
table-active
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-active">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-primary
table-primary
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-secondary
table-secondary
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-secondary">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-success
table-success
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-info
table-info
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-info">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-warning
table-warning
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-warning">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-danger
table-danger
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-danger">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-light
table-light
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-light">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
table-dark
table-dark
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-dark">
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
    </tr>
  </tbody>
</table>
# First Name Last Name
1 Mark Otto
2 Jacob Thornton
toast
toast
<!-- Note a custom script is used to activate toasts:
$('.toast').toast();
-->

<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
tooltip
tooltip
<!-- Note: A custom script is used to activate tooltips:

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
-->
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="top" title="Tooltip on top"> Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="right" title="Tooltip on right"> Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
        data-placement="left" title="Tooltip on left"> Tooltip on left
</button>
display-# (1-4)
display-1
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

Display 1

Display 2

Display 3

Display 4

lead
lead
<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
</p>

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

blockquote
blockquote
<blockquote class="blockquote">
  <p class="mb-0">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

blockquote-reverse
blockquote-reverse
<blockquote class="blockquote blockquote-reverse">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
  <footer class="blockquote-footer">Someone famous in
    <cite title="Source Title">Source Title</cite>
  </footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Someone famous in Source Title
list-unstyled
list-unstyled
<ul class="list-unstyled">
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Eget porttitor lorem</li>
</ul>
  • 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
list-inline
<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>
  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
dl-horizontal
dl-horizontal
<dl class="dl-horizontal">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Euismod</dt>
  <dd class="col-sm-9">Vestibulum  felis euismod semper eget lacinia odio sem nec elit.</dd>
  <dd class="col-sm-9 offset-sm-3">Donec id elit non mi porta gravida at eget metus.</dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibmodo, nibh, ut fermentum massa justo sit amet risus.</dd>
</dl>
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.
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.
border
border
<span class="border border-dark">Hello World</span>
Hello World
border-*-0
border-0
<span class="p-1 border border-primary border-0">Hello World</span>
<span class="p-1 border border-primary border-top-0">Hello World</span>
<span class="p-1 border border-primary border-right-0">Hello World</span>
<span class="p-1 border border-primary border-bottom-0">Hello World</span>
<span class="p-1 border border-primary border-left-0">Hello World</span>
Hello World Hello World Hello World Hello World Hello World
border-primary
border-primary
<span class="border border-primary">Hello World</span>
Hello World
border-secondary
border-secondary
<span class="border border-secondary">Hello World</span>
Hello World
border-success
border-success
<span class="border border-success">Hello World</span>
Hello World
border-danger
border-danger
<span class="border border-danger">Hello World</span>
Hello World
border-warning
border-warning
<span class="border border-warning">Hello World</span>
Hello World
border-info
border-info
<span class="border border-info">Hello World</span>
Hello World
border-light
border-light
<span class="border border-light">Hello World</span>
Hello World
Hello World
border-dark
border-dark
<span class="border border-dark">Hello World</span>
Hello World
border-white
border-white
<span class="border border-white">Hello World</span>
Hello World
Hello World
rounded
rounded
<img class="rounded" src="/images/pathToYourImage.png" alt="Rounded image">
Rounded image
Rounded image
rounded-sm
rounded-sm
<img class="rounded-sm" src="/images/pathToYourImage.png" alt="Rounded image">
Rounded image
Rounded image
rounded-lg
rounded-lg
<img class="rounded-lg" src="/images/pathToYourImage.png" alt="Rounded image">
Rounded image
Rounded image
rounded-circle
rounded-circle
<img class="rounded-circle" src="/images/pathToYourImage.png" alt="Circle image">
Circle image
Circle image
rounded-0
rounded-0
<img class="rounded-0" src="/images/pathToYourImage.png" alt="Edgy image">
Edgy image
Edgy image
rounded-*
<img class="rounded-top" src="/images/pathToYourImage.png" alt="Slightly rounded image">
<img class="rounded-right" src="/images/pathToYourImage.png" alt="Slightly rounded image">
<img class="rounded-bottom" src="/images/pathToYourImage.png" alt="Slightly rounded image">
<img class="rounded-left" src="/images/pathToYourImage.png" alt="Slightly rounded image">
Slightly rounded image Slightly rounded image Slightly rounded image Slightly rounded image
Slightly rounded image Slightly rounded image Slightly rounded image Slightly rounded image
bg-primary
bg-primary
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
Nullam id dolor id nibh ultricies vehicula ut id elit.
bg-secondary
bg-secondary
<div class="bg-secondary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
Nullam id dolor id nibh ultricies vehicula ut id elit.
bg-success
bg-success
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
bg-info
bg-info
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
Maecenas sed diam eget risus varius blandit sit amet non magna.
bg-warning
bg-warning
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
Etiam porta sem malesuada magna mollis euismod.
bg-danger
bg-danger
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
Donec ullamcorper nulla non metus auctor fringilla.
bg-light
bg-light
<div class="bg-light">Cras mattis consectetur purus sit amet fermentum.</div>
Cras mattis consectetur purus sit amet fermentum.
bg-dark
bg-dark
<div class="bg-dark text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
Nullam id dolor id nibh ultricies vehicula ut id elit.
bg-white
bg-white
<div class="bg-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
Nullam id dolor id nibh ultricies vehicula ut id elit.
text-primary
text-primary
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

text-secondary
text-secondary
<p class="text-secondary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

text-success
text-success
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

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

text-info
text-info
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

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

text-warning
text-warning
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

Etiam porta sem malesuada magna mollis euismod.

text-danger
text-danger
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

Donec ullamcorper nulla non metus auctor fringilla.

text-light
text-light
<p class="text-light">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec ullamcorper nulla non metus auctor fringilla.

text-dark
text-dark
<p class="text-dark">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

Nullam id dolor id nibh ultricies vehicula ut id elit.

text-white
text-white
<p class="text-white">Donec ullamcorper nulla non metus auctor fringilla.</p>

Donec ullamcorper nulla non metus auctor fringilla.

Donec ullamcorper nulla non metus auctor fringilla.

d-*-block
d-block
<span class="d-block bg-primary">d-block</span>
<span class="d-sm-block bg-primary">d-sm-block</span>
<span class="d-md-block bg-primary">d-md-block</span>
<span class="d-lg-block bg-primary">d-lg-block</span>
<span class="d-xl-block bg-primary">d-xl-block</span>
d-block d-sm-block d-md-block d-lg-block d-xl-block
d-*-flex
d-flex
<div class="d-flex bg-primary">d-flex</div>
<span class="d-sm-flex bg-primary">d-sm-flex</span>
<span class="d-md-flex bg-primary">d-md-flex</span>
<span class="d-lg-flex bg-primary">d-lg-flex</span>
<span class="d-xl-flex bg-primary">d-xl-flex</span>
d-flex
d-sm-flex d-md-flex d-lg-flex d-xl-flex
d-*-inline
d-inline
<div class="d-inline bg-primary">d-inline</div>
<div class="d-sm-inline bg-primary">d-sm-inline</div>
<div class="d-md-inline bg-primary">d-md-inline</div>
<div class="d-lg-inline bg-primary">d-lg-inline</div>
<div class="d-xl-inline bg-primary">d-xl-inline</div>
d-inline
d-sm-inline
d-md-inline
d-lg-inline
d-xl-inline
d-*-inline-block
d-inline-block
<div class="d-inline-block bg-primary">d-inline-block</div>
<span class="d-sm-inline-block bg-primary">d-sm-inline-block</span>
<span class="d-md-inline-block bg-primary">d-md-inline-block</span>
<span class="d-lg-inline-block bg-primary">d-lg-inline-block</span>
<span class="d-xl-inline-block bg-primary">d-xl-inline-block</span>
d-inline-block
d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block
d-*-inline-flex
d-inline-flex
<div class="d-inline-flex bg-primary">d-inline-flex</div>
<span class="d-sm-inline-flex bg-primary">d-sm-inline-flex</span>
<span class="d-md-inline-flex bg-primary">d-md-inline-flex</span>
<span class="d-lg-inline-flex bg-primary">d-lg-inline-flex</span>
<span class="d-xl-inline-flex bg-primary">d-xl-inline-flex</span>
d-inline-flex
d-sm-inline-flex d-md-inline-flex d-lg-inline-flex d-xl-inline-flex
d-*-none
d-none
<div class="d-none">d-none">This</div>
<span class="d-sm-none bg-primary">d-sm-none</span>
<span class="d-md-none bg-primary">d-md-none</span>
<span class="d-lg-none bg-primary">d-lg-none</span>
<span class="d-xl-none bg-primary">d-xl-none</span>
d-none">This
d-sm-none d-md-none d-lg-none d-xl-none
No preview available for this one.
d-*-table
d-table
<div class="d-table bg-primary">d-table</div>
<span class="d-sm-table bg-primary">d-sm-table</span>
<span class="d-md-table bg-primary">d-md-table</span>
<span class="d-lg-table bg-primary">d-lg-table</span>
<span class="d-xl-table bg-primary">d-xl-table</span>
d-table
d-sm-table d-md-table d-lg-table d-xl-table
d-*-table-cell
d-table-cell
<div class="d-table-cell bg-primary">d-table-cell</div>
<span class="d-sm-table-cell bg-primary">d-sm-table-cell</span>
<span class="d-md-table-cell bg-primary">d-md-table-cell</span>
<span class="d-lg-table-cell bg-primary">d-lg-table-cell</span>
<span class="d-xl-table-cell bg-primary">d-xl-table-cell</span>
d-table-cell
d-sm-table-cell d-md-table-cell d-lg-table-cell d-xl-table-cell
d-print-...
d-print-block
<div class="d-print-none">Doesn't display when printing</div>
<div class="d-print-block">Displays as block when printing</div>
<div class="d-print-inline">Displays as inline when printing</div>
<div class="d-print-inline-block">Displays as inline-block when printing</div>
Doesn't display when printing
Displays as block when printing
Displays as inline when printing
Displays as inline-block when printing
No preview available for this one.
flex-*-column
flex-column
<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex flex-sm-column">...</div>
<div class="d-flex flex-md-column">...</div>
<div class="d-flex flex-lg-column">...</div>
<div class="d-flex flex-xl-column">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
flex-*-column-reverse
flex-column-reverse
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex flex-sm-column-reverse">...</div>
<div class="d-flex flex-md-column-reverse">...</div>
<div class="d-flex flex-lg-column-reverse">...</div>
<div class="d-flex flex-xl-column-reverse">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
flex-*-row
flex-row
<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex flex-sm-row">...</div>
<div class="d-flex flex-md-row">...</div>
<div class="d-flex flex-lg-row">...</div>
<div class="d-flex flex-xl-row">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
flex-*-row-reverse
flex-row-reverse
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex flex-sm-row-reverse">...</div>
<div class="d-flex flex-md-row-reverse">...</div>
<div class="d-flex flex-lg-row-reverse">...</div>
<div class="d-flex flex-xl-row-reverse">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
flex-*-nowrap
flex-nowrap
<div class="d-flex flex-nowrap"> ... </div>
<div class="d-flex flex-sm-nowrap"> ... </div>
<div class="d-flex flex-md-nowrap"> ... </div>
<div class="d-flex flex-lg-nowrap"> ... </div>
<div class="d-flex flex-xl-nowrap"> ... </div>
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
flex-*-wrap
flex-wrap
<div class="d-flex flex-wrap"> ... </div>
<div class="d-flex flex-sm-wrap"> ... </div>
<div class="d-flex flex-md-wrap"> ... </div>
<div class="d-flex flex-lg-wrap"> ... </div>
<div class="d-flex flex-xl-wrap"> ... </div>
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
flex-*-wrap-reverse
flex-wrap-reverse
<div class="d-flex flex-wrap-reverse"> ... </div>
<div class="d-flex flex-sm-wrap-reverse"> ... </div>
<div class="d-flex flex-md-wrap-reverse"> ... </div>
<div class="d-flex flex-lg-wrap-reverse"> ... </div>
<div class="d-flex flex-xl-wrap-reverse"> ... </div>
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
flex-fill
flex-fill
<div class="d-flex text-white">
  <div class="p-2 flex-fill bg-primary">Flex item</div>
  <div class="p-2 flex-fill bg-success">Flex item</div>
  <div class="p-2 flex-fill bg-primary">Flex item</div>
</div>
Flex item
Flex item
Flex item
flex-*-grow-1
flex-grow-1
<div class="d-flex text-white">
  <div class="p-2 flex-grow-1 bg-primary">Flex item</div>
  <div class="p-2 bg-success">Flex item</div>
  <div class="p-2 bg-primary">Third flex item</div>
</div>

<div class="d-flex text-white mt-1">
  <div class="p-2 flex-sm-grow-1 bg-danger">Flex item</div>
  <div class="p-2 flex-md-grow-1 bg-warning">Flex item</div>
  <div class="p-2 flex-lg-grow-1 bg-danger">Flex item</div>
  <div class="p-2 flex-xl-grow-1 bg-warning">Flex item</div>
</div>
Flex item
Flex item
Third flex item
Flex item
Flex item
Flex item
Flex item
flex-*-grow-0
flex-grow-0
<div class="d-flex text-white">
  <div class="p-2 flex-grow-0 bg-primary">Flex item</div>
  <div class="p-2 bg-success">Flex item</div>
  <div class="p-2 bg-primary">Third flex item</div>
</div>

<div class="d-flex text-white mt-1">
  <div class="p-2 flex-sm-grow-0 bg-danger">Flex item</div>
  <div class="p-2 flex-md-grow-0 bg-warning">Flex item</div>
  <div class="p-2 flex-lg-grow-0 bg-danger">Flex item</div>
  <div class="p-2 flex-xl-grow-0 bg-warning">Flex item</div>
</div>
Flex item
Flex item
Third flex item
Flex item
Flex item
Flex item
Flex item
flex-*-shrink-1
flex-shrink-1
<div class="d-flex text-white">
  <div class="p-2 w-100 bg-primary">Flex item</div>
  <div class="p-2 flex-shrink-1 bg-success">Flex item</div>
</div>

<div class="d-flex text-white mt-2">
  <div class="p-2 w-100 bg-warning">Flex item</div>
  <div class="p-2 flex-sm-shrink-1 bg-danger">Flex item</div>
  <div class="p-2 flex-md-shrink-1 bg-warning">Flex item</div>
  <div class="p-2 flex-lg-shrink-1 bg-danger">Flex item</div>
  <div class="p-2 flex-xl-shrink-1 bg-warning">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
flex-*-shrink-0
flex-shrink-0
<div class="d-flex text-white">
  <div class="p-2 w-100 bg-primary">Flex item</div>
  <div class="p-2 flex-shrink-0 bg-success">Flex item</div>
</div>

<div class="d-flex text-white mt-2">
  <div class="p-2 w-100 bg-warning">Flex item</div>
  <div class="p-2 flex-sm-shrink-0 bg-danger">Flex item</div>
  <div class="p-2 flex-md-shrink-0 bg-warning">Flex item</div>
  <div class="p-2 flex-lg-shrink-0 bg-danger">Flex item</div>
  <div class="p-2 flex-xl-shrink-0 bg-warning">Flex item</div>
</div>
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
justify-content-*-start
justify-content-start
<div class="d-flex justify-content-start">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex justify-content-sm-start">...</div>
<div class="d-flex justify-content-md-start">...</div>
<div class="d-flex justify-content-lg-start">...</div>
<div class="d-flex justify-content-xl-start">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
justify-content-*-end
justify-content-end
<div class="d-flex justify-content-end">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex justify-content-sm-end">...</div>
<div class="d-flex justify-content-md-end">...</div>
<div class="d-flex justify-content-lg-end">...</div>
<div class="d-flex justify-content-xl-end">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
justify-content-*-center
justify-content-center
<div class="d-flex justify-content-center">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex justify-content-sm-center">...</div>
<div class="d-flex justify-content-md-center">...</div>
<div class="d-flex justify-content-lg-center">...</div>
<div class="d-flex justify-content-xl-center">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
justify-content-*-between
justify-content-between
<div class="d-flex justify-content-between">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex justify-content-sm-between">...</div>
<div class="d-flex justify-content-md-between">...</div>
<div class="d-flex justify-content-lg-between">...</div>
<div class="d-flex justify-content-xl-between">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
justify-content-*-around
justify-content-around
<div class="d-flex justify-content-around">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex justify-content-sm-around">...</div>
<div class="d-flex justify-content-md-around">...</div>
<div class="d-flex justify-content-lg-around">...</div>
<div class="d-flex justify-content-xl-around">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-content-*-start
align-content-start
<div class="d-flex flex-wrap align-content-start">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  ...
</div>

<!-- responsive variations -->
<div class="d-flex align-content-sm-start">...</div>
<div class="d-flex align-content-md-start">...</div>
<div class="d-flex align-content-lg-start">...</div>
<div class="d-flex align-content-xl-start">...</div>
Flex item
Flex item
Flex item
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align-content-*-end
align-content-end
<div class="d-flex flex-wrap align-content-end">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  ...
</div>

<!-- responsive variations -->
<div class="d-flex align-content-sm-end">...</div>
<div class="d-flex align-content-md-end">...</div>
<div class="d-flex align-content-lg-end">...</div>
<div class="d-flex align-content-xl-end">...</div>
Flex item
Flex item
Flex item
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align-content-*-center
align-content-center
<div class="d-flex flex-wrap align-content-center">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  ...
</div>

<!-- responsive variations -->
<div class="d-flex align-content-sm-center">...</div>
<div class="d-flex align-content-md-center">...</div>
<div class="d-flex align-content-lg-center">...</div>
<div class="d-flex align-content-xl-center">...</div>
Flex item
Flex item
Flex item
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align-content-*-around
align-content-around
<div class="d-flex flex-wrap align-content-around">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  ...
</div>

<!-- responsive variations -->
<div class="d-flex align-content-sm-around">...</div>
<div class="d-flex align-content-md-around">...</div>
<div class="d-flex align-content-lg-around">...</div>
<div class="d-flex align-content-xl-around">...</div>
Flex item
Flex item
Flex item
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align-content-*-stretch
align-content-stretch
<div class="d-flex flex-wrap align-content-stretch">
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  ...
</div>

<!-- responsive variations -->
<div class="d-flex align-content-sm-stretch">...</div>
<div class="d-flex align-content-md-stretch">...</div>
<div class="d-flex align-content-lg-stretch">...</div>
<div class="d-flex align-content-xl-stretch">...</div>
Flex item
Flex item
Flex item
...
...
...
...
...
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
align-items-*-start
align-items-start
<div class="d-flex align-items-start">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex align-items-sm-start">...</div>
<div class="d-flex align-items-md-start">...</div>
<div class="d-flex align-items-lg-start">...</div>
<div class="d-flex align-items-xl-start">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-items-*-end
align-items-end
<div class="d-flex align-items-end">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex align-items-sm-end">...</div>
<div class="d-flex align-items-md-end">...</div>
<div class="d-flex align-items-lg-end">...</div>
<div class="d-flex align-items-xl-end">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-items-*-center
align-items-center
<div class="d-flex align-items-center">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex align-items-sm-center">...</div>
<div class="d-flex align-items-md-center">...</div>
<div class="d-flex align-items-lg-center">...</div>
<div class="d-flex align-items-xl-center">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-items-*-baseline
align-items-baseline
<div class="d-flex align-items-baseline">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex align-items-sm-baseline">...</div>
<div class="d-flex align-items-md-baseline">...</div>
<div class="d-flex align-items-lg-baseline">...</div>
<div class="d-flex align-items-xl-baseline">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-items-*-stretch
align-items-stretch
<div class="d-flex align-items-stretch">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

<!-- responsive variations -->
<div class="d-flex align-items-sm-stretch">...</div>
<div class="d-flex align-items-md-stretch">...</div>
<div class="d-flex align-items-lg-stretch">...</div>
<div class="d-flex align-items-xl-stretch">...</div>
Flex item 1
Flex item 2
Flex item 3
...
...
...
...
Flex item 1
Flex item 2
Flex item 3
align-self-*-start
align-self-start
<div class="align-self-start">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-start">Aligned flex item</div>
<div class="align-self-md-start">Aligned flex item</div>
<div class="align-self-lg-start">Aligned flex item</div>
<div class="align-self-xl-start">Aligned flex item</div>
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Flex item 1
Aligned flex item
Flex item 3
align-self-*-end
align-self-end
<div class="align-self-end">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-end">Aligned flex item</div>
<div class="align-self-md-end">Aligned flex item</div>
<div class="align-self-lg-end">Aligned flex item</div>
<div class="align-self-xl-end">Aligned flex item</div>
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Flex item 1
Aligned flex item
Flex item 3
align-self-*-center
align-self-center
<div class="align-self-center">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-center">Aligned flex item</div>
<div class="align-self-md-center">Aligned flex item</div>
<div class="align-self-lg-center">Aligned flex item</div>
<div class="align-self-xl-center">Aligned flex item</div>
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Flex item 1
Aligned flex item
Flex item 3
align-self-*-baseline
align-self-baseline
<div class="align-self-baseline">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-baseline">Aligned flex item</div>
<div class="align-self-md-baseline">Aligned flex item</div>
<div class="align-self-lg-baseline">Aligned flex item</div>
<div class="align-self-xl-baseline">Aligned flex item</div>
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Flex item 1
Aligned flex item
Flex item 3
align-self-*-stretch
align-self-stretch
<div class="align-self-stretch">Aligned flex item</div>

<!-- responsive variations -->
<div class="align-self-sm-stretch">Aligned flex item</div>
<div class="align-self-md-stretch">Aligned flex item</div>
<div class="align-self-lg-stretch">Aligned flex item</div>
<div class="align-self-xl-stretch">Aligned flex item</div>
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Aligned flex item
Flex item 1
Aligned flex item
Flex item 3
order-*-#
order-3
<div class="d-flex flex-nowrap">
  <div class="order-8 p-2">First flex item</div>
  <div class="order-12 p-2">Second flex item</div>
  <div class="order-3 p-2">Third flex item</div>
</div>

<!-- responsive variations -->
<div class="order-sm-3">Flex item</div>
<div class="order-md-3">Flex item</div>
<div class="order-lg-3">Flex item</div>
<div class="order-xl-3">Flex item</div>
First flex item
Second flex item
Third flex item
Flex item
Flex item
Flex item
Flex item
First flex item
Second flex item
Third flex item
close
close
<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
embed-responsive
embed-responsive
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/48OJbbI0DfE" allowfullscreen></iframe>
</div>
shadow-none
shadow-none
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
No shadow
shadow-sm
shadow-sm
<div class="shadow-sm p-3 mb-5 bg-light rounded">Small Shadow shadow</div>
Small Shadow shadow
shadow
shadow
<div class="shadow p-3 mb-5 bg-light rounded">Regular shadow</div>
Regular shadow
shadow-lg
shadow-lg
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
Larger shadow
invisible
invisible
<div class="invisible">...</div>
No preview available for this one.
visible
visible
<div class="visible">...</div>
...
No preview available for this one.
sr-only
sr-only
<a class="sr-only" href="#content">Skip to main content</a>
No preview available for this one.
sr-only-focusable
sr-only-focusable
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
No preview available for this one.
align-*
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
baseline top middle bottom text-top text-bottom
clearfix
clearfix
<div class="clearfix">...</div>
...
No preview available for this one.
fixed-top
fixed-top
<div class="fixed-top bg-primary">Fixed top</div>
Fixed top
fixed-bottom
fixed-bottom
<div class="fixed-bottom bg-primary">Fixed bottom</div>
Fixed bottom
sticky-top
sticky-top
<div class="sticky-top bg-primary">Sticky top</div>
Sticky top
float-*-left
float-left
<div class="float-left">Float left on all viewport sizes</div>
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
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
<div class="float-right">Float right on all viewport sizes</div>
<div class="float-sm-right">Float right on viewports sized SM (small) or wider</div>
<div class="float-md-right">Float right on viewports sized MD (medium) or wider</div>
<div class="float-lg-right">Float right on viewports sized LG (large) or wider</div>
<div class="float-xl-right">Float right on viewports sized XL (extra-large) or wider</div>
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
float-none
<div class="float-none">Don't float on all viewport sizes</div>
<div class="float-sm-none">Don't float on viewports sized SM (small) or wider</div>
<div class="float-md-none">Don't float on viewports sized MD (medium) or wider</div>
<div class="float-lg-none">Don't float on viewports sized LG (large) or wider</div>
<div class="float-xl-none">Don't float on viewports sized XL (extra-large) or wider</div>
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
w-100
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
Width 25%
Width 50%
Width 75%
Width 100%
h-100
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
Height 25%
Height 50%
Height 75%
Height 100%
mw-100
mw-100
<img class="mw-100" src="# alt="Max-width 100%">
mh-100
mh-100
<img class="mh-100" src="# alt="Max-height 100%">
m-1 / m-*-#
m-1
<div class="m-0 bg-primary d-inline-block">Spaced Div</div>
<div class="m-1 bg-primary d-inline-block">Spaced Div</div>
<div class="m-2 bg-primary d-inline-block">Spaced Div</div>
<div class="m-3 bg-primary d-inline-block">Spaced Div</div>
<div class="m-4 bg-primary d-inline-block">Spaced Div</div>
<div class="m-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="m-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="m-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
mt-1 / mt-*-#
mt-1
<div class="mt-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mt-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="mt-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mt-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
mr-1 / mr-*-#
mr-1
<div class="mr-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mr-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="mr-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mr-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
mb-1 / mb-*-#
mb-1
<div class="mb-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mb-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="mb-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mb-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
ml-1 / ml-*-#
ml-1
<div class="ml-0 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-1 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-2 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-3 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-4 bg-primary d-inline-block">Spaced Div</div>
<div class="ml-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="ml-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="ml-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
mx-1 / mx-*-#
mx-1
<div class="mx-0 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-1 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-2 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-3 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-4 bg-primary d-inline-block">Spaced Div</div>
<div class="mx-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="mx-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="mx-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
my-1 / my-*-#
my-1
<div class="my-0 bg-primary d-inline-block">Spaced Div</div>
<div class="my-1 bg-primary d-inline-block">Spaced Div</div>
<div class="my-2 bg-primary d-inline-block">Spaced Div</div>
<div class="my-3 bg-primary d-inline-block">Spaced Div</div>
<div class="my-4 bg-primary d-inline-block">Spaced Div</div>
<div class="my-5 bg-primary d-inline-block">Spaced Div</div>

<!-- respsonsive viariations -->
<div class="my-sm-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-md-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-lg-5 d-inline-block bg-primary">Spaced Div</div>
<div class="my-xl-5 d-inline-block bg-primary">Spaced Div</div>
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
Spaced Div
m-n1 / m-*-n#
m-n1
<div class="m-n1 bg-primary d-inline-block">Negatively Spaced Div</div>
<!-- ... 1 to 5 -->
<div class="m-n5 bg-primary d-inline-block">Negatively Spaced Div</div>

<!-- directional viariations -->
<div class="mt-n4 bg-primary d-inline-block">Negatively Spaced Div</div>
<div class="mb-n5 bg-primary d-inline-block">Negatively Spaced Div</div>
<!-- ... t, b, r, l, x, y.. the whole gang-->

<!-- respsonsive viariations -->
<div class="m-sm-n3 d-inline-block bg-primary">Negatively Spaced Div</div>
<div class="m-md-n3 d-inline-block bg-primary">Negatively Spaced Div</div>
<div class="m-lg-n3 d-inline-block bg-primary">Negatively Spaced Div</div>
<div class="m-xl-n3 d-inline-block bg-primary">Negatively Spaced Div</div>
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
Negatively Spaced Div
p-1 / p-*-#
p-1
<div class="p-0 bg-primary d-inline-block">Padded Div</div>
<div class="p-1 bg-primary d-inline-block">Padded Div</div>
<div class="p-2 bg-primary d-inline-block">Padded Div</div>
<div class="p-3 bg-primary d-inline-block">Padded Div</div>
<div class="p-4 bg-primary d-inline-block">Padded Div</div>
<div class="p-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="p-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="p-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
pt-1 / pt-*-#
pt-1
<div class="pt-0 bg-primary d-inline-block">Padded Div</div>
<div class="pt-1 bg-primary d-inline-block">Padded Div</div>
<div class="pt-2 bg-primary d-inline-block">Padded Div</div>
<div class="pt-3 bg-primary d-inline-block">Padded Div</div>
<div class="pt-4 bg-primary d-inline-block">Padded Div</div>
<div class="pt-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="pt-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pt-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
pr-1 / pr-*-#
pr-1
<div class="pr-0 bg-primary d-inline-block">Padded Div</div>
<div class="pr-1 bg-primary d-inline-block">Padded Div</div>
<div class="pr-2 bg-primary d-inline-block">Padded Div</div>
<div class="pr-3 bg-primary d-inline-block">Padded Div</div>
<div class="pr-4 bg-primary d-inline-block">Padded Div</div>
<div class="pr-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="pr-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pr-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
pb-1 / pb-*-#
pb-1
<div class="pb-0 bg-primary d-inline-block">Padded Div</div>
<div class="pb-1 bg-primary d-inline-block">Padded Div</div>
<div class="pb-2 bg-primary d-inline-block">Padded Div</div>
<div class="pb-3 bg-primary d-inline-block">Padded Div</div>
<div class="pb-4 bg-primary d-inline-block">Padded Div</div>
<div class="pb-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="pb-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pb-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
pl-1 / pl-*-#
pl-1
<div class="pl-0 bg-primary d-inline-block">Padded Div</div>
<div class="pl-1 bg-primary d-inline-block">Padded Div</div>
<div class="pl-2 bg-primary d-inline-block">Padded Div</div>
<div class="pl-3 bg-primary d-inline-block">Padded Div</div>
<div class="pl-4 bg-primary d-inline-block">Padded Div</div>
<div class="pl-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="pl-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="pl-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
px-1 / px-*-#
px-1
<div class="px-0 bg-primary d-inline-block">Padded Div</div>
<div class="px-1 bg-primary d-inline-block">Padded Div</div>
<div class="px-2 bg-primary d-inline-block">Padded Div</div>
<div class="px-3 bg-primary d-inline-block">Padded Div</div>
<div class="px-4 bg-primary d-inline-block">Padded Div</div>
<div class="px-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="px-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="px-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
py-1 / py-*-#
py-1
<div class="py-0 bg-primary d-inline-block">Padded Div</div>
<div class="py-1 bg-primary d-inline-block">Padded Div</div>
<div class="py-2 bg-primary d-inline-block">Padded Div</div>
<div class="py-3 bg-primary d-inline-block">Padded Div</div>
<div class="py-4 bg-primary d-inline-block">Padded Div</div>
<div class="py-5 bg-primary d-inline-block">Padded Div</div>

<!-- respsonsive viariations -->
<div class="py-sm-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-md-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-lg-5 d-inline-block bg-primary">Padded Div</div>
<div class="py-xl-5 d-inline-block bg-primary">Padded Div</div>
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
Padded Div
font-weight-bold
font-weight-bold
<p class="font-weight-bold">Bold text.</p>

Bold text.

font-weight-bolder
font-weight-bolder
<p class="font-weight-bolder">Bold text.</p>

Bold text.

font-weight-light
font-weight-light
<p class="font-weight-light">Light text.</p>

Light text.

font-weight-lighter
font-weight-lighter
<p class="font-weight-lighter">Light text.</p>

Light text.

font-weight-normal
font-weight-normal
<p class="font-weight-normal">Normal weight text.</p>

Normal weight text.

text-decoration-none
text-decoration-none
<p class="text-decoration-none">This text is not decorated</p>

This text is not decorated

font-italic
font-italic
<p class="font-italic">Italicized text.</p>

Italicized text.

text-monospace
text-monospace
<p class="text-monospace">This is in monospace</p>

This is in monospace

text-justify
text-justify
<p class="text-justify">Justified text.</p>

Justified text.

text-nowrap
text-nowrap
<p class="text-nowrap">No wrap text.</p>

No wrap text.

text-*-left
text-left
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

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
text-right
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-right">Right aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-right">Right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-right">Right aligned text on viewports sized XL (extra-large) or wider.</p>

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
text-right
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-sm-center">Center aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-center">Center aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-center">Center aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-center">Center aligned text on viewports sized XL (extra-large) or wider.</p>

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
text-lowercase
<p class="text-lowercase">lowercased text.</p>

lowercased text.

text-uppercase
text-uppercase
<p class="text-uppercase">uppercased text.</p>

uppercased text.

text-capitalize
text-capitalize
<p class="text-capitalize">capitalized text.</p>

capitalized text.

text-truncate
text-truncate
<p class="text-truncate">truncated text.</p>

truncated text.

text-body
text-body
<p class="text-body">I'm a text with the default body color.</p>

I'm a text with the default body color.

text-black-50
text-black-50
<p class="text-black-50">I'm a text with 50% opacity black.</p>

I'm a text with 50% opacity black.

text-white-50
text-white-50
<p class="text-white-50 bg-danger">I'm a text with 50% opacity white</p>

I'm a text with 50% opacity white

text-muted
text-muted
<p class="text-muted"> Heron alap ceroau kesse elex ruta. Tauru hemed ela meliado egeb selof.</p>

Heron alap ceroau kesse elex ruta. Tauru hemed ela meliado egeb selof.

text-hide
text-hide
<!-- this class is deprecated and will be removed in v5 -->
<h1 class="text-hide">Custom heading</h1>

Custom heading

No preview available for this one.
text-break
text-break
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm