Bootstrap 5.3 Web Components Collection
1. Bootstrap Button Components
Basic Button Variants
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Outline Button Variants
Primary
Secondary
Success
Danger
Button Sizes & States
Large Button
Default Button
Small Button
Disabled Button
Loading Button
2. Bootstrap Accordion Components
Basic Accordion
First Accordion Item
This accordion uses the default H2 heading level for accessibility.
Button in Accordion
Second Accordion Item
This is the second accordion item's content.
Flush Accordion (Always Open)
Flush Item 1
This accordion has no borders and allows multiple panels open.
Flush Item 2
Perfect for edge-to-edge designs with H3 headings.
3. Bootstrap Card Components
Basic Cards
Card Header
Card Title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Primary Border Card
This card has a primary border color.
Dark Card
This card has a dark background with white text.
Image Cards
Image Top Card
Card with image at the top.
Image Bottom Card
Card with image at the bottom.
Horizontal Card
Horizontal Card
This is a wider card with supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
4. Bootstrap Carousel Components
Basic Carousel with Indicators
First slide label
Some representative placeholder content for the first slide.
Second slide label
Some representative placeholder content for the second slide.
Third slide label
Some representative placeholder content for the third slide.
Carousel with Fade Effect
5. Bootstrap Modal Components
Basic Modal
Launch Modal
Modal Title
Modal body text goes here. This is a basic modal example.
Button in Modal
Close
Save Changes
Large Modal with Scrollable Content
Large Scrollable Modal
Large Modal with Scrollable Content
This is a large modal with scrollable content when the content exceeds the modal height.
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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Close
6. Bootstrap List Group Components
Basic List Group
First item
Second item
Third item
Fourth item
List Group with Links and Badges
Active link item
14
Link item with badge
2
Disabled link item
Contextual List Group
Primary item
Success item
Danger item
Warning item
Complex List Group with Headings
List group item heading
And some small print underneath.
3 days ago
Another heading
Some more content for this item.
1 week ago
7. Bootstrap Offcanvas Components
Left Offcanvas
Open Left Offcanvas
Offcanvas Title
This is the offcanvas body content. You can place any content here including other components.
Button in Offcanvas
Offcanvas item 1
Offcanvas item 2
Right Offcanvas (No Backdrop)
Open Right Offcanvas
Right Side Menu
This offcanvas opens from the right side, allows body scrolling, and has no backdrop.
Navigation
Home
About
Services
Contact
8. Bootstrap Dropdown Components
Basic Dropdown
Dropdown Button
Action
Another action
Something else here
Separated link
Split Button Dropdown
Split Button
Action
Another action
Disabled action
Dropup and Direction Variants
Dropup
Action
Another action
Dropend
Action
Another action
Dropdown with Headers and Custom Content
Custom Dropdown
Dropdown header
Active item
Regular item
Some example text that's free-flowing within the dropdown menu.
