Bootstrap 4 Cheat Sheet

An interactive list of Bootstrap classes for version 4.1.3

Charming Teaser Charming Teaser
Give your Bootstrap 4 project a boost. Check out Charming, our full featured Bootstrap 4 template.
Checkout out my full collection of Bootstrap themes and templates

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-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>
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="#exampleModal">
  Launch centered demo modal
</button>

<!-- Modal -->
<div class="modal" id="exampleModalVertical" tabindex="-1" role="dialog" aria-labelledby="exampleModalVerticalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalVerticalLabel">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>
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.

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
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-circle
rounded-circle
<img class="rounded-circle" src="/images/pathToYourImage.png" alt="Circle image">
Circle image
Circle image
rounded-*
<img class="rounded-top" src="/images/pathToYourImage.png" alt="Circle image">
<img class="rounded-right" src="/images/pathToYourImage.png" alt="Circle image">
<img class="rounded-bottom" src="/images/pathToYourImage.png" alt="Circle image">
<img class="rounded-left" src="/images/pathToYourImage.png" alt="Circle image">
Circle image Circle image Circle image Circle image
Circle image Circle image Circle image Circle 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=