Carousel
2UP
3UP
4UP
Responsive Columns – Container
Sample Texts
Sample Link
Text Sample
Card
Card title
Some quick example text to build on the card title and make up the bulk of the card’s content.
Go somewhereTable – Striped Rows
Firstname | Lastname | |
---|---|---|
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:
- First item
- Second item
- 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.
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.