Bootstrap Text Background Color

0 5107

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>