Saved Bookmarks
| 1. |
Which Bootstrap class is used for labels? |
|
Answer» The .label class is used in Bootstrap to create labels. The purpose of using labels is to provide additional information. For example, mentioning “NEW” for a PRODUCT. It can also be used to set count, tips, etc. Let us see an example: <h1>Laptop Charger <span class = "label label-default"> NEW </span> </h1>To change the color of the label, use contextual classes: .label-default, .label-primary, .label-success, .label-info, .label-WARNING or .label-danger, etc. An example: <h1>Laptop Charger <span class = "label label-primary"> NEW </span> </h1>Above gives a BLUE color to the label since we have used the label-primary class. Now, we will work to create some more labels and color them: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Labels</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Products Information</h2> <h2>Product 1 <span class="label label-default">20</span></h1> <h2>Product 2 <span class="label label-primary">30</span></h2> <h2>Product 3 <span class="label label-info">19</span></h2> <h2>Product 4 <span class="label label-success">50</span></h2> <h1>All the labels</h1> <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> </div> </body> </html>The output |
|