Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a regular paragraph with a link. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Primary text color

Success text color

Danger text color

Warning text color

Info text color

Muted text color

Links

Colored Links

Link Modifiers

Always Underlined | Never Underlined | Underline on Hover

External Links

External Website | GitHub Repository

Links on Dark Background

Light Link on Dark | Primary Link on Dark | Success Link on Dark

Buttons

Solid Buttons

Outline Buttons

Mixed Button Colors with Custom Outlines

Button Sizes

Block Button

Grid System

col-12

col-6

col-4

col-3

Cards

Card Header

Card Title

This is a simple card with header, body, and footer.

Card Footer

Card with Image

Cards can include images at the top.

Simple Card

A minimal card with just a body section.

Forms

Text Input

Email Input

Select Dropdown

Textarea

I agree to terms and conditions

Option A

Option B

Tables

Basic Table

#	Name	Email	Role
1	John Doe	john@example.com	Developer
2	Jane Smith	jane@example.com	Designer
3	Bob Johnson	bob@example.com	Manager

Striped & Hover Table

Product	Price	Quantity	Total
Laptop	$999	2	$1,998
Mouse	$29	5	$145
Keyboard	$79	3	$237

Bordered Table

Status	Count	Percentage
Active	45	75%
Pending	10	17%
Inactive	5	8%

Sortable Table

Click on any column header to sort

Name	Department	Salary	Years	Rating
Alice Johnson	Engineering	95000	5	4.8
Bob Smith	Marketing	72000	3	4.2
Carol Davis	Sales	88000	7	4.9
David Wilson	Engineering	110000	10	4.7
Emma Brown	HR	65000	2	4.5
Frank Miller	Sales	78000	4	4.3
Grace Lee	Marketing	82000	6	4.6
Henry Taylor	Engineering	105000	8	4.8

Alerts

Info! This is a primary alert message.

Success! Your action was completed successfully.

Error! Something went wrong. Please try again.

Warning! Please review your information carefully.

Note: This is an informational message.

Badges

Status Badges

Primary Secondary Success Danger Warning Info

In Context

Notifications 12

Messages 5

Updates New

Images

Responsive

Rounded

Rounded Large

Circle

Thumbnail Light

Thumbnail Dark

Utility Classes

Spacing

Padding: p-3

Padding: p-2

Padding: p-1

Text Alignment

Left aligned text

Center aligned text

Right aligned text

Background Colors

Primary Background

Success Background

Danger Background

Warning Background

Info Background

Shadows

Small Shadow

Medium Shadow

Large Shadow

XL Shadow

Flexbox

Item 1 Item 2 Item 3

Centered Content

Modals

Dropdowns

Accordion / Collapse

This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.

This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes.

This is the third item's accordion body. It demonstrates how items can be collapsed and expanded.

Tabs & Pills

Tabs

Home Tab Content

This is the home tab content. Tabs allow you to organize content into different sections.

Overview of the framework
Quick start tips
Design guidelines

Profile Tab Content

This is the profile tab content. Click on the tabs to switch between different content areas.

Account Settings

Contact Tab Content

This is the contact tab content. Each tab can contain different types of content.

Support

Email Support

Pills

Pills navigation - Active content

Pills navigation - Second content

Pills navigation - Third content

Breadcrumbs

Pagination

Default Pagination

Large Pagination

Small Pagination

Progress Bars

Basic Progress

25%

50%

75%

100%

Striped Progress

Animated Progress

Spinners

Border Spinners

Growing Spinners

Small Spinners

Button with Spinner

Toasts

Hello! This is a toast notification message.

Success 2 mins ago

Your action was completed successfully!

List Groups

Basic List

First item
Second item
Third item
Fourth item

Active & Disabled

Active item Regular item Another item

Colored Items

Primary item
Success item
Danger item
Warning item

Input Groups

Input with Prepend

@

Input with Append

@example.com

Input with Button

Multiple Addons

$ .00

Button Groups

Basic Button Group

Button Toolbar

Advanced Forms

Form Validation

Floating Labels

Email address

Password

Switch Toggle

Toggle this switch

Checked switch

Range Slider

Example range

Form Select

Carousel

First Slide

This is the first slide of the carousel.

Second Slide

Auto-rotates every 5 seconds.

Third Slide

Use arrows to navigate manually.

Offcanvas

Advanced Typography

Display Headings

Display 1

Display 2

Display 3

Display 4

Lead Text

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

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Text Transform

LOWERCASED TEXT.

uppercased text.

capitalized text.

Text Truncate

This text is quite long and will be truncated with an ellipsis when it overflows.

Width & Height Utilities

Width

Width 25%

Width 50%

Width 75%

Width 100%

Height

25%

50%

75%