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.
- 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
<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.
<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.
<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.
Risa D. Pearson
Ann C. Thompson
Paul J. Friend
Sean C. Nguyen
<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
.img-fluid class to
your
<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.
.accordion-body, though the transition does limit overflow.
.accordion-body, though the transition does limit overflow.
.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>Alert Link Colors
Use the .alert-link utility class to quickly provide matching colored links within any alert.
<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>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-dismissibleclass, 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 theelement with it for proper behavior across all devices. - To animate alerts when dismissing them, be sure to add the
.fadeand.showclasses.
<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.
<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.
<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.
<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.
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.
<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
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.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2">button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3">button>
div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">First slide labelh5>
<p>Some representative placeholder content for the first slide.p>
div>
div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Second slide labelh5>
<p>Some representative placeholder content for the second slide.p>
div>
div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5 class="text-white">Third slide labelh5>
<p>Some representative placeholder content for the third slide.p>
div>
div>
div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true">span>
<span class="visually-hidden">Previousspan>
button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true">span>
<span class="visually-hidden">Nextspan>
button>
div>
Dropdowns
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
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Actiona>li>
<li><a class="dropdown-item" href="#">Another actiona>li>
<li><a class="dropdown-item" href="#">Something else herea>li>
ul>
div>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown link
a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Actiona>li>
<li><a class="dropdown-item" href="#">Another actiona>li>
<li><a class="dropdown-item" href="#">Something else herea>li>
ul>
div>
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Action
button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Actiona>li>
<li><a class="dropdown-item" href="#">Another actiona>li>
<li><a class="dropdown-item" href="#">Something else herea>li>
<li><hr class="dropdown-divider">li>
<li><a class="dropdown-item" href="#">Separated linka>li>
ul>
div>
<div class="btn-group">
<button type="button" class="btn btn-danger">Actionbutton>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdownspan>
button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Actiona>li>
<li><a class="dropdown-item" href="#">Another actiona>li>
<li><a class="dropdown-item" href="#">Something else herea>li>
<li><hr class="dropdown-divider">li>
<li><a class="dropdown-item" href="#">Separated linka>li>
ul>
div>
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.
- 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
Modal
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">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">Save changesbutton>
div>
div>
div>
div>
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>
Navs & Tabs
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 element. Because the .nav uses display: flex, the nav links behave the same as nav items would, but without the extra markup.
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
Navbar Basic
- Navbars require a wrapping
.navbarwith.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 arole="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 oraria-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".
<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.jswhich 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
titleandcontentvalues 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
.disabledordisabledelements 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-nowrapon yours 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.
<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.
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.jswhich 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
.disabledordisabledelements must be triggered on a wrapper element. - When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use
white-space: nowrap;on yours 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.
<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>