InterviewSolution
Saved Bookmarks
InterviewSolution
| 1. |
Why do we use badges in Bootstrap? |
|
Answer» If you want to add additional information to your content, then use Badges in Bootstrap. Badges LOOKS like labels, but the corners of Badges are more rounded. If you have a newly launched product and you add the same on your website, then you can add a Badge there as it is “NEW”. To add a Badge, just add the following with the content of the Badge: <span class ="badge"> Content </span>Or you can ALSO use it for count of posts in a blog: <span class ="badge"> 20 </span>Let us see an example: <!DOCTYPE HTML> <html LANG="en"> <head> <title>Bootstrap Example</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.1.3/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.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Products</h2> <h3>Trousers<span class="badge badge-primary">New</span></h3> </div> </body> </html>The output displays a blue colored Badge, since we have used .badge-primary contextual class: We can change the color of Badge by adding other contextual classes like .badge-secondary, badge-info, badge-danger, .badge-warning, .badge-light, .badge-dark, etc. Let us see another example of colored badges: <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.1.3/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.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Products</h2> <h3>Trousers<span class="badge badge-primary">New</span></h3> <h3>Laptop<span class="badge badge-secondary">New</span></h3> <h3>Headphone<span class="badge badge-info">New</span></h3> <h3>Bags<span class="badge badge-warning">Sold</span></h3> </div> </body> </html>The output: |
|