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
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 |