Bootstrap Text Background Color

by Abhishek 27-Aug-16

0 995


Bootstrap contextual background color classes used for background color class used. Bootstrap Text Background Color works as a highlighter, It's very useful toll and it's use in routine for website designers.

These all are default color classes. For this we don't need to give any background color names, size and others, just we use the default classes. For more brief knowledge please see below example with result.

Classes: bg-primary, bg-success, bg-danger, bg-info, bg-warning, bg-muted.

Example:

<!DOCTYPE html>
<html>
<head>
<link href ="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<div class="container">

<p class="bg-primary"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
<p class="bg-success"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
<p class="bg-info"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
<p class="bg-danger"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
<p class="bg-warning"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
<p class="bg-muted"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor varius lacus, vitae feugiat dolor sagittis vitae. </p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Result:

Bootstrap Text Background Color


Share:


Discount Coupons



Comments

    Waiting for your comments

Leave a Reply