Full Stack Developer Masters Program (66 Blogs) Become a Certified Professional

How are Bootstrap Colors Implemented?

Last updated on Jun 10,2024 21.7K Views

8 / 12 Blog from Boostrap

Bootstrap is a platform for web development based on a front-end framework. It is used to create exceptional responsive designs using HTML, and CSS. These templates are used for forms, tables, buttons, typography, models, tables, navigation, carousels and images. Bootstrap Color is used to make your background and text look aesthetically pleasing.  In this blog, you will be studying:

 

Text Bootstrap Color

The text bootstrap color is used to explain meaning through colors. In Bootstrap, there are multiple colors to explain to express the significance of a text. The classes of text colors are:

ClassDescription

.text-muted

Indicates the text color in light grey. Used to mute the text.

.text-primary

Indicates the text color in blue. Used to indicate the importance of a text

.text-success

Indicates the text color in green. Used to indicate success

.text-info

Indicates the text color in light blue. Used to indicate some information

.text-warning

Indicates the text color in yellow. Used to indicate a warning

.text-danger

Indicates the text color in red. Used to indicate danger

.text-secondary

Indicates the text color in grey. Used to indicate secondary text

.text-white

Indicates the text color in white

.text-dark

Indicates the text color in dark grey

.text-body

Indicates the text color in black. This is the default text color

.text-light

Indicates the text color in light grey on the white background

Now that we have learned about the different types of classes of bootstrap color and their meaning, let’s execute them.

Example:

<body>
<div class="container">
<h2> Contextual Colors </h2>
<p> Use the contextual classes to provide "meaning through colors”: </p>
<p class = "text-muted"> This text is muted. </p>
<p class = "text-primary" > This text is important. </p>
<p class = "text-success"> This text indicates success. </p>
<p class = "text-info"> This text represents some information. </p>
<p class = "text-warning"> This text represents a warning. </p>
<p class = "text-danger"> This text represents danger. </p>
<p class = "text-secondary"> Secondary text. </p>
<p class = "text-dark"> This text is dark grey. </p>
<p class = "text-body"> Default body color (often black). </p>
<p class = "text-light" > This text is light grey (on white background). </p>
<p class = "text-white"> This text is white (on white background). </p>
</div>
</body>

Output:

output - bootstrap color - edureka

 

In addition to that, you can also add 50% opacity using the “.text-black-50” or “.text-white-50” classes.

For Example:

<body>
<div class = "container">
<p> Add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes: </p>
<p class = "text-black-50"> Black text with 50% opacity on white background </p>
<p class = "text-white-50 bg-dark"> White text with 50% opacity on black background </p>
</div>
</body>

Output:

 

Background Colors

The background-colors classes that can be used are:

ClassDescription

.bg-primary

 Highlights the important text in ink blue

.bg-success

Highlight the success text in green

.bg-info

Highlights the infomation in light blue

.bg-warning

 Highlights the warning text in yellow

.bg-red

Highlights the danger text in red

.bg-secondary

Highlights the secondary text in grey

.bg-dark

Highlights the text in grey

.bbg-lights

Highlights the text in light grey

Example:

<body>
<div class="container">
<p> Use the contextual background classes to provide " meaning through colors". </p>
<p> Note that you can also add a .text - * class if you want a different text color: </p>
<p class = "bg-primary text-white"> This text is important. </p>
<p class = "bg-success text-white"> This text indicates success. </p>
<p class = "bg-info text-white"> This text represents some information. </p>
<p class = "bg-warning text-white"> This text represents a warning. </p>
<p class = "bg-danger text-white"> This text represents danger. </p>
<p class = "bg-secondary text-white"> Secondary background color. </p>
<p class = "bg-dark text-white"> Dark grey background color. </p>
<p class = "bg-light text-dark"> Light grey background color. </p>
</div>
</body>

Output:

Output - Bootstrap color - edureka

 

With this, we have come to the end of this article. I hope you understand how bootstrap color is used to style.

Check out our Full Stack Developer Training which comes with instructor-led live training and real-life project experience. This training will make you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.

Got a question for us? Please mention it in the comments section of the “Bootstrap Color” blog and we will get back to you.

Upcoming Batches For Full Stack Web Development Course
Course NameDateDetails
Full Stack Web Development Course

Class Starts on 12th October,2024

12th October

SAT&SUN (Weekend Batch)
View Details
Comments
0 Comments

Join the discussion

Browse Categories

webinar REGISTER FOR FREE WEBINAR
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP

Subscribe to our Newsletter, and get personalized recommendations.

image not found!
image not found!

How are Bootstrap Colors Implemented?

edureka.co