<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> </head> <body> <div class="container"> <h1>Hello, world!</h1> <p>This is a fancy Bootstrap page. Bootstrap gives you nice fancy default styles</p> <div class="row"> <div class="col">Bootstrap</div> <div class="col">comes with</div> <div class="col">built-in columns</div> </div> <hr> <table class="table"> <thead> <tr> <th scope="col">Fancy</th> <th scope="col">Bootstrap</th> <th scope="col">Table</th> </tr> </thead> <tbody> <tr> <td>How</td> <td>do</td> <td>you like</td> </tr> <tr> <td>these</td> <td>fancy</td> <td>tables?</td> </tr> </tbody> </table> <div class="alert alert-primary" role="alert"> Bootstrap comes with pre-built components that extend normal HTML </div> <div class="card" style="width: 18rem;"> <div class="card-body"> <h5 class="card-title">This is a card</h5> <p class="card-text">Cards are for small self-contained blocks of content</p> <a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Another link</a> </div> </div> <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="me-auto">Notification</strong> <small>2 mins ago</small> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> </div> <div class="toast-body"> This is a default Bootstrap Notification component </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script> </body> </html>