Typography & Text Utilities

Display Headings

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

Regular Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Text Utilities & Colors

This is a lead paragraph that stands out.

Font size 1

Font size 2

Font size 3

Font size 4

Font size 5

Font size 6

Primary text

Neutral text

Success text

Danger text

Warning text

Info text

Light text

Dark text

Body text

Muted text

White text

Black 50% opacity

White 50% opacity

Bold text

Bolder text

Semibold text

Medium text

Normal text

Light text

Lighter text

Italic text

Normal font style

Text Decorations

Underlined text

Line through text

Text with no decoration

Uppercase text

LOWERCASE TEXT

capitalized text

Images & Figures

Responsive image

img-fluid

Thumbnail

img-thumbnail

Rounded

rounded

Demo figure
A sample figure with caption

Tables

ID Name Email Status Actions
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Pending
3 Bob Johnson bob@example.com Inactive

Buttons & Button Groups

Solid Buttons

Outline Buttons

Button Sizes

Button States

Button Groups

Badges

Basic Badges

Primary Neutral Success Danger Warning Info Light Dark

Pill Badges

Primary Neutral Success Danger

Notification Badges

Alerts

Breadcrumbs

Cards

Card image
Card with Image

Some quick example text to build on the card title.

Go somewhere
Featured
Special title treatment

With supporting text below as a natural lead-in.

Go somewhere
Header
Primary card title

Some quick example text to build on the card title.

Success Border
Success card title

Some example text with success styling.

Card with List Group
  • An item
  • A second item
  • A third item

Accordion

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

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 is hidden by default, until the collapse plugin adds the appropriate classes.

Carousel (Slider)

Forms

We'll never share your email with anyone else.

Input Groups

@
@example.com
https://example.com/users/
$ .00

List Groups

Basic List Group
  • An item
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
Active and Disabled Items
  • An active item
  • A second item
  • A third item
  • A disabled item
  • And a fifth one

Modals

Offcanvas

Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen.
Offcanvas top
This is offcanvas content from the top.
Offcanvas right
This is offcanvas content from the right side.

Pagination

Basic Pagination
Large Pagination
Small Pagination

Progress Bars

Basic Progress Bars
Colored Progress Bars
Striped and Animated
Multiple Progress Bars

Spinners

Border Spinners
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Growing Spinners
Loading...
Loading...
Loading...
Loading...
Spinner Sizes
Loading...
Loading...
Loading...
Loading...

Tabs

Home Tab Content

This is the home tab content. You can put any content here including text, images, forms, or other components.

Profile Tab Content

This is the profile tab content with different information.

Contact Tab Content

This is the contact tab content area.

Pills Navigation

This is the home pill content.

This is the profile pill content.

This is the contact pill content.

Tooltips & Popovers

Tooltips
Popovers

Toasts

Collapse

Link with href

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Another collapse panel with different content. You can have multiple collapsible sections on the same page.
Horizontal Collapse

This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.

Dropdowns

Basic Dropdown
Split Button Dropdown
Dropdown Variations
Dropdown Directions

Placeholders

Card image
Card title

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

Go somewhere
Placeholder Variations

Colored Placeholders

Steps

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.

Completed
2
In Progress
3
Pending
4
Pending
Account
Create your account
Profile
Add your information
Verification
Verify your email
Complete
All done!

Team

Team member
John Doe

CEO & Founder

Passionate about building great products and leading amazing teams.

Team member
Jane Smith

CTO

Expert in full-stack development and system architecture.

Team member
Mike Johnson

Lead Designer

Creative designer focused on user experience and visual design.

Testimonials / Reviews

Reviewer
Sarah Wilson
Marketing Director

"Excellent service and outstanding results. The team was professional and delivered exactly what we needed."

Reviewer
David Brown
Product Manager

"Great experience working with this team. They understood our requirements and delivered on time."

"This is the best Bootstrap theme I've ever used. The components are well-designed and easy to customize."

Pricing

Basic

$9/month

  • 10 Users
  • 2GB Storage
  • Email Support
  • Phone Support
Pro Popular

$29/month

  • 25 Users
  • 25GB Storage
  • Email Support
  • Phone Support
Enterprise

$59/month

  • Unlimited Users
  • 100GB Storage
  • Email Support
  • 24/7 Phone Support

Social Buttons

Social Media Buttons
Icon Only Buttons
Outline Social Buttons

Background Colors & Utilities

Background Colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-body
.bg-white
.bg-transparent
Text Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Pills

Navigation Pills
Vertical Pills
Home Content

This is the home tab content in vertical pills.

Profile Content

This is the profile tab content.

Messages Content

This is the messages tab content.

Settings Content

This is the settings tab content.

Portfolio Components

Portfolio item
Project Title

Web Design

View Details
Creative Project

Web Design & Development

Portfolio item
App Design

Mobile Application

View Details
Mobile App UI

UI/UX Design

Portfolio item
Branding

Brand Identity

View Details
Brand Identity

Logo & Branding

Gallery (Lightbox)

Blog Components

Blog List Style
Blog thumbnail
Understanding JavaScript Closures

A comprehensive guide to understanding closures in JavaScript...

May 10, 2025 1.2k views
Blog thumbnail
React Hooks Best Practices

Learn the best practices for using React Hooks in your applications...

May 8, 2025 856 views

Audio Player

Album cover
Sample Audio Track

Artist Name • Album Name

Playlist
Track 1 - Introduction
3:45
Track 2 - Main Theme
4:12
Track 3 - Conclusion
2:58

Video Popup

Video thumbnail
Demo Video

Watch our product demo

Video thumbnail
Tutorial Video

Learn how to use our platform

Image Comparison Slider

Before vs After

Drag the slider to compare images

Before image
After image
Before After

Parallax

Parallax Section

This is a demo of a parallax section with background effects and content overlay.

Accordion

This is the first item's accordion body.

This is the second item's accordion body.

This is the third item's accordion body.

Dismissible Alert

Toast Alerts

Audio Player

0:00 0:00

Horizontal Blog Card

Image Comparison Slider

Image before
Before
Image after
After

Account Overview

  • Messages 14
  • Orders 2
  • Favorites 6
  • Settings
  • Log Out

Modal Example

Tabs Example

Overview content goes here. This is where you describe the program in detail, its benefits, who it’s for, and what students can expect.

Entry Requirements content goes here. This is where you list academic prerequisites, English requirements, or other conditions for applying.

Steps Example

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.

Steps Completed Example

Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorpser potenti elementum.

Steps Vertical Example

1
Choose your course

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

2
Learn by doing

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

3
Get instant expert feedback

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.

Steps Icon Example

Research & Analysis

Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit tempus placerat ac nunc dapibus.

Prototyping

Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia. Quisque praesent aliquam tempus phasellus ut integer.

Pixel-perfect UI Design

Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est. Magna ullamcorper potenti elementum.

Top