In this post, we are learning about Bootstrap Label.
In previous post I wrote about what is Bootstrap?,
How to setup Bootstrap?,
Bootstrap Grid System,
Bootstrap Container Class ,
Bootstrap Nested column and
Bootstrap Offset Columns.
Label is basic components in Bootstrap. We can use it with any
text-like components to display a highlighted text. Label is created using inline elements such as <span>,with a class .label and
many color classes such as .label-default for a dark gray color.
Different colors available for labels are as follows:
|
Sr.No
|
Classes
|
Description
|
|
1)
|
label-default
|
This is used for creating a dark gray-colored label
|
|
2)
|
label-primary
|
This is used for creating a dark blue-colored label
|
|
3)
|
label-info
|
This is used for creating a light blue-colored label
|
|
4)
|
label-success
|
This is used for creating a green-colored label
|
|
5)
|
label-warning
|
This class is used for creating a yellow color label
|
|
6)
|
label-danger
|
This is used for creating a red-colored label
|
Following example demonstrates all the above label classes:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created diffrent type of label using Bootstap label classes.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.