Skip to main content

Styleguide

Website style guide that provides guidelines and standards for the visual and functional elements of the website.

Typography

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading's larger, slightly more opinionated heading style.

Display 1

Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.

Display 2

In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.

Display 3

Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.

Display 4

Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.

Display 5

Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget.

Display 6

Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas.

                                                    <h1 class="display-1">Display 1h1>

<h1 class="display-2">Display 2h1>

<h1 class="display-3">Display 3h1>

<h1 class="display-4">Display 4h1>

<h1 class="display-5">Display 5h1>

<h1 class="display-6">Display 6h1>

Headings

All HTML headings,

through
, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

This is a Heading 1

Suspendisse vel quam malesuada, aliquet sem sit amet, fringilla elit. Morbi tempor tincidunt tempor. Etiam id turpis viverra, vulputate sapien nec, varius sem. Curabitur ullamcorper fringilla eleifend. In ut eros hendrerit est consequat posuere et at velit.

This is a Heading 2

In nec rhoncus eros. Vestibulum eu mattis nisl. Quisque viverra viverra magna nec pulvinar. Maecenas pellentesque porta augue, consectetur facilisis diam porttitor sed. Suspendisse tempor est sodales augue rutrum tincidunt. Quisque a malesuada purus.

This is a Heading 3

Vestibulum auctor tincidunt semper. Phasellus ut vulputate lacus. Suspendisse ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.

This is a Heading 4

Nulla et mattis nunc. Curabitur scelerisque commodo condimentum. Mauris blandit, velit a consectetur egestas, diam arcu fermentum justo, eget ultrices arcu eros vel erat.

This is a Heading 5

Quisque nec turpis at urna dictum luctus. Suspendisse convallis dignissim eros at volutpat. In egestas mattis dui. Aliquam mattis dictum aliquet. Nulla sapien mauris, eleifend et sem ac, commodo dapibus odio. Vivamus pretium nec odio cursus elementum. Suspendisse molestie ullamcorper ornare.

This is a Heading 6

Donec ultricies, lacus id tempor condimentum, orci leo faucibus sem, a molestie libero lectus ac justo. ultricies mi eros, sit amet tempor nulla varius sed. Proin nisl nisi, feugiat quis bibendum vitae, dapibus in tellus.

                                                    <h1>h1. Bootstrap headingh1>
<h2>h2. Bootstrap headingh2>
<h3>h3. Bootstrap headingh3>
<h4>h4. Bootstrap headingh4>
<h5>h5. Bootstrap headingh5>
<h6>h6. Bootstrap headingh6>



<p class="h1">h1. Bootstrap headingp>
<p class="h2">h2. Bootstrap headingp>
<p class="h3">h3. Bootstrap headingp>
<p class="h4">h4. Bootstrap headingp>
<p class="h5">h5. Bootstrap headingp>
<p class="h6">h6. Bootstrap headingp>

Inline text elements

Styling for common inline HTML5 elements.

Your title goes here

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

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

This line of text will render as underlined

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

This line rendered as bold text.

This line rendered as italicized text.

Nulla attr vitae elit libero, a pharetra augue.
                                                    <p class="lead">
Your title goes here
p>

<p>You can use the mark tag to <mark>highlightmark> text.p>
<p><del>This line of text is meant to be treated as deleted text.del>p>
<p><s>This line of text is meant to be treated as no longer accurate.s>p>
<p><ins>This line of text is meant to be treated as an addition to the document.ins>p>
<p><u>This line of text will render as underlinedu>p>
<p><small>This line of text is meant to be treated as fine print.small>p>
<p><strong>This line rendered as bold text.strong>p>
<p><em>This line rendered as italicized text.em>p>
Nulla <abbr title="attribute">attrabbr> vitae elit libero, a pharetra augue.

Contextual Text Colors

Available color variations.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

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

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

Nullam id dolor id nibh ultricies vehicula ut id elit.

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

                                                    <p class="text-muted">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
