-->

28 April 2020

Bootstrap Label

  Asp.Net CS By Example       28 April 2020

Bootstrap Label

 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
Bootstrap Label

 In the above output, we can clearly see that we have created diffrent type of label using Bootstap label classes.

logoblog

Thanks for reading Bootstrap Label

No comments:

Post a Comment

Please do not enter any spam link in the comment box.