Use a Bootstrap theme

Tags
Bootstrap, Stylesheets
Challenge
No

Make an HTML page with this code in it:

  • <!doctype html>
  • <html lang="en">
  • <head>
  •     <meta charset="utf-8">
  •     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  •     <title>Sample</title>
  •     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
  •           integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  • </head>
  • <body>
  • <div class="container">
  •     <div class="row">
  •         <div class="col">
  •  
  •             <nav class="navbar navbar-expand-lg navbar-light bg-light">
  •                 <a class="navbar-brand" href="javascript:void(0)" title="Home">DoggoLand</a>
  •                 <button class="navbar-toggler" type="button" data-toggle="collapse"
  •                         data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
  •                         aria-expanded="false" aria-label="Toggle navigation">
  •                     <span class="navbar-toggler-icon"></span>
  •                 </button>
  •  
  •                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
  •                     <ul class="navbar-nav me-auto">
  •                         <li class="nav-item dropdown">
  •                             <a class="nav-link dropdown-toggle" title="Get your thrill on!" href="javascript:void(0)"
  •                                id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
  •                                aria-expanded="false">
  •                                 Rides
  •                             </a>
  •                             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  •                                 <a class="dropdown-item" title="Spinning fun!" href="javascript:void(0)">Doggotron</a>
  •                                 <a class="dropdown-item" title="I'll be bark" href="javascript:void(0)">Doggolator</a>
  •                                 <a class="dropdown-item" title="A bazillion happy doggos" href="javascript:void(0)">Dogarium</a>
  •                             </div>
  •                         </li>
  •                         <li class="nav-item">
  •                             <a class="nav-link" href="javascript:void(0)" title="Buy your tickets here" tabindex="-1"
  •                                aria-disabled="true">Tickets</a>
  •                         </li>
  •                         <li class="nav-item">
  •                             <a class="nav-link" href="javascript:void(0)" title="Where we are">Location</span></a>
  •                         </li>
  •                     </ul>
  •                 </div>
  •             </nav>
  •  
  •             <h1>Doggos</h1>
  •             <div class="mt-4 p-5 bg-light rounded">
  •                 <h1 class="display-4">Hello, doggo fans!</h1>
  •                 <p class="lead">DoggLand is the barkiest place in the world. </p>
  •                 <a class="btn btn-primary btn-lg" href="javascript:void(0)" role="button">Learn more</a>
  •             </div>
  •             <p>Doggos are the <em>best!</em></p>
  •  
  •             <div class="card" style="width: 18rem;">
  •                 <img src="https://web.skilling.us/sites/default/files/lessons/basic-sites/images/rosie1.jpg"
  •                      class="card-img-top" alt="Rosie">
  •                 <div class="card-body">
  •                     <h5 class="card-title">Rosie</h5>
  •                     <p class="card-text">A cute Jack Russel terrier. A little hyper. Now and then.</p>
  •                     <a href="javascript:void(0)" class="btn btn-primary">Go somewhere</a>
  •                 </div>
  •             </div>
  •  
  •         </div>
  •     </div>
  • </div>
  • <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
  •         integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
  •         crossorigin="anonymous"></script>
  • </body>
  • </html>

Change it, to use the Superhero theme from Bootswatch.

Submit your URL, as usual.

Where referenced
Using a BS theme