p>
<p class="text-primary">
Nullam id dolor id nibh ultricies vehicula ut id elit.
p>
<p class="text-success">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
p>
<p class="text-info">
Maecenas sed diam eget risus varius blandit sit amet non magna.
p>
<p class="text-warning">
Etiam porta sem malesuada magna mollis euismod.
p>
<p class="text-danger">
Donec ullamcorper nulla non metus auctor fringilla.
p>
<p class="text-dark">
Nullam id dolor id nibh ultricies vehicula ut id elit.
p>
<p class="text-white">
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
p>
<p class="text-black-50">
Nullam id dolor id nibh ultricies vehicula ut id elit.
p>
<p class="text-white-50">
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
p>

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
                                                    <ul>
<li>
Lorem ipsum dolor sit amet
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>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
                                                    <ol>
<li>
Lorem ipsum dolor sit amet
li>
<li>
Facilisis in pretium nisl aliquet
li>
<li>
Nulla volutpat aliquam velit
<ol>
<li>
Phasellus iaculis neque
li>
<li>
Purus sodales ultricies
li>
ol>
li>
<li>
Faucibus porta lacus fringilla vel
li>
<li>
Eget porttitor lorem
li>
ol>

Unstyled

This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

  • Lorem ipsum dolor sit amet
  • Integer molestie lorem at massa
    • Phasellus iaculis neque
  • Faucibus porta lacus fringilla vel
  • Eget porttitor lorem
Inline

Place all list items on a single line with display: inline-block; and some light padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
                                                    <ul class="list-unstyled">
<li>
Lorem ipsum dolor sit amet
li>
<li>
Integer molestie lorem at massa
<ul>
<li>
Phasellus iaculis neque
li>
ul>
li>
<li>
Faucibus porta lacus fringilla vel
li>
<li>
Eget porttitor lorem
li>
ul>



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

Blockquotes

For quoting blocks of content from another source within your document. Wrap

around any HTML as the quote.

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

Use text utilities as needed to change the alignment of your blockquote.

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

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

                                                    
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>
<figcaption class="blockquote-footer">Someone famous in <cite title="Source Title">Source Titlecite>figcaption>


<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>
<figcaption class="blockquote-footer text-center">Someone famous in <cite title="Source Title">Source Titlecite>figcaption>


<blockquote class="blockquote text-end">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.p>
blockquote>
<figcaption class="blockquote-footer text-end">Someone famous in <cite title="Source Title">Source Titlecite>figcaption>

Description list alignment

Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
                                                    <dl class="row mb-0">
<dt class="col-sm-3">Description listsdt>
<dd class="col-sm-9">A description list is perfect for defining terms.dd>

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

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

<dt class="col-sm-3 text-truncate">Truncated term is truncateddt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.dd>

<dt class="col-sm-3">Nestingdt>
<dd class="col-sm-9">
<dl class="row mb-0">
<dt class="col-sm-4">Nested definition listdt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.dd>
dl>
dd>
dl>

Images

Responsive Images

Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

Placeholder Responsive image
<img src="..." class="img-fluid" alt="...">

Image Thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200
<img src="..." class="img-thumbnail" alt="...">

Tables

Basic example

For basic styling-light padding and only horizontal dividers-add the base class .table to any

.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Linda G. Smith 606-253-1207 May 3, 1962
                                                    <table class="table table-centered mb-0">
<thead>
<tr>
<th>Nameth>
<th>Phone Numberth>
<th>Date of Birthth>
<th>Active?th>
tr>
thead>
<tbody>
<tr>
<td>Risa D. Pearsontd>
<td>336-508-2157td>
<td>July 24, 1950td>
<td>

<div>
<input type="checkbox" id="switch1" checked data-switch="success"/>
<label for="switch1" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Ann C. Thompsontd>
<td>646-473-2057td>
<td>January 25, 1959td>
<td>

<div>
<input type="checkbox" id="switch2" checked data-switch="success"/>
<label for="switch2" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Paul J. Friendtd>
<td>281-308-0793td>
<td>September 1, 1939td>
<td>

<div>
<input type="checkbox" id="switch3" data-switch="success"/>
<label for="switch3" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Linda G. Smithtd>
<td>606-253-1207td>
<td>May 3, 1962td>
<td>

<div>
<input type="checkbox" id="switch4" data-switch="success"/>
<label for="switch4" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
tbody>
table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

