Test Bootstrap

Style Reference

Carousel

2UP

Hornbacher's Promo Item
Hornbacher's Promo Item

3UP

Hornbacher's Promo Item
Hornbacher's Promo Item
Hornbacher's Promo Item

4UP

Hornbacher's Promo Item
Hornbacher's Promo Item
Hornbacher's Promo Item
Hornbacher's Promo Item

Responsive Columns – Fluid Container

Test Link Style

.col
.col
.col
.col

Responsive Columns – Container

.col
.col
.col
Hornbacher's Promo Item
Hornbacher's Promo Item

Sample Texts

Sample Link

Text Sample

Card

Sample
Card title

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

Go somewhere

Table – Striped Rows

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

Description Lists

The dl element indicates a description list:

Coffee
– black hot drink
Milk
– white cold drink

Single lIne Items

The class .list-inline places all list items on a single line, when used together with the .list-inline-item:

  • Coffee
  • Tea
  • Milk

Buttons


Button Group

The .btn-group class creates a button group:

Dropdowns

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal line:

List Group With Linked Items

Numbered List Group

Use the .list-group-numbered class to create list items with numbers in front of them:

  1. First item
  2. Second item
  3. Third item

Horizontal List Groups

The .list-group-horizontal class displays the list items horizontally instead of vertically:

  • First item
  • Second item
  • Third item
  • Fourth item

Linked Items With Contextual Classes

Move the mouse over the linked items to see the hover effect:


Vertically Centered Modal Example

Click on the button to open the modal.

Alerts

The button with class=”btn-close” and data-bs-dismiss=”alert” is used to close the alert box.

The alert-dismissible class aligns the button to the right.

Success! This alert box could indicate a successful or positive action.
Info! This alert box could indicate a neutral informative change or action.
Warning! This alert box could indicate a warning that might need attention.
Danger! This alert box could indicate a dangerous or potentially negative action.
Primary! Indicates an important action.
Secondary! Indicates a slightly less important action.
Dark! Dark grey alert.
Light! Light grey alert.

Example of Jumbotron

Jumbotron Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..

Accordion Example

Note: The data-bs-parent attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Skip to content