- This is the first 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 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.
-
-
-
-
-
-
-
-
-
<divclass="accordion"id="accordionExample">
- <divclass="accordion-item">
- <h2class="accordion-header"id="headingOne">
- <buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
- Accordion Item #1
- </button>
- </h2>
- <divid="collapseOne"class="accordion-collapse collapse show"aria-labelledby="headingOne"data-bs-parent="#accordionExample">
- <divclass="accordion-body">
- <strong>This is the first 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-body</code>, though the transition does limit overflow.
- </div>
- </div>
- </div>
- <divclass="accordion-item">
- <h2class="accordion-header"id="headingTwo">
- <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
- Accordion Item #2
- </button>
- </h2>
- <divid="collapseTwo"class="accordion-collapse collapse"aria-labelledby="headingTwo"data-bs-parent="#accordionExample">
- <divclass="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-body</code>, though the transition does limit overflow.
- </div>
- </div>
- </div>
- <divclass="accordion-item">
- <h2class="accordion-header"id="headingThree">
- <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
- Accordion Item #3
- </button>
- </h2>
- <divid="collapseThree"class="accordion-collapse collapse"aria-labelledby="headingThree"data-bs-parent="#accordionExample">
- <divclass="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-body</code>, though the transition does limit overflow.
- </div>
- </div>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Flush
-
Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the first item's accordion body.
-
-
-
-
-
-
-
-
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
-
-
-
-
-
-
-
-
Placeholder content for this accordion, which is intended to demonstrate the .accordion-flush class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just
- filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
-
-
-
-
-
-
-
-
<divclass="accordion accordion-flush"id="accordionFlushExample">
- <divclass="accordion-item">
- <h2class="accordion-header"id="flush-headingOne">
- <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseOne"aria-expanded="false"aria-controls="flush-collapseOne">
- Accordion Item #1
- </button>
- </h2>
- <divid="flush-collapseOne"class="accordion-collapse collapse"aria-labelledby="flush-headingOne"data-bs-parent="#accordionFlushExample">
- <divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
- </div>
- </div>
- <divclass="accordion-item">
- <h2class="accordion-header"id="flush-headingTwo">
- <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseTwo"aria-expanded="false"aria-controls="flush-collapseTwo">
- Accordion Item #2
- </button>
- </h2>
- <divid="flush-collapseTwo"class="accordion-collapse collapse"aria-labelledby="flush-headingTwo"data-bs-parent="#accordionFlushExample">
- <divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
- </div>
- </div>
- <divclass="accordion-item">
- <h2class="accordion-header"id="flush-headingThree">
- <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseThree"aria-expanded="false"aria-controls="flush-collapseThree">
- Accordion Item #3
- </button>
- </h2>
- <divid="flush-collapseThree"class="accordion-collapse collapse"aria-labelledby="flush-headingThree"data-bs-parent="#accordionFlushExample">
- <divclass="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
- </div>
- </div>
- </div>
- Bootstrap alerts are feedback messages which are displayed after specific actions preceded by the user. Length of the text is not limited.
-
-
-
-
-
-
-
-
-
Simple Alert
-
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight required contextual classes (e.g.,
- .alert-success).
-
<divclass="alert alert-primary"role="alert">
- This is a primary alert—check it out!
-</div>
-<divclass="alert alert-secondary"role="alert">
- This is a secondary alert—check it out!
-</div>
-<divclass="alert alert-success"role="alert">
- This is a success alert—check it out!
-</div>
-<divclass="alert alert-danger"role="alert">
- This is a danger alert—check it out!
-</div>
-<divclass="alert alert-warning"role="alert">
- This is a warning alert—check it out!
-</div>
-<divclass="alert alert-info"role="alert">
- This is a info alert—check it out!
-</div>
-<divclass="alert alert-light"role="alert">
- This is a light alert—check it out!
-</div>
-<divclass="alert alert-dark"role="alert">
- This is a dark alert—check it out!
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Link color
-
Use the .alert-link utility class to quickly provide matching colored links within any alert.
- A simple primary alert with an
- example link. Give it a click if you like.
-
-
- A simple secondary alert with an
- example link. Give it a click if you like.
-
-
- A simple success alert with an
- example link. Give it a click if you like.
-
-
- A simple danger alert with an example
- link. Give it a click if you like.
-
-
- A simple warning alert with an
- example link. Give it a click if you like.
-
-
- A simple info alert with an example
- link. Give it a click if you like.
-
-
- A simple light alert with an example
- link. Give it a click if you like.
-
-
- A simple dark alert with an example
- link. Give it a click if you like.
-
-
-
-
-
-
<divclass="alert alert-primary"role="alert">
-A simple primary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-secondary"role="alert">
-A simple secondary alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-success"role="alert">
-A simple success alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-danger"role="alert">
-A simple danger alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-warning"role="alert">
-A simple warning alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-info"role="alert">
-A simple info alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-light"role="alert">
-A simple light alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-<divclass="alert alert-dark"role="alert">
-A simple dark alert with <ahref="#"class="alert-link">an example link</a>. Give it a click if you like.
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Additional content
-
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
-
-
-
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
-
-
-
-
-
-
-
<divclass="alert alert-success"role="alert">
-<h4class="alert-heading">Well done!</h4>
-<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
-<hr>
-<pclass="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Icons
-
Similarly, you can use Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
- Holy guacamole! You should check in on some of those fields below.
-
-
-
-
-
-
-
-
<divclass="alert alert-warning alert-dismissible fade show"role="alert">
-<strong>Holy guacamole!</strong> You should check in on some of those fields below.
-<buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close">
- <spanaria-hidden="true">×</span>
-</button>
-</div>
- Use the
- .rounded-pill
- modifier class to make badges more rounded (with a
- larger
- border-radius and
- additional horizontal
- padding). Useful
- if you miss the badges from v3.
-
Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may
- apply a slightly different rendering).
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.
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment,
- and responsive behaviors.
Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility.
- Resize your browser to see them change.
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re
- no longer stacked.
Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a
- pseudo-class. However, you can still force the same active appearance with .active (and include the
- aria-pressed="true" attribute) should you need to replicate the state programmatically.
-
Add data-bs-toggle="button" to toggle a button’s active state. If you’re pre-toggling a button, you must manually add the .active class and
- aria-pressed="true" to the <button>.
<divclass="card"style="width: 20rem;">
- <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="">
- <divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Card Body
-
The building block of a card is the .card-body. Use it whenever you need a padded section within a card.
<divclass="card">
- <divclass="card-body">
- This is some text within a card body.
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Titles, text, and links
-
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding
- .card-link to an <a> tag.
-
Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the
- .card-subtitle items are placed in a
- .card-body item, the card title and subtitle are aligned nicely.
-
<divclass="card"style="width: 18rem;">
- <divclass="card-body">
- <h5class="card-title">Card title</h5>
- <h6class="card-subtitle mb-2 text-muted">Card subtitle</h6>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- <ahref="#"class="card-link">Card link</a>
- <ahref="#"class="card-link">Another link</a>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Images
-
.card-img-top places an image to the top of the card. With
- .card-text, text can be added to the card. Text within
- .card-text can also be styled with the standard HTML tags.
-
Some quick example text to build on the card title and make up the bulk of the card's content.
-
-
-
-
-
-
-
<divclass="card"style="width: 20rem;">
- <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
- <divclass="card-body">
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Kitchen sink
-
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
-
<divclass="card"style="width: 20rem;">
- <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
- <divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
- </div>
- <ulclass="list-group list-group-flush">
- <liclass="list-group-item">Cras justo odio</li>
- <liclass="list-group-item">Dapibus ac facilisis in</li>
- <liclass="list-group-item">Vestibulum at eros</li>
- </ul>
- <divclass="card-body">
- <ahref="#"class="card-link">Card link</a>
- <ahref="#"class="card-link">Another link</a>
- </div>
- </div>
<divclass="card"style="width: 18rem;">
- <divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
- </div>
- </div>
- <divclass="card text-center"style="width: 18rem;">
- <divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
- </div>
- </div>
- <divclass="card text-end"style="width: 18rem;">
- <divclass="card-body">
- <h5class="card-title">Special title treatment</h5>
- <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
- <ahref="#"class="btn btn-primary">Go somewhere</a>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Images
-
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
-
-
Image caps
-
Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.
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
-
-
-
-
-
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
-
-
-
-
-
-
-
-
<divclass="card mb-3">
- <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-bottom"alt="...">
- <divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="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>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
- </div>
- </div>
- <divclass="card">
- <divclass="card-body">
- <h5class="card-title">Card title</h5>
- <pclass="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>
- <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
- </div>
- <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
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.
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
-
-
-
-
-
-
-
<divclass="card bg-dark text-white">
- <imgsrc="..."class="rounded-1"alt="...">
- <divclass="card-img-overlay">
- <h5class="card-title">Card title</h5>
- <pclass="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>
- <pclass="card-text">Last updated 3 mins ago</p>
- </div>
- </div>
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.
Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions and controls
- have additional Sass variables that customize the color and slide-img-color.
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-
-
-
-
-
-
-
<p>
- <aclass="btn btn-primary"data-bs-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">
- Link with href
- </a>
- <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">
- Button with data-bs-target
- </button>
-</p>
-<divclass="collapse"id="collapseExample">
- <divclass="card card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
- </div>
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Multiple targets
-
A <button> or <a> can show and hide multiple elements by referencing them with a JQuery selector in its href or data-bs-target attribute. Multiple <button> or <a> can show and hide an element if they each reference
- it with their href or data-bs-target attribute
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-
-
-
-
-
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
-
-
-
-
-
-
-
-
-
<p>
- <aclass="btn btn-primary"data-bs-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a>
- <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button>
- <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
-</p>
-<divclass="row">
- <divclass="col">
- <divclass="collapse multi-collapse"id="multiCollapseExample1">
- <divclass="card card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
- </div>
- </div>
- </div>
- <divclass="col">
- <divclass="collapse multi-collapse"id="multiCollapseExample2">
- <divclass="card card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
- </div>
- </div>
- </div>
-</div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Accordion example
-
Using the card component, you can extend the default collapse behavior to create an accordion. To properly achieve the accordion style, be sure to use
- .accordion as a wrapper.
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
- beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
- beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft
- beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-
-
-
-
-
-
-
-
-
<divclass="accordion"id="accordionExample">
- <divclass="card">
- <divclass="card-header"id="headingOne">
-
- <ahref="#"class="d-flex align-items-center text-inherit text-decoration-none active"data-bs-toggle="collapse"data-bs-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
-
- <divclass="me-auto">
- <h4class="mb-0"> Collapsible Group Item #1</h4>
- </div>
- <spanclass="chevron-arrow ms-4">
- <iclass="fe fe-chevron-down fs-4"></i>
- </span>
- </a>
-
- </div>
- <divid="collapseOne"class="collapse show"aria-labelledby="headingOne"data-bs-parent="#accordionExample">
- <divclass="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
- vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- <divclass="card">
- <divclass="card-header"id="headingTwo">
- <ahref="#"class="d-flex align-items-center text-inherit text-decoration-none "data-bs-toggle="collapse"data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
-
- <divclass="me-auto">
- <h4class="mb-0"> Collapsible Group Item #2</h4>
- </div>
- <spanclass="chevron-arrow ms-4">
- <iclass="fe fe-chevron-down fs-4"></i>
- </span>
- </a>
- </div>
- <divid="collapseTwo"class="collapse"aria-labelledby="headingTwo"data-bs-parent="#accordionExample">
- <divclass="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
- vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- <divclass="card">
- <divclass="card-header"id="headingThree">
- <ahref="#"class="d-flex align-items-center text-inherit text-decoration-none "data-bs-toggle="collapse"data-bs-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
-
- <divclass="me-auto">
- <h4class="mb-0"> Collapsible Group Item #3</h4>
- </div>
- <spanclass="chevron-arrow ms-4">
- <iclass="fe fe-chevron-down fs-4"></i>
- </span>
- </a>
- </div>
- <divid="collapseThree"class="collapse"aria-labelledby="headingThree"data-bs-parent="#accordionExample">
- <divclass="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
- on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
- vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
- </div>
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
-
-
-
-
-
-
-
-
-
-
Basic Froms
-
Textual form controls—like <input>s,
- <select>s, and <textarea>s—are styled with the
- .form-control class. Included are styles for general appearance, focus state, sizing, and more.
Custom <select> menus need only a custom class,
- .form-select to trigger the custom styles. Custom styles are limited to the
- <select>’s initial appearance and cannot modify the
- <option>s due to browser limitations.
Create custom <input
- type="range"> controls with .custom-range. The track (the background) and thumb (the value) are both styled to appear the same across browsers. As only IE and Firefox support “filling”
- their track from the left or right of the thumb as a means to visually indicate progress, we do not currently support it.
By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
-
-
-
-
-
-
-
-
-
Default Input
-
Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label>s outside the input group.
-
Add the relative form sizing classes to the .input-group itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
-
<divclass="input-group mb-3">
- <divclass="input-group-text">
- <inputclass="form-check-input mt-0"type="checkbox"value=""aria-label="Checkbox for following text input">
- </div>
- <inputtype="text"class="form-control"aria-label="Text input with checkbox">
- </div>
-
- <divclass="input-group">
- <divclass="input-group-text">
- <inputclass="form-check-input mt-0"type="radio"value=""aria-label="Radio button for following text input">
- </div>
- <inputtype="text"class="form-control"aria-label="Text input with radio button">
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Multiple input
-
While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>.
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.
-
-
-
-
-
-
-
-
-
Basic list
-
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.
-
<ulclass="list-group">
- <liclass="list-group-item active">Cras justo odio</li>
- <liclass="list-group-item">Dapibus ac facilisis in</li>
- <liclass="list-group-item">Morbi leo risus</li>
- <liclass="list-group-item">Porta ac consectetur ac</li>
- <liclass="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Disabled Items
-
Add .disabled to a .list-group-item to make it
- appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable their click events (e.g., links).
<ulclass="list-group">
- <liclass="list-group-item disabled">Cras justo odio</li>
- <liclass="list-group-item">Dapibus ac facilisis in</li>
- <liclass="list-group-item">Morbi leo risus</li>
- <liclass="list-group-item">Porta ac consectetur ac</li>
- <liclass="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Links and buttons
-
Use <a>s or <button>s to create
- actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to ensure list groups made of non-interactive
- elements (like <li>s or <div>s) don’t provide a click or tap affordance.
-
Be sure to not use the standard .btn classes
- here.
<ulclass="list-group list-group-flush">
- <liclass="list-group-item">Cras justo odio</li>
- <liclass="list-group-item">Dapibus ac facilisis in</li>
- <liclass="list-group-item">Morbi leo risus</li>
- <liclass="list-group-item">Porta ac consectetur ac</li>
- <liclass="list-group-item">Vestibulum at eros</li>
-</ul>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Horizontal
-
Add .list-group-horizontal to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant .list-group-horizontal-{sm|md|lg|xl} to make a list group horizontal starting at that breakpoint’s min-width. Currently horizontal
- list groups cannot be combined with flush list groups.
-
ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.
-
<ulclass="list-group">
- <liclass="list-group-item">Dapibus ac facilisis in</li>
- <liclass="list-group-item list-group-item-primary">This is a primary list group item</li>
- <liclass="list-group-item list-group-item-secondary">This is a secondary list group item</li>
- <liclass="list-group-item list-group-item-success">This is a success list group item</li>
- <liclass="list-group-item list-group-item-danger">This is a danger list group item</li>
- <liclass="list-group-item list-group-item-warning">This is a warning list group item</li>
- <liclass="list-group-item list-group-item-info">This is a info list group item</li>
- <liclass="list-group-item list-group-item-light">This is a light list group item</li>
- <liclass="list-group-item list-group-item-dark">This is a dark list group item</li>
-</ul>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
With badges
-
Add badges to any list group item to show unread counts, activity, and more with the help of some
- utilities.
<divclass="list-group">
- <ahref="#"class="list-group-item list-group-item-action active">
- <divclass="d-flex w-100 justify-content-between">
- <h5class="mb-1">List group item heading</h5>
- <small>3 days ago</small>
- </div>
- <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
- <small>Donec id elit non mi porta.</small>
- </a>
- <ahref="#"class="list-group-item list-group-item-action">
- <divclass="d-flex w-100 justify-content-between">
- <h5class="mb-1">List group item heading</h5>
- <smallclass="text-muted">3 days ago</small>
- </div>
- <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
- <smallclass="text-muted">Donec id elit non mi porta.</small>
- </a>
- <ahref="#"class="list-group-item list-group-item-action">
- <divclass="d-flex w-100 justify-content-between">
- <h5class="mb-1">List group item heading</h5>
- <smallclass="text-muted">3 days ago</small>
- </div>
- <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
- <smallclass="text-muted">Donec id elit non mi porta.</small>
- </a>
-</div>
- Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar.
- Includes support for branding, navigation, and more, including support for our collapse plugin.
-
Build hidden sidebars into your project for navigation, shopping carts, and more with a few classes and our JavaScript plugin.
-
-
-
-
-
-
-
-
Offcanvas components
-
Below is an offcanvas example that is shown by default (via .show on .offcanvas). Offcanvas includes support for a header with a close button and an optional body class for some initial padding.
- We suggest that you include offcanvas headers with dismiss actions whenever possible, or provide an explicit dismiss action.
- Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
-
-
-
-
-
-
-
<divclass="offcanvas offcanvas-start"tabindex="-1"id="offcanvas"aria-labelledby="offcanvasLabel">
- <divclass="offcanvas-header">
- <h5class="offcanvas-title"id="offcanvasLabel">Offcanvas</h5>
- <buttontype="button"class="btn-close text-reset"data-bs-dismiss="offcanvas"aria-label="Close"></button>
- </div>
- <divclass="offcanvas-body">
- Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Live demo
-
Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the .show class on an element with the .offcanvas class.
Scrolling the <body> element is disabled when an offcanvas and its backdrop are visible. Use the data-bs-scroll attribute to toggle <body> scrolling and data-bs-backdrop to toggle the backdrop.
<buttontype="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 popover</button>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Four directions
-
Four options are available: top, right, bottom, and left aligned.
<buttontype="button"class="btn btn-secondary"data-bs-container="body"data-bs-toggle="popover"data-placement="top"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on top
- </button>
-
- <buttontype="button"class="btn btn-secondary"data-bs-container="body"data-bs-toggle="popover"data-placement="right"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
- </button>
-
- <buttontype="button"class="btn btn-secondary"data-bs-container="body"data-bs-toggle="popover"data-placement="bottom"data-content="Vivamus
- sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on bottom
- </button>
-
- <buttontype="button"class="btn btn-secondary"data-bs-container="body"data-bs-toggle="popover"data-placement="left"data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
- </button>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Dismiss on next click
-
Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.
-
Automatically update Bootstrap navigation or list group components based on scroll position to indicate which link is currently active in the viewport.
-
-
-
-
-
-
-
-
Scrollspy in navbar
-
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf
- moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh
- artisan ullamco consequat.
-
@mdo
-
Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's
- quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.
-
-
one
-
Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat
- quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.
-
-
two
-
In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko,
- cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate,
- lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.
-
three
-
Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf
- moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh
- artisan ullamco consequat.
-
Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap
- aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor
- veniam. Anim mollit minim commodo ullamco thundercats.
-
Scrollspy also works with nested .navs. If a nested .nav is .active, its parents will also be
- .active. Scroll the area next to the navbar and watch the active class change.
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor
- eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
- dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
-
Item 1-1
-
Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis
- ea. Sit proident ullamco aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco
- adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
-
Item 1-2
-
Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod
- sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
-
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad
- sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non
- commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
-
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur
- dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
-
Item 3-1
-
Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit
- labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation.
- Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
-
Item 3-2
-
Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat
- consectetur nisi in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur
- elit magna fugiat eiusmod amet officia.
-
Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor
- eu consequat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit
- dolore. Aliquip nulla enim veniam non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
-
Item 2
-
Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad
- sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non
- commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.
-
Item 3
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur
- dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
-
Item 4
-
Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur
- dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.
The border spinner uses currentColor for its border-color, meaning you can customize the color with text color utilities. You can use any
- of our text color utilities on the standard spinner.
Once again, this spinner is built with currentColor, so you can easily change its appearance with text color
- utilities. Here it is in blue, along with the supported variants.
-
Spinners in Bootstrap are built with rems, currentColor, and display:
- inline-flex. This means they can easily be resized, recolored, and quickly aligned.
Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.
-
-
-
-
-
-
-
-
Examples
-
-
Basic
-
To encourage extensible and predictable toasts, we recommend a header and body. Toast headers use display:
- flex, allowing easy alignment of content thanks to our margin and flexbox utilities.
-
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the
- .toast.
<!-- Flexbox container for aligning the toasts -->
- <divaria-live="polite"aria-atomic="true"class="d-flex justify-content-center align-items-center"style="min-height: 200px;">
- <!-- Then put toasts within -->
- <divclass="toast"role="alert"aria-live="assertive"aria-atomic="true">
- <divclass="toast-header">
- <imgsrc="..."class="rounded-1 me-2"alt="...">
- <strongclass="me-auto">Bootstrap</strong>
- <small>11 mins ago</small>
- <buttontype="button"class="ms-2 mb-1 btn-close"data-bs-dismiss="toast"aria-label="Close">
- <spanaria-hidden="true">×</span>
- </button>
- </div>
- <divclass="toast-body">
- Hello, world! This is a toast message.
- </div>
- </div>
- </div>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Accessibility
-
Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an
- aria-live region. Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the
- user’s focus or otherwise interrupt the user. Additionally, include aria-atomic="true" to ensure that the entire toast is always announced as a single (atomic) unit, rather than announcing what
- was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). If the information needed is important for the process, e.g. for a list
- of errors in a form, then use the alert component instead of toast.
-
Documentation and examples for adding custom Bootstrap tooltips with
- CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
-
-
-
-
-
-
-
-
Examples
-
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
-
<buttontype="button"class="btn btn-secondary"data-bs-toggle="tooltip"data-placement="top"title="Tooltip on top">
- Tooltip on top
- </button>
- <buttontype="button"class="btn btn-secondary"data-bs-toggle="tooltip"data-placement="right"title="Tooltip on right">
- Tooltip on right
- </button>
- <buttontype="button"class="btn btn-secondary"data-bs-toggle="tooltip"data-placement="bottom"title="Tooltip on bottom">
- Tooltip on bottom
- </button>
- <buttontype="button"class="btn btn-secondary"data-bs-toggle="tooltip"data-placement="left"title="Tooltip on left">
- Tooltip on left
- </button>
+ This is the first 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 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.
+
+
+
+
+
+
+
+
<!-- Accordion Example -->
+
+<divclass="accordion"id="accordionExample">
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="headingOne">
+ <buttonclass="accordion-button"type="button"data-bs-toggle="collapse"
+ data-bs-target="#collapseOne"aria-expanded="true"aria-controls="collapseOne">
+ Accordion Item #1
+ </button>
+ </h2>
+ <divid="collapseOne"class="accordion-collapse collapse show"
+ aria-labelledby="headingOne"data-bs-parent="#accordionExample">
+ <divclass="accordion-body">
+ <strong>This is the first 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-body</code>, though the
+ transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="headingTwo">
+ <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"
+ data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
+ Accordion Item #2
+ </button>
+ </h2>
+ <divid="collapseTwo"class="accordion-collapse collapse"aria-labelledby="headingTwo"
+ data-bs-parent="#accordionExample">
+ <divclass="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-body</code>, though the
+ transition does limit overflow.
+ </div>
+ </div>
+ </div>
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="headingThree">
+ <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"
+ data-bs-target="#collapseThree"aria-expanded="false"aria-controls="collapseThree">
+ Accordion Item #3
+ </button>
+ </h2>
+ <divid="collapseThree"class="accordion-collapse collapse"
+ aria-labelledby="headingThree"data-bs-parent="#accordionExample">
+ <divclass="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-body</code>, though the
+ transition does limit overflow.
+ </div>
+ </div>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Flush
+
+ Add .accordion-flush to remove the default
+ background-color, some borders, and some
+ rounded corners to render accordions edge-to-edge with
+ their parent container.
+
+ Placeholder content for this accordion,
+ which is intended to demonstrate the
+ .accordion-flush class. This is
+ the first item's accordion body.
+
+
+
+
+
+
+
+
+
+ Placeholder content for this accordion,
+ which is intended to demonstrate the
+ .accordion-flush class. This is
+ the second item's accordion body. Let's
+ imagine this being filled with some actual
+ content.
+
+
+
+
+
+
+
+
+
+ Placeholder content for this accordion,
+ which is intended to demonstrate the
+ .accordion-flush class. This is
+ the third item's accordion body. Nothing
+ more exciting happening here in terms of
+ content, but just filling up the space to
+ make it look, at least at first glance, a
+ bit more representative of how this would
+ look in a real-world application.
+
+
+
+
+
+
+
<!-- Accordion flush -->
+
+<divclass="accordion accordion-flush"id="accordionFlushExample">
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="flush-headingOne">
+ <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseOne"aria-expanded="false"
+ aria-controls="flush-collapseOne">
+ Accordion Item #1
+ </button>
+ </h2>
+ <divid="flush-collapseOne"class="accordion-collapse collapse"
+ aria-labelledby="flush-headingOne"data-bs-parent="#accordionFlushExample">
+ <divclass="accordion-body">Placeholder content for this accordion, which is intended
+ to demonstrate the <code>.accordion-flush</code> class. This is the first item's
+ accordion body.
+ </div>
+ </div>
+ </div>
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="flush-headingTwo">
+ <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseTwo"aria-expanded="false"
+ aria-controls="flush-collapseTwo">
+ Accordion Item #2
+ </button>
+ </h2>
+ <divid="flush-collapseTwo"class="accordion-collapse collapse"
+ aria-labelledby="flush-headingTwo"data-bs-parent="#accordionFlushExample">
+ <divclass="accordion-body">Placeholder content for this accordion, which is intended
+ to demonstrate the <code>.accordion-flush</code> class. This is the second item's
+ accordion body. Let's imagine this being filled with
+ some actual content.
+ </div>
+ </div>
+ </div>
+ <divclass="accordion-item">
+ <h2class="accordion-header"id="flush-headingThree">
+ <buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"
+ data-bs-target="#flush-collapseThree"aria-expanded="false"
+ aria-controls="flush-collapseThree">
+ Accordion Item #3
+ </button>
+ </h2>
+ <divid="flush-collapseThree"class="accordion-collapse collapse"
+ aria-labelledby="flush-headingThree"data-bs-parent="#accordionFlushExample">
+ <divclass="accordion-body">Placeholder content for this accordion, which is intended
+ to demonstrate the <code>.accordion-flush</code> class. This is the third item's
+ accordion body. Nothing more exciting happening here
+ in terms of content, but just filling up the space to make it look, at least at
+ first glance, a bit more representative of how this would look in a real-world
+ application.
+ </div>
+ </div>
+ </div>
+</div>
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
+
+
+
+
+
+
+
+
+
+
Simple Alert
+
Alerts are available for any length of text, as well as an optional dismiss button. For proper
+ styling, use one of the eight required contextual classes (e.g.,
+ .alert-success).
+
<!-- Primary alert -->
+<divclass="alert alert-primary"role="alert">
+ This is a primary alert—check it out!
+</div>
+
+<!-- Secondary alert -->
+<divclass="alert alert-secondary"role="alert">
+ This is a secondary alert—check it out!
+</div>
+
+<!-- Success alert -->
+<divclass="alert alert-success"role="alert">
+ This is a success alert—check it out!
+</div>
+
+<!-- Danger alert -->
+<divclass="alert alert-danger"role="alert">
+ This is a danger alert—check it out!
+</div>
+
+<!-- Warning alert -->
+<divclass="alert alert-warning"role="alert">
+ This is a warning alert—check it out!
+</div>
+
+<!-- Info alert -->
+<divclass="alert alert-info"role="alert">
+ This is a info alert—check it out!
+</div>
+
+<!-- Light alert -->
+<divclass="alert alert-light"role="alert">
+ This is a light alert—check it out!
+</div>
+
+<!-- Dark alert -->
+<divclass="alert alert-dark"role="alert">
+ This is a dark alert—check it out!
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Live Alert
+
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
+ A simple primary alert with an
+ example link. Give it a click if you like.
+
+
+
+ A simple secondary alert with an
+ example link. Give it a click if you like.
+
+
+
+ A simple success alert with an
+ example link. Give it a click if you like.
+
+
+
+ A simple danger alert with an example
+ link. Give it a click if you like.
+
+
+
+ A simple warning alert with an
+ example link. Give it a click if you like.
+
+
+
+ A simple info alert with an example
+ link. Give it a click if you like.
+
+
+
+ A simple light alert with an example
+ link. Give it a click if you like.
+
+
+
+ A simple dark alert with an example
+ link. Give it a click if you like.
+
+
+
+
+
<!-- Primary alert -->
+ <divclass="alert alert-primary"role="alert">
+ A simple primary alert with <ahref="#"class="alert-link">an
+ example link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Secondary alert -->
+ <divclass="alert alert-secondary"role="alert">
+ A simple secondary alert with <ahref="#"class="alert-link">an
+ example link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Success alert -->
+ <divclass="alert alert-success"role="alert">
+ A simple success alert with <ahref="#"class="alert-link">an
+ example link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Danger alert -->
+ <divclass="alert alert-danger"role="alert">
+ A simple danger alert with <ahref="#"class="alert-link">an example
+ link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Warning alert -->
+ <divclass="alert alert-warning"role="alert">
+ A simple warning alert with <ahref="#"class="alert-link">an
+ example link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Info alert -->
+ <divclass="alert alert-info"role="alert">
+ A simple info alert with <ahref="#"class="alert-link">an example
+ link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Light alert -->
+ <divclass="alert alert-light"role="alert">
+ A simple light alert with <ahref="#"class="alert-link">an example
+ link</a>. Give it a click if you like.
+ </div>
+
+ <!-- Dark alert -->
+ <divclass="alert alert-dark"role="alert">
+ A simple dark alert with <ahref="#"class="alert-link">an example
+ link</a>. Give it a click if you like.
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Additional content
+
Alerts can also contain additional HTML elements like headings, paragraphs and dividers.
Aww yeah, you successfully read this important alert message. This example text is going to
+ run a bit longer so that you can see how spacing within an alert works with this kind of
+ content.
+
+
+
Whenever you need to, be sure to use margin utilities to keep things nice and
+ tidy.
+
+
+
+
+
<!-- Additional content -->
+
+ <divclass="alert alert-success"role="alert">
+ <h4class="alert-heading">Well done!</h4>
+ <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
+ <hr>
+ <pclass="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
Icons
+
Similarly, you can use Bootstrap Icons to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
+ Holy guacamole! You should check in on some of those fields below.
+
+
+
+
+
+
<!-- Dismissing alert -->
+
+ <divclass="alert alert-warning alert-dismissible fade show"role="alert">
+ <strong>Holy guacamole!</strong> You should check in on some of those fields below.
+ <buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close">
+ <spanaria-hidden="true">×</span>
+ </button>
+</div>
Documentation and examples for badges, our small count and labeling
+ component.
+
+
+
+
+
+
+
+
Background 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.
Indicate the current page’s location within a navigational hierarchy
+ that automatically adds separators via CSS.
+
+
+
+
+
+
+
+
Breadcrumb
+
Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.
Dividers are automatically added in CSS through ::before and content. They can be changed by modifying a local CSS custom property --bs-breadcrumb-divider, or through the $breadcrumb-divider Sass variable — and $breadcrumb-divider-flipped for its RTL counterpart, if needed. We default to our Sass variable, which is set as a fallback to the custom property. This way, you get a global divider that you can override without recompiling CSS at any time.
<!-- Button Group with active --><divclass="btn-group"role="group"aria-label="Basic example">
+<buttontype="button"class="btn btn-primary">Left</button><buttontype="button"class="btn btn-primary">Middle</button><buttontype="button"class="btn btn-primary">Right</button></div>
<!-- Checkbox and radio button groups -->
+<divclass="btn-group"role="group"aria-label="Basic radio toggle button group">
+ <inputtype="radio"class="btn-check"name="btnradio"id="btnradio1"autocomplete="off"checked>
+ <labelclass="btn btn-outline-primary"for="btnradio1">Radio 1</label>
-
Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.
+
Button toolbar
+
Combine sets of button groups into button toolbars for more complex components. Use utility
+ classes as needed to space out groups, buttons, and more.
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple
- groups.
+
Sizing
+
Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when
+ nesting multiple groups.
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.
The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, thus nullifying the gap-2 utility. Resize your browser to see them change.
You can adjust the width of your block buttons with grid column width classes. For example, for a half-width “block button”, use .col-6. Center it horizontally with .mx-auto, too.
Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we’ve taken our previous responsive example and added some flex utilities and a margin utility on the button to right align the buttons when they’re no longer stacked.
Buttons will appear pressed (with a darker background, darker border, and
+ inset shadow) when active. There’s no need to add a class to <button>s as they use a
+ pseudo-class. However, you can still force the same active
+ appearance with .active (and include
+ the
+ aria-pressed="true" attribute) should you need to replicate the
+ state programmatically.
+
Add data-bs-toggle="button" to toggle a
+ button’s active state. If you’re
+ pre-toggling a button, you must manually add the .active
+ class and
+ aria-pressed="true" to the <button>.
<!-- Basic -->
+ <divclass="card"style="width: 20rem;">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <ahref="#"class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Card Body
+
The building block of a card is the .card-body. Use it
+ whenever you need a padded section within a card.
<!-- card body -->
+<divclass="card">
+ <divclass="card-body">
+ This is some text within a card body.
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
Titles, text, and links
+
Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed
+ next to each other by adding
+ .card-link to an <a> tag.
+
Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the
+ .card-subtitle items are placed in a
+ .card-body item, the card title and subtitle are aligned
+ nicely.
<!-- Title Text -->
+<divclass="card"style="width: 18rem;">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <h6class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+ <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ <ahref="#"class="card-link">Card link</a>
+ <ahref="#"class="card-link">Another link</a>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Kitchen sink
+
Mix and match multiple content types to create the card you need, or throw everything in there.
+ Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width
+ card.
<!-- Kitchen Sink -->
+<divclass="card"style="width: 20rem;">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+ </div>
+ <ulclass="list-group list-group-flush">
+ <liclass="list-group-item">Cras justo odio</li>
+ <liclass="list-group-item">Dapibus ac facilisis in</li>
+ <liclass="list-group-item">Vestibulum at eros</li>
+ </ul>
+ <divclass="card-body">
+ <ahref="#"class="card-link">Card link</a>
+ <ahref="#"class="card-link">Another link</a>
+ </div>
+</div>
<!-- Text alignment -->
+<divclass="card"style="width: 18rem;">
+ <divclass="card-body">
+ <h5class="card-title">Special title treatment</h5>
+ <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <ahref="#"class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+<divclass="card text-center"style="width: 18rem;">
+ <divclass="card-body">
+ <h5class="card-title">Special title treatment</h5>
+ <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <ahref="#"class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+<divclass="card text-end"style="width: 18rem;">
+ <divclass="card-body">
+ <h5class="card-title">Special title treatment</h5>
+ <pclass="card-text">With supporting text below as a natural lead-in to additional content.</p>
+ <ahref="#"class="btn btn-primary">Go somewhere</a>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
Images
+
Cards include a few options for working with images. Choose from appending “image caps” at either
+ end of a card, overlaying images with card content, or simply embedding the image in a card.
+
+
+
+
+
+
Image on Top
+
.card-img-top places an image to the top of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.
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
+
+
+
+
+
+
+
<!-- Image on Top -->
+ <divclass="card">
+ <imgsrc="../assets/images/blog/blog-img-1.jpg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="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>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3
+ mins ago</small></p>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
Image on Bottom
+
.card-img-bottom places an image to the bottom of the card. With .card-text, text can be added to the card. Text within .card-text can also be styled with the standard HTML tags.
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
+
+
+
+
+
+
+
+
<!-- Image on bottom -->
+<divclass="card">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="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>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3
+ mins ago</small></p>
+ </div>
+ <imgsrc="../assets/images/blog/blog-img-1.jpg"class="card-img-bottom"alt="...">
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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.
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
+
+
+
+
+
+
<!-- image overlay -->
+<divclass="card bg-dark text-white">
+ <imgsrc="..."class="rounded"alt="...">
+ <divclass="card-img-overlay">
+ <h5class="card-title">Card title</h5>
+ <pclass="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>
+ <pclass="card-text">Last updated 3 mins ago</p>
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
Horizontal
+
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .g-0 and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.
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
+
+
+
+
+
+
+
+
<!-- Horizontal -->
+ <divclass="card mb-3"style="max-width: 540px;">
+ <divclass="row g-0">
+ <divclass="col-md-4">
+ <imgsrc="../assets/images/blog/blog-img-1.jpg"class="img-fluid rounded-start h-100"alt="...">
+ </div>
+ <divclass="col-md-8">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="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>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ </div>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Card layout
+
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
+
+
+
Card groups
+
Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.
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
+
+
+
+
+
+
Card title
+
This card has supporting text below as a natural lead-in to additional content.
+
Last updated 3 mins ago
+
+
+
+
+
+
Card title
+
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
+
Last updated 3 mins ago
+
+
+
+
+
+
+
<!-- Card group -->
+ <divclass="card-group">
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="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>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ </div>
+ </div>
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ </div>
+ </div>
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
+ <pclass="card-text"><smallclass="text-muted">Last updated 3 mins ago</small></p>
+ </div>
+ </div>
+ </div>
+
+
+
+
+
+
+
Grid cards
+
Use the Bootstrap grid system and its.row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+
Card title
+
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
+
+
+
+
+
+
+
+
<!-- Card group -->
+ <divclass="row row-cols-1 row-cols-md-2 g-4">
+ <divclass="col">
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <divclass="col">
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ <divclass="col">
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
+ </div>
+ </div>
+ </div>
+ <divclass="col">
+ <divclass="card">
+ <imgsrc="../assets/images/placeholder/placeholder-4by3.svg"class="card-img-top"alt="...">
+ <divclass="card-body">
+ <h5class="card-title">Card title</h5>
+ <pclass="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+ </div>
+ </div>
+ </div>
+ </div>
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.
Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch attribute. The example below also does not include the data-bs-ride attribute and has data-bs-interval="false" so it doesn’t autoplay.
Add .carousel-dark to the .carousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the filter CSS property. Captions
+ and controls have additional Sass variables that customize the color and background-color.
A generic close button for dismissing content like modals and alerts.
+
+
+
+
+
+
+
+
Examples
+
Provide an option to dismiss or close a component with .btn-close. Default styling is limited, but highly customizable. Modify the Sass variables to replace the default background-image. Be sure to include text for screen readers, as we’ve done with aria-label.
<!-- close button -->
+ <buttontype="button"class="btn-close"aria-label="Close"></button>
+
+
+
+
+
+
+
+
+
+
+
+
+
Disabled state
+
Disabled close buttons change their opacity. We’ve also applied pointer-events: none and user-select: none to preventing hover and active states from triggering.
Toggle the visibility of content across your project with a few
+ classes and our JavaScript plugins.
+
+
+
+
+
+
+
+
Example
+
Click the buttons below to show and hide another element via class changes:
+
+
+
.collapse hides content
+
.collapsing is applied during transitions
+
+
.collapse.show shows content
+
+
You can use a link with the href attribute, or a button
+ with the data-bs-target attribute. In both cases, the data-bs-toggle="collapse" is required.
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+ squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente
+ ea proident.
+
+
+
+
+
<!-- collapse -->
+ <p>
+ <aclass="btn btn-primary"data-bs-toggle="collapse"href="#collapseExample"role="button"aria-expanded="false"aria-controls="collapseExample">
+ Link with href
+ </a>
+ <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#collapseExample"aria-expanded="false"aria-controls="collapseExample">
+ Button with data-bs-target
+ </button>
+</p>
+<divclass="collapse"id="collapseExample">
+ <divclass="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
Multiple targets
+
A <button> or <a> can show and hide multiple elements by referencing
+ them with a JQuery selector in its href or data-bs-target attribute. Multiple <button> or <a> can show and hide an element
+ if they each reference it with their href or data-bs-target attribute
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+ squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+ sapiente ea proident.
+
+
+
+
+
+
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad
+ squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+ sapiente ea proident.
+
+
+
+
+
+
+
<!-- multiple target collapse -->
+<p>
+ <aclass="btn btn-primary"data-bs-toggle="collapse"href="#multiCollapseExample1"role="button"aria-expanded="false"aria-controls="multiCollapseExample1">Toggle first element</a>
+ <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target="#multiCollapseExample2"aria-expanded="false"aria-controls="multiCollapseExample2">Toggle second element</button>
+ <buttonclass="btn btn-primary"type="button"data-bs-toggle="collapse"data-bs-target=".multi-collapse"aria-expanded="false"aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
+</p>
+<divclass="row">
+ <divclass="col">
+ <divclass="collapse multi-collapse"id="multiCollapseExample1">
+ <divclass="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+ </div>
+ </div>
+ <divclass="col">
+ <divclass="collapse multi-collapse"id="multiCollapseExample2">
+ <divclass="card card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
+ </div>
+ </div>
+ </div>
+</div>
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.
+ Some example text that's free-flowing within the dropdown menu.
+
+
+ And this is more example text.
+
+
+
+
+
+
<!-- With Text -->
+<divclass="dropdown-menu p-4 text-muted"style="max-width: 200px;">
+<p>
+ Some example text that's free-flowing within the dropdown menu.
+</p>
+<pclass="mb-0">
+ And this is more example text.
+</p>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
Forms
+
Put a form within a dropdown menu, or make it into a dropdown menu, and use
+ margin or padding utilities to give it the negative space you require.
By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.
Examples and usage guidelines for form control styles, layout
+ options, and custom components for creating a wide variety of forms.
+
+
+
+
+
+
+
+
+
Form Control
+
Textual form controls—like <input>s,
+ <select>s, and <textarea>s—are styled with the
+ .form-control class. Included are styles for general appearance, focus state, sizing,
+ and more.
A switch has the markup of a custom checkbox but uses the .form-switch class to
+ render a toggle switch. Consider using role="switch" to more accurately convey the
+ nature of the control to assistive technologies that support this role. In older assistive
+ technologies, it will simply be announced as a regular checkbox as a fallback. Switches also
+ support the disabled attribute.
Create custom <input
+ type="range"> controls with .custom-range.
+ The
+ track (the background) and thumb (the value) are both styled to appear the same across browsers.
+ As only IE
+ and Firefox support “filling” their track from the left or right of the thumb as a means to
+ visually indicate progress, we do not currently support it.
<!-- mix and max range -->
+ <labelfor="customRange2"class="form-label">Example range</label>
+ <inputtype="range"class="form-range"min="0"max="5"id="customRange2">
+
+
+
+
+
+
+
+
+
+
+
Steps
+
By default, range inputs “snap” to integer values. To change this, you can specify a
+ step value. In the example below, we double the number of steps by using
+ step="0.5".
Dashui uses NPM
scripts for its build system. Our package.json
includes convenient methods for working with the framework, including compiling code, running
@@ -59,14 +59,11 @@
Quick Start
-
Install Gulp.js
+
Install Gulp.js
Please note, first Gulp should be installed globally and for that reason -g command is used.
-
-
-
-
npm install gulp-cli -g
-
-
+
+
npm install gulp-cli -g
+
@@ -76,17 +73,16 @@
Install Gulp.js
-
Install NPM modules
+
Install NPM modules
First, change the command line path into your project where Dashui folder is located. if you
have not done this before, you may check the following article to quick start, you may run package.json file by using the following command:
-
-
-
npm install
-
-
+
+
npm install
+
+
If you check the project folder when the command has finished executing, you
should see that Gulp has created a node_modules folder.
@@ -99,29 +95,26 @@
Install NPM modules
-
Run Gulp & Gulp build
+
Run Gulp & Gulp build
Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a
server, and pop a tab in your default browser. Any changes made to the source files will be
compiled as soon as you save
the file. To try it out run:
-
-
-
gulp
-
-
+
+
gulp
+
+
Generates a /dist directory with all the production files.
Be sure to have your docs set up with the latest design and development standards. That means
using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it
all together and
@@ -82,29 +79,28 @@
That’s all you need for overall page requirements. Visit the Layout docs or our
official examples to start laying out your site’s content and components.
@@ -116,7 +112,7 @@
Starter template
-
Important globals
+
Important globals
Dash-ui employs a handful of important global styles and settings that you’ll need to be aware of
when using it, all of which are almost exclusively geared towards the normalization of cross
browser styles. Let’s
@@ -125,7 +121,7 @@
Important globals
-
HTML5 doctype
+
HTML5 doctype
Dash-ui requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete
styling, but including it shouldn't cause any considerable hiccups.
@@ -134,18 +130,17 @@
HTML5 doctype
-
<!doctype html>
- <htmllang="en">
+
<!doctype html>
+<htmllang="en">
...
- </html>
+</html>
-
Responsive meta tag
+
Responsive meta tag
Dash-ui is developed mobile first, a strategy in which we optimize code for mobile devices first
and then scale up components as necessary using CSS media queries. To ensure proper rendering and
touch zooming for
@@ -157,8 +152,7 @@
You can see an example of this in action in the starter template.
diff --git a/src/docs/list-group.html b/src/docs/list-group.html
new file mode 100644
index 0000000..0733069
--- /dev/null
+++ b/src/docs/list-group.html
@@ -0,0 +1,923 @@
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
Basic list
+
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.
+
<!-- Active Item -->
+ <ulclass="list-group">
+ <liclass="list-group-item active">Cras justo odio</li>
+ <liclass="list-group-item">Dapibus ac facilisis in</li>
+ <liclass="list-group-item">Morbi leo risus</li>
+ <liclass="list-group-item">Porta ac consectetur ac</li>
+ <liclass="list-group-item">Vestibulum at eros</li>
+</ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
Disabled Items
+
Add .disabled to a .list-group-item to make it
+ appear disabled. Note that some elements with .disabled will also require custom JavaScript to fully disable
+ their click events (e.g., links).
<!-- Disabled items -->
+<ulclass="list-group">
+ <liclass="list-group-item disabled">Cras justo odio</li>
+ <liclass="list-group-item">Dapibus ac facilisis in</li>
+ <liclass="list-group-item">Morbi leo risus</li>
+ <liclass="list-group-item">Porta ac consectetur ac</li>
+ <liclass="list-group-item">Vestibulum at eros</li>
+</ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
Links and buttons
+
Use <a>s or <button>s to create
+ actionable list group items with hover, disabled, and active states by adding .list-group-item-action. We separate these pseudo-classes to
+ ensure list groups made
+ of non-interactive elements (like <li>s or <div>s) don’t provide a click or tap affordance.
+
Be sure to not use the standard .btn classes
+ here.
<!-- Flush list -->
+<ulclass="list-group list-group-flush">
+ <liclass="list-group-item">Cras justo odio</li>
+ <liclass="list-group-item">Dapibus ac facilisis in</li>
+ <liclass="list-group-item">Morbi leo risus</li>
+ <liclass="list-group-item">Porta ac consectetur ac</li>
+ <liclass="list-group-item">Vestibulum at eros</li>
+</ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
Numbered
+
Add the .list-group-numbered modifier class (and optionally use an <ol> element) to opt into numbered list group items. Numbers are generated via CSS (as opposed to a <ol>s default browser styling) for better placement inside list group items and to allow for better customization.
Add .list-group-horizontal to change the layout of list
+ group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
+ variant .list-group-horizontal-{sm|md|lg|xl} to make a list
+ group horizontal starting at that breakpoint’s min-width.
+ Currently horizontal
+ list groups cannot be combined with flush list groups.
+
ProTip: Want equal-width list group items when horizontal? Add .flex-fill to each list group item.
+
<!-- Horizontal -->
+<ulclass="list-group list-group-horizontal">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+ <ulclass="list-group list-group-horizontal-sm">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+ <ulclass="list-group list-group-horizontal-md">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+ <ulclass="list-group list-group-horizontal-lg">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+ <ulclass="list-group list-group-horizontal-xl">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+ <ulclass="list-group list-group-horizontal-xxl">
+ <liclass="list-group-item">An item</li>
+ <liclass="list-group-item">A second item</li>
+ <liclass="list-group-item">A third item</li>
+ </ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
Checkboxes and radios
+
Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.
<!-- Contextual classes -->
+ <ulclass="list-group">
+ <liclass="list-group-item">Dapibus ac facilisis in</li>
+ <liclass="list-group-item list-group-item-primary">This is a primary list group item</li>
+ <liclass="list-group-item list-group-item-secondary">This is a secondary list group item</li>
+ <liclass="list-group-item list-group-item-success">This is a success list group item</li>
+ <liclass="list-group-item list-group-item-danger">This is a danger list group item</li>
+ <liclass="list-group-item list-group-item-warning">This is a warning list group item</li>
+ <liclass="list-group-item list-group-item-info">This is a info list group item</li>
+ <liclass="list-group-item list-group-item-light">This is a light list group item</li>
+ <liclass="list-group-item list-group-item-dark">This is a dark list group item</li>
+</ul>
+
+
+
+
+
+
+
+
+
+
+
+
+
With badges
+
Add badges to any list group item to show unread counts, activity, and more with the help of some
+ utilities.
<!-- custom content -->
+<divclass="list-group">
+ <ahref="#"class="list-group-item list-group-item-action active">
+ <divclass="d-flex w-100 justify-content-between">
+ <h4class="mb-1">List group item heading</h4>
+ <small>3 days ago</small>
+ </div>
+ <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <small>Donec id elit non mi porta.</small>
+ </a>
+ <ahref="#"class="list-group-item list-group-item-action">
+ <divclass="d-flex w-100 justify-content-between">
+ <h4class="mb-1">List group item heading</h4>
+ <smallclass="text-muted">3 days ago</small>
+ </div>
+ <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <smallclass="text-muted">Donec id elit non mi porta.</small>
+ </a>
+ <ahref="#"class="list-group-item list-group-item-action">
+ <divclass="d-flex w-100 justify-content-between">
+ <h4class="mb-1">List group item heading</h4>
+ <smallclass="text-muted">3 days ago</small>
+ </div>
+ <pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
+ <smallclass="text-muted">Donec id elit non mi porta.</small>
+ </a>
+</div>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ @@include("../partials/scripts.html")
+
+
+
\ No newline at end of file
diff --git a/src/components/modal.html b/src/docs/modal.html
similarity index 69%
rename from src/components/modal.html
rename to src/docs/modal.html
index 4fe9cd8..808b0b3 100644
--- a/src/components/modal.html
+++ b/src/docs/modal.html
@@ -2,26 +2,32 @@
+
@@include("../partials/head.html")
Modal | Dash Ui - Bootstrap 5 Admin Dashboard Template
-
-
-
-
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
+
+ @@include("../partials/doc-sidenav.html")
+
+
+
+
+
+
+
Modal
+
Use Bootstrap’s JavaScript modal plugin to add
+ dialogs to your site for lightboxes, user notifications, or completely
+ custom content.
@@ -29,26 +35,36 @@
Modal
-
Examples
-
-
Modal components
-
Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for
- padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
+
+
Modal components
+
Below is a static modal example (meaning its position and display
+ have been overridden).
+ Included are the modal header,
+ modal body (required for padding), and modal footer
+ (optional). We ask that you include modal headers with dismiss actions
+ whenever possible, or provide another explicit
+ dismiss action.
- 
- 
- 
- 
- Bootstrap
- 11 mins ago
-
- 
+ 
+