User Account No. Balance Action
table-user Risa D. Pearson AC336 508 2157 July 24, 1950
table-user Ann C. Thompson SB646 473 2057 January 25, 1959
table-user Paul J. Friend DL281 308 0793 September 1, 1939
table-user Sean C. Nguyen CA269 714 6825 February 5, 1994
                                                    <table class="table table-bordered table-centered mb-0">
<thead>
<tr>
<th>Userth>
<th>Account No.th>
<th>Balanceth>
<th class="text-center">Actionth>
tr>
thead>
<tbody>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-6.jpg" alt="table-user" class="me-2 rounded-circle" />
Risa D. Pearson
td>
<td>AC336 508 2157td>
<td>July 24, 1950td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete">i>a>
td>
tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-7.jpg" alt="table-user" class="me-2 rounded-circle" />
Ann C. Thompson
td>
<td>SB646 473 2057td>
<td>January 25, 1959td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete">i>a>
td>
tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-8.jpg" alt="table-user" class="me-2 rounded-circle" />
Paul J. Friend
td>
<td>DL281 308 0793td>
<td>September 1, 1939td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete">i>a>
td>
tr>
<tr>
<td class="table-user">
<img src="assets/images/users/avatar-9.jpg" alt="table-user" class="me-2 rounded-circle" />
Sean C. Nguyen
td>
<td>CA269 714 6825td>
<td>February 5, 1994td>
<td class="table-action text-center">
<a href="javascript: void(0);" class="action-icon"> <i class="mdi mdi-delete">i>a>
td>
tr>
tbody>
table>

Always responsive

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

# Heading Heading Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell Cell Cell
                                                    <table class="table mb-0">
<thead>
<tr>
<th scope="col">#th>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
<th scope="col">Headingth>
tr>
thead>
<tbody>
<tr>
<th scope="row">1th>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
tr>
<tr>
<th scope="row">2th>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
tr>
<tr>
<th scope="row">3th>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
<td>Celltd>
tr>
tbody>
table>

Inverse table

You can also invert the colors-with light text on dark backgrounds-with .table-dark.

Name Phone Number Date of Birth Active?
Risa D. Pearson 336-508-2157 July 24, 1950
Ann C. Thompson 646-473-2057 January 25, 1959
Paul J. Friend 281-308-0793 September 1, 1939
Sean C. Nguyen 269-714-6825 February 5, 1994
                                                    <table class="table table-dark mb-0">
<thead>
<tr>
<th>Nameth>
<th>Phone Numberth>
<th>Date of Birthth>
<th>Active?th>
tr>
thead>
<tbody>
<tr>
<td>Risa D. Pearsontd>
<td>336-508-2157td>
<td>July 24, 1950td>
<td>

<div>
<input type="checkbox" id="switch6" data-switch="success"/>
<label for="switch6" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Ann C. Thompsontd>
<td>646-473-2057td>
<td>January 25, 1959td>
<td>

<div>
<input type="checkbox" id="switch7" checked data-switch="success"/>
<label for="switch7" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Paul J. Friendtd>
<td>281-308-0793td>
<td>September 1, 1939td>
<td>

<div>
<input type="checkbox" id="switch8" data-switch="success"/>
<label for="switch8" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
<tr>
<td>Sean C. Nguyentd>
<td>269-714-6825td>
<td>February 5, 1994td>
<td>

<div>
<input type="checkbox" id="switch10" checked data-switch="success"/>
<label for="switch10" data-on-label="Yes" data-off-label="No" class="mb-0 d-block">label>
div>
td>
tr>
tbody>
table>

Figures

Use the included .figure, .figure-img and .figure-caption classes to provide some baseline styles for the HTML5

and
elements. Images in figures have no explicit size, so be sure to add the .img-fluid class to your to make it responsive.

Placeholder 400x300
A caption for the above image.
<figure class="figure">
        <img src="..." class="figure-img img-fluid rounded" alt="...">
        <figcaption class="figure-caption">A caption for the above image.figcaption>
figure>

Accordions

Basic Accordion

The accordion uses collapse internally to make it collapsible. To render an accordion that's expanded, add the .open class on the .accordion.

