Bootstrap Colors
Bootstrap support class for color.The following is class used for coloring purpose.
Example
Bootstrap support class for color.The following is class used for coloring purpose.
- text-primary
- text-secondary
- text-success
- text-danger
- text-warning
- text-info
- text-light
- text-dark
- text-muted
- text-white
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<span
class="text-primary">This
is the example of "text-primary"</span><br/>
<span
class="text-secondary">
This
is the example of "text-secondary"</span><br/><span
class="text-success">This
is the
example
of "text-success"</span><br/>
<span
class="text-danger">This
is the example of "text-danger"</span><br/>
<span
class="text-warning">This
is the example of "text-warning"</span><br/>
<span
class="text-info">
This
is the example of "text-info"</span><br/>
<span
class="text-light">This
is the example
of
"text-light"</span><br/>
<span
class="text-dark">This
is the example of "text-dark"</span><br/>
<span
class="text-muted">This
is the example of "text-muted"</span><br/>
<span
class="text-white">
This
is the example of "text-white"</span>
</body>
</html>
Output
This is the example of "text-primary"
This is the example of "text-secondary"
This is the example of "text-success"
This is the example of "text-danger"
This is the example of "text-warning"
This is the example of "text-info"
This is the example of "text-light"
This is the example of "text-dark"
This is the example of "text-muted"
This is the example of "text-white"
This is the example of "text-secondary"
This is the example of "text-success"
This is the example of "text-danger"
This is the example of "text-warning"
This is the example of "text-info"
This is the example of "text-light"
This is the example of "text-dark"
This is the example of "text-muted"
This is the example of "text-white"
For Background coloring Bootstrap uses the following class
Example
Output :
This is the example of "bg-primary"
This is the example of "bg-secondary"
This is the example of "bg-success"
This is the example of "bg-danger"
This is the example of "bg-white"
This is the example of "bg-dark"
This is the example of "bg-light"
This is the example of "bg-info"
This is the example of "bg-warning"
For Gradient coloring Bootstrap uses the following class
- bg-primary
- bg-secondary
- bg-success
- bg-danger
- bg-white
- bg-dark
- bg-light
- bg-info
- bg-warning
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<span
class="bg-primary">This
is the example of "bg-primary"</span><br/>
<span
class="bg-secondary">This
is the example of "bg-secondary"</span><br/>
<span
class="bg-success">This
is the example of "bg-success"</span><br/>
<span
class="bg-danger">This
is the example of "bg-danger"</span><br/>
<span
class="bg-white">This
is the example of "bg-white"</span><br/>
<span
class="bg-dark">This
is the example of "bg-dark"</span><br/>
<span
class="bg-light">This
is the example of "bg-light"</span><br/>
<span
class="bg-info">This
is the example of "bg-info"</span><br/>
<span
class="bg-warning">This
is the example of "bg-warning"</span><br/>
</body>
</html>
This is the example of "bg-primary"
This is the example of "bg-secondary"
This is the example of "bg-success"
This is the example of "bg-danger"
This is the example of "bg-white"
This is the example of "bg-dark"
This is the example of "bg-light"
This is the example of "bg-info"
This is the example of "bg-warning"
For Gradient coloring Bootstrap uses the following class
- bg-gradient-primary
- bg-gradient-secondary
- bg-gradient-success
- bg-gradient-danger
- bg-gradient-warning
- bg-gradient-info
- bg-gradient-light
- bg-gradient-dark
No comments:
Post a Comment