Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <!-- Required meta tags -->
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <!-- Bootstrap CSS -->
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
- <title>Fonts and Background Colors</title>
- </head>
- <body>
- <div class="container">
- <h2>Contextual Colors</h3>
- <p>Use the contextual classes to provide "meaning through colors":</p>
- <p class="text-muted">This text is muted.</p>
- <p class="text-primary">This text is important.</p>
- <p class="text-success">This text indicates success.</p>
- <p class="text-info">This text represents some information.</p>
- <p class="text-warning">This text represents a warning.</p>
- <p class="text-danger">This text represents danger.</p>
- <p class="text-secondary">Secondary text.</p>
- <p class="text-dark">This text is dark grey.</p>
- <p class="text-body">Default body color (often black).</p>
- <p class="text-light">This text is light grey (on white background).</p>
- <p class="text-white">This text is white (on white background).</p>
- </div>
- <div class="container">
- <h2>Contextual Backgrounds</h2>
- <p>Use the contextual background classes to provide "meaning through colors".</p>
- <p>Note that you can also add a .text-* class if you want a different text color:</p>
- <p class="bg-primary text-white">This text is important.</p>
- <p class="bg-success text-white">This text indicates success.</p>
- <p class="bg-info text-white">This text represents some information.</p>
- <p class="bg-warning text-white">This text represents a warning.</p>
- <p class="bg-danger text-white">This text represents danger.</p>
- <p class="bg-secondary text-white">Secondary background color.</p>
- <p class="bg-dark text-white">Dark grey background color.</p>
- <p class="bg-light text-dark">Light grey background color.</p>
- </div>
- <!-- Optional JavaScript; choose one of the two! -->
- <!-- Option 1: Bootstrap Bundle with Popper -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
- <!-- Option 2: Separate Popper and Bootstrap JS -->
- <!--
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
- -->
- </body>
- </html>
Add Comment
Please, Sign In to add comment