Menu

Welcome to Bootstrap Showcase

Explore the full power of Bootstrap 5 in one beautiful page.

Start Exploring

Grid & Layout

Bootstrap’s 12-column responsive grid system allows flexible layouts across screen sizes.

.col-12 .col-md-6 .col-lg-4
.col-12 .col-md-6 .col-lg-4
.col-12 .col-md-6 .col-lg-4
.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
.col-6 .col-md-3
Parent: .col-md-6
Nested: .col-6
Nested: .col-6
Another .col-md-6
Gutter Spacing
.col
.col
.col
.col

Typography

Explore Bootstrap's powerful and responsive typography system — from headings to blockquotes.

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5
Display 6
Lead & Paragraph

This is a lead paragraph. It stands out from regular paragraphs.

This is a regular paragraph using Bootstrap's base typography system. Resize your browser to see responsive scaling.

Text Utilities

Left aligned text.

Center aligned text.

Right aligned text.

Lowercased text.

Uppercased text.

capitalized text.

Bold text.

Light weight text.

Italic text.

Muted color text.

Blockquote

“The only way to do great work is to love what you do.”

Steve Jobs Apple Keynote
Lists
Unordered List
  • First item
  • Second item
  • Third item
Ordered List
  1. First item
  2. Second item
  3. Third item
Unstyled List
  • Item without bullets
  • Still no bullets

Buttons & Badges

Bootstrap offers a wide variety of button styles, sizes, and utility options to enhance UI interactions.

Button Variants
Outline Buttons
Button Sizes
Disabled Buttons
Disabled Link
Button Groups
Toggle Button (Active/Inactive)
Badges
Contextual Badges:
Primary Secondary Success Danger Warning Info Light Dark
Badges in Headings:
Notifications 3
Tasks New
Badges on Buttons:

Forms

Professionally styled, accessible, responsive forms using modern Bootstrap 5 utilities.

Floating Labels
Basic Form Elements
Input Groups
@
@example.com
$ .00
Checkboxes, Radios, and Switches
Grid Layout Form

Cards & Media

Bootstrap cards are flexible, extensible content containers with multiple variants, layouts, and features.

Basic Card

This is a simple card with text content and no media.

Go somewhere
Sample Image
Card with Image

You can add images on top of cards for visual appeal and storytelling.

Learn More
Media Image
Horizontal Card

Useful for layouts with thumbnails, media articles, or app previews.

Last updated 3 mins ago

Card Group
...
Developer

Write clean, efficient, and scalable code using best practices.

...
Designer

Design visually engaging interfaces that enhance user experience.

...
Innovator

Think ahead of the curve and redefine digital solutions.

Featured
Card with Header and Footer

This card has a header and footer, useful for highlighting categories.

2 days ago
Primary Background

Use contextual background classes to highlight cards.

Success Background

Bootstrap makes color coding content intuitive.

Dark Background

Dark cards pair well with light UI themes or dark mode.

Overlay image
Card Image Overlay

Text is layered on top of the image using `.card-img-overlay`.

Accordion & Collapse

Bootstrap provides easy-to-use collapsible content with accordions and toggle buttons.

Standard Accordion

Bootstrap is a powerful, mobile-first frontend toolkit built with HTML, CSS, and JavaScript.

Accordions are great for FAQ, structured content, or hiding lengthy sections.
Accordion (Always Open)

This accordion allows multiple panels to stay open at once.

Great for advanced interfaces like filters, FAQs, or multi-step forms.
Flush Accordion

This accordion has no outer borders for a minimalist look.

Useful in cards, modals, or modern page layouts.
Collapse via Buttons

Click the buttons below to toggle hidden content using Bootstrap's collapse plugin.

This content is shown/hidden via the first button.
This content is shown/hidden via the second button.
Collapsible Card Example

This card can be shown or hidden with a simple toggle. Useful for modular sections or UI blocks.

Alerts, Toasts & Tooltips

Notify, guide, and interact with users using Bootstrap's alerts, toasts, and tooltips.

Alert Types
Dismissible Alert
Toast Notification
Tooltips

Tables & Pagination

Display data cleanly with styled tables and intuitive pagination options.

Professional User Table
# Name Email Role Actions
1 Alice Johnson alice@example.com Admin
2 Bob Smith bob@example.com Editor
3 Carol Lee carol@example.com Viewer
Striped Product Table
#ProductStatus
1LaptopIn Stock
2PhoneOut of Stock
3TabletLimited
Hover Status Table
#DeviceStatus
1MonitorActive
2KeyboardIdle
3MouseDisconnected
Bordered Service Table
#ServiceStatus
1APIOnline
2DatabaseOffline
Dark Leaderboard Table
#PlayerScore
1Player A89
2Player B95
Pagination Variants

Side Scroll Function

This space is intentional.
Bootstrap’s responsive grid supports horizontal layouts too!


💜