Bootstrap

champak
Bootstrap
₹2,000.00 ₹300.00
  • 23 students
  • 13 lessons
  • 0 quizzes
  • 10 week duration

Bootstrap

Bootstrap Colors

Bootstrap provides a collection of special text colors and background colors for special purposes.

Here is a list of Text colors and a page that implements.

Muted text-muted,Primary text-primary,Success text-success,Information text-info,Warning text-warning,
Danger text-danger,Secondary text-secondary,Dark text-dark,Default Body Color text-body,Light text-light,
White text-white

 

 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Text Colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12" >
<h2>Bootstrap Colors</h2>
</div>
</div>
<div class="row">
<div class="col-sm-3" >
<p class="text-muted">Muted text-muted</p>
</div>
<div class="col-sm-3" >
<p class="text-primary">Primary text-primary</p>
</div>
<div class="col-sm-3" >
<p class="text-success">Success text-success</p>
</div>
<div class="col-sm-3" >
<p class="text-info">Information text-info</p>
</div>
</div>

<div class="row">
<div class="col-sm-3" >
<p class="text-warning">Warning text-warning</p>
</div>
<div class="col-sm-3" >
<p class="text-danger">Danger text-danger</p>
</div>
<div class="col-sm-3" >
<p class="text-secondary">Secondary text-secondary</p>
</div>
<div class="col-sm-3" >
<p class="text-dark">Dark text-dark</p>
</div>
</div>

<div class="row">
<div class="col-sm-3" >
<p class="text-body">Default Body Color text-body</p>
</div>
<div class="col-sm-3" >
<p class="text-light bg-primary">Light text-light</p>
</div>
<div class="col-sm-3" >
<p class="text-white bg-primary">White text-white</p>
</div>

</div>


</div>

</body>
</html>

 

 

These same colors can be used as link colors. Bootstrap will darken them on hover. Please try this out.

 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Text Colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12" >
<h2>Bootstrap Link Colors</h2>
</div>
</div>
<div class="row">
<div class="col-sm-3" >
<a href="#" class="text-muted">Muted text-muted</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-primary">Primary text-primary</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-success">Success text-success</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-info">Information text-info</a>
</div>
</div>

<div class="row">
<div class="col-sm-3" >
<a href="#" class="text-warning">Warning text-warning</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-danger">Danger text-danger</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-secondary">Secondary text-secondary</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-dark">Dark text-dark</a>
</div>
</div>

<div class="row">
<div class="col-sm-3" >
<a href="#" class="text-body">Default Body Color text-body</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-light bg-primary">Light text-light</a>
</div>
<div class="col-sm-3" >
<a href="#" class="text-white bg-primary">White text-white</a>
</div>

</div>


</div>

</body>
</html>

 

 

The list of background colors are.

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

 


<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Background Colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
<div class="row">
<div class="col-sm-12" >
<h2>Bootstrap Link Colors</h2>
</div>
</div>
<div class="row">

<div class="col-sm-3" >
<h1 class="bg-primary">Primary bg-primary</h1>
</div>
<div class="col-sm-3" >
<h1 class="bg-success">Success bg-success</h1>
</div>
<div class="col-sm-3" >
<h1 class="bg-info">Information bg-info</h1>
</div>
</div>

<div class="row">
<div class="col-sm-3" >
<h1 class="bg-warning">Warning bg-warning</h1>
</div>
<div class="col-sm-3" >
<h1 class="bg-danger">Danger bg-danger</h1>
</div>
<div class="col-sm-3" >
<h1 class="bg-secondary">Secondary bg-secondary</h1>
</div>
<div class="col-sm-3" >
<h1 class="bg-dark">Dark bg-dark</a>
</div>
</div>




</div>

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *