Saved Bookmarks
| 1. |
Add background color to the Bootstrap Card |
|
Answer» The contextual classes are used in Bootstrap to ADD background color to a card. The following are the contextual classes that can be used: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light. The following is an example that adds background color to a Bootstrap card: <!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>Cards with different background colors</h2> <div class="card"> <div class="card-body">Default</div> </div> <br> <div class="card bg-primary text-white"> <div class="card-body">Primary</div> </div> <br> <div class="card bg-secondary text-white"> <div class="card-body">Secondary</div> </div> <br> <div class="card bg-success text-white"> <div class="card-body">Success</div> </div> <br> <div class="card bg-info text-white"> <div class="card-body">Info</div> </div> <br> <div class="card bg-warning text-white"> <div class="card-body">Warning</div> </div> <br> <div class="card bg-danger text-white"> <div class="card-body">Danger</div> </div> <br> <div class="card bg-dark text-white"> <div class="card-body">Dark</div> </div> <br> </div> </body> </html>The output displays cards with different background colors: |
|