View Documentation

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
<div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
              Accordion Item #1
            button>
          h2>
          <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the first item's accordion body.strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
            div>
          div>
        div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Accordion Item #2
            button>
          h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the second item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
            div>
          div>
        div>
        <div class="accordion-item">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Accordion Item #3
            button>
          h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <strong>This is the third item's accordion body.strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-bodycode>, though the transition does limit overflow.
            div>
          div>
        div>
      div>

Alerts

Alert Colors

Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success). For inline dismissal, use the alerts JavaScript plugin.

<div class="alert alert-primary" role="alert">
        A simple primary alert-check it out!
      div>
      <div class="alert alert-secondary" role="alert">
        A simple secondary alert-check it out!
      div>
      <div class="alert alert-success" role="alert">
        A simple success alert-check it out!
      div>
      <div class="alert alert-danger" role="alert">
        A simple danger alert-check it out!
      div>
      <div class="alert alert-warning" role="alert">
        A simple warning alert-check it out!
      div>
      <div class="alert alert-info" role="alert">
        A simple info alert-check it out!
      div>
      <div class="alert alert-light" role="alert">
        A simple light alert-check it out!
      div>
      <div class="alert alert-dark" role="alert">
        A simple dark alert—check it out!
      div>

Use the .alert-link utility class to quickly provide matching colored links within any alert.

Alert Icon

Similarly, you can use flexbox utilities and Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.

<div class="alert alert-primary d-flex align-items-center" role="alert">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
          <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
        svg>
        <div>
          An example alert with an icon
        div>
      div>

Alert Dismissing

  • Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
  • Add a close button and the .alert-dismissible class, which adds extra padding to the right of the alert and positions the close button.
  • On the close button, add the data-bs-dismiss="alert" attribute, which triggers the JavaScript functionality. Be sure to use the element with it for proper behavior across all devices.
  • To animate alerts when dismissing them, be sure to add the .fade and .show classes.

View Documentation

<div class="alert alert-warning alert-dismissible fade show" role="alert">
        <strong>Holy guacamole!strong> You should check in on some of those fields below.
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">button>
      div>

Badge

Badge Colors

Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default .bg-light, you'll likely need a text color utility like .text-dark for proper styling. This is because background utilities do not set anything but background-color.

View Documentation

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge bg-primary">Primaryspan>
    <span class="badge bg-secondary">Secondaryspan>
    <span class="badge bg-success">Successspan>
    <span class="badge bg-danger">Dangerspan>
    <span class="badge bg-warning text-dark">Warningspan>
    <span class="badge bg-info text-dark">Infospan>
    <span class="badge bg-light text-dark">Lightspan>
    <span class="badge bg-dark">Darkspan>

Badge Pill

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

View Documentation

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge rounded-pill bg-primary">Primaryspan>
        <span class="badge rounded-pill bg-secondary">Secondaryspan>
        <span class="badge rounded-pill bg-success">Successspan>
        <span class="badge rounded-pill bg-danger">Dangerspan>
        <span class="badge rounded-pill bg-warning text-dark">Warningspan>
        <span class="badge rounded-pill bg-info text-dark">Infospan>
        <span class="badge rounded-pill bg-light text-dark">Lightspan>
        <span class="badge rounded-pill bg-dark">Darkspan>

Buttons

Button Styles

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

View Documentation

Button Groups

<button type="button" class="btn btn-primary">Primarybutton>
        <button type="button" class="btn btn-secondary">Secondarybutton>
        <button type="button" class="btn btn-success">Successbutton>
        <button type="button" class="btn btn-danger">Dangerbutton>
        <button type="button" class="btn btn-warning">Warningbutton>
        <button type="button" class="btn btn-info">Infobutton>
        <button type="button" class="btn btn-light">Lightbutton>
        <button type="button" class="btn btn-dark">Darkbutton>
        
        <button type="button" class="btn btn-link">Linkbutton>
<button type="button" class="btn btn-outline-primary">Primarybutton>
        <button type="button" class="btn btn-outline-secondary">Secondarybutton>
        <button type="button" class="btn btn-outline-success">Successbutton>
        <button type="button" class="btn btn-outline-danger">Dangerbutton>
        <button type="button" class="btn btn-outline-warning">Warningbutton>
        <button type="button" class="btn btn-outline-info">Infobutton>
        <button type="button" class="btn btn-outline-light text-dark">Lightbutton>
        <button type="button" class="btn btn-outline-dark">Darkbutton>
