The Bootstrap’s colors

Welcome to the Bootstrap color test page! This page showcases various Bootstrap components styled with different color classes to help you test and experiment with color schemes. Explore buttons, alerts, badges, cards, and other elements in each of the primary Bootstrap colors.

You can use this page to visualize how different components will look when using Bootstrap’s built-in colors. Feel free to modify the colors and styles as you see fit, and get a better understanding of how your design elements interact with various color schemes.

Alerts

Buttons

Badges

Primary Secondary Success Danger Warning Info Light Dark

Cards

Primary Card

This is a primary colored card. Use it to display content with Bootstrap’s primary color scheme.

Secondary Card

This is a secondary colored card. Use it for less important content or to give a different look.

Success Card

This card indicates success or positive action with Bootstrap’s success color.

Danger Card

This card uses Bootstrap’s danger color to signify something important or dangerous.

Warning Card

Use this card to give warnings or highlight important information that needs attention.

Info Card

This card is styled with Bootstrap’s info color for informational purposes.

Light Card

Light color card with a darker text to stand out. It’s great for subtle information.

Dark Card

A dark card for content that needs a strong and bold appearance.

Progress Bars

20%
40%
60%
80%
100%
50%

Tables

# First Name Last Name Username
1 John Doe @john
2 Jane Doe @jane
3 Sam Smith @sam
4 Anna Brown @anna
5 Tom White @tom
6 Lisa Green @lisa
7 Mike Blue @mike
8 Susan Gray @susan
Menu
My Account
Se connecter


Create an account

Not yet a member? No problem, get a free account today!

Register Now