<button type="button" class="btn btn-primary btn-lg">Large buttonbutton>
        <button type="button" class="btn btn-secondary btn-lg">Large buttonbutton>
<button type="button" class="btn btn-primary btn-sm">Small buttonbutton>
        <button type="button" class="btn btn-secondary btn-sm">Small buttonbutton>

Card

Card Basic

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so use spacing utilities as needed.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

View Documentation

PlaceholderImage
Card title

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

Go somewhere

    <div class="card" style="width: 18rem;">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card titleh5>
            <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 somewherea>
        div>
    div>
    

Card Image Overlays

Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.

PlaceholderCard image
Card title

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

Last updated 3 mins ago


    <div class="card bg-dark text-white">
        <img src="..." class="card-img" alt="...">
        <div class="card-img-overlay">
            <h5 class="card-title">Card titleh5>
            <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>
            <p class="card-text">Last updated 3 mins agop>
        div>
    div>

Carousel with Captions

Add captions to your slides easily with the .carousel-caption element within any .carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional display utilities. We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block.

Dropdowns

Wrap the dropdown's toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from or elements to better fit your potential needs. The examples shown here use semantic

    elements where appropriate, but custom markup is supported.

    View Documentation

    List Group

    List Basic

    The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.

    View Documentation

    • An item
    • A second item
    • A third item
    • A fourth item
    • And a fifth one
    <ul class="list-group">
        <li class="list-group-item">An itemli>
        <li class="list-group-item">A second itemli>
        <li class="list-group-item">A third itemli>
        <li class="list-group-item">A fourth itemli>
        <li class="list-group-item">And a fifth oneli>
    ul>
    

    List Flush

    Add .list-group-flush to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).

    • An item
    • A second item
    • A third item
    • A fourth item
    • And a fifth one
    <ul class="list-group list-group-flush">
            <li class="list-group-item">An itemli>
            <li class="list-group-item">A second itemli>
            <li class="list-group-item">A third itemli>
            <li class="list-group-item">A fourth itemli>
            <li class="list-group-item">And a fifth oneli>
          ul>
        

    Modal

    Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

    View Documentation

    Modal Static Backdrop

    When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.

    
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
              Launch static backdrop modal
            button>
            
            
            <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal titleh5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">button>
                  div>
                  <div class="modal-body">
                    ...
                  div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Closebutton>
                    <button type="button" class="btn btn-primary">Understoodbutton>
                  div>
                div>
              div>
            div>
            

    Base Nav

    Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.

    The base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.

    Classes are used throughout, so your markup can be super flexible. Use

      s like above,
        if the order of your items is important, or roll your own with a element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.

        View Documentation

        
            <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Activea>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Linka>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Linka>
                li>
                <li class="nav-item">
                  <a class="nav-link disabled">Disableda>
                li>
              ul>
            

        Nav Vertical

        Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

        Tabs

        Takes the basic nav from above and adds the .nav-tabs class to generate a tabbed interface. Use them to create tabbable regions with our tab JavaScript plugin.

        This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

        This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

        This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

        
                <nav>
                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                  <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Homebutton>
                  <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profilebutton>
                  <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contactbutton>
                div>
              nav>
              <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...div>
                div>
                
                

        Pills

        Take that same HTML, but use .nav-pills instead:

        <ul class="nav nav-pills">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Activea>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Linka>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Linka>
                li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
                li>
              ul>

        Fill and Justify

        Force your .nav's contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

        <ul class="nav nav-pills nav-fill">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">Activea>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Much longer nav linka>
                li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Linka>
                li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disableda>
                li>
              ul>

        Navbar Basic

        • Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl|-xxl} for responsive collapsing and color scheme classes.
        • Navbars and their contents are fluid by default. Change the container to limit their horizontal width in different ways.
        • Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
        • Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
        • Ensure accessibility by using a element or, if using a more generic element such as a
          , add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
        • Indicate the current item by using aria-current="page" for the current page or aria-current="true" for the current item in a set.

        Pagination

        Pagination Basic

        We use a large block of connected links for our pagination, making links hard to miss and easily scalable—all while providing large hit areas. Pagination is built with list HTML elements so screen readers can announce the number of available links. Use a wrapping

        element to identify it as a navigation section to screen readers and other assistive technologies.

        In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive aria-label for the

        to reflect its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

        View Documentation

        <nav aria-label="Page navigation example">
                <ul class="pagination">
                  <li class="page-item"><a class="page-link" href="#">Previousa>li>
                  <li class="page-item"><a class="page-link" href="#">1a>li>
                  <li class="page-item"><a class="page-link" href="#">2a>li>
                  <li class="page-item"><a class="page-link" href="#">3a>li>
                  <li class="page-item"><a class="page-link" href="#">Nexta>li>
                ul>
              nav>

        Popovers

        Popover Toggle

        • Popovers rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for popovers to work!
        • Popovers require the tooltip plugin as a dependency.
        • Popovers are opt-in for performance reasons, so you must initialize them yourself.
        • Zero-length title and content values will never show a popover.
        • Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
        • Triggering popovers on hidden elements will not work.
        • Popovers for .disabled or disabled elements must be triggered on a wrapper element.
        • When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use .text-nowrap on your s to avoid this behavior.
        • Popovers must be hidden before their corresponding elements have been removed from the DOM.
        • Popovers can be triggered thanks to an element inside a shadow DOM.

        View Documentation

        <button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popoverbutton>

        Popover Directions

        Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.

        <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
                Popover on top
              button>
              <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
                Popover on right
              button>
              <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
                Popover on bottom
              button>
              <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
                Popover on left
              button>

        Scrollspy

        Scrollspy in Navbar

        Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.

        First heading

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Second heading

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Third heading

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Fourth heading

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Fifth heading

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        <nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
                <a class="navbar-brand" href="#">Navbara>
                <ul class="nav nav-pills">
                  <li class="nav-item">
                    <a class="nav-link" href="#scrollspyHeading1">Firsta>
                  li>
                  <li class="nav-item">
                    <a class="nav-link" href="#scrollspyHeading2">Seconda>
                  li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdowna>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="#scrollspyHeading3">Thirda>li>
                      <li><a class="dropdown-item" href="#scrollspyHeading4">Fourtha>li>
                      <li><hr class="dropdown-divider">li>
                      <li><a class="dropdown-item" href="#scrollspyHeading5">Fiftha>li>
                    ul>
                  li>
                ul>
              nav>
              <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
                <h4 id="scrollspyHeading1">First headingh4>
                <p>...p>
                <h4 id="scrollspyHeading2">Second headingh4>
                <p>...p>
                <h4 id="scrollspyHeading3">Third headingh4>
                <p>...p>
                <h4 id="scrollspyHeading4">Fourth headingh4>
                <p>...p>
                <h4 id="scrollspyHeading5">Fifth headingh4>
                <p>...p>
              div>
              

        Scrollspy List Group

        Scrollspy also works with .list-groups. Scroll the area next to the list group and watch the active class change.

        View Documentation

        Item 1

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Item 2

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Item 3

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        Item 4

        This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.

        <div id="list-example" class="list-group">
                <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1a>
                <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2a>
                <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3a>
                <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4a>
              div>
              <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
                <h4 id="list-item-1">Item 1h4>
                <p>...p>
                <h4 id="list-item-2">Item 2h4>
                <p>...p>
                <h4 id="list-item-3">Item 3h4>
                <p>...p>
                <h4 id="list-item-4">Item 4h4>
                <p>...p>
              div>
              

        Tooltips

        Tooltips with Buttons

        • Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper in order for tooltips to work!
        • Tooltips are opt-in for performance reasons, so you must initialize them yourself.
        • Tooltips with zero-length titles are never displayed.
        • Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
        • Triggering tooltips on hidden elements will not work.
        • Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
        • When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your s to avoid this behavior.
        • Tooltips must be hidden before their corresponding elements have been removed from the DOM.
        • Tooltips can be triggered thanks to an element inside a shadow DOM.

        View Documentation

        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
            Tooltip on top
            button>
            <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
            Tooltip on right
            button>
            <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
            Tooltip on bottom
            button>
            <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
            Tooltip on left
            button>
            
        ­