Starter Template and Reboot

Every Bootstrap 2,007 page starts from the same skeleton: the HTML5 doctype (without it browsers use quirks mode), the viewport <meta> tag (without it phones render a 980-pixel desktop layout and shrink it), the stylesheet in <head>, and the JavaScript bundle at the end of <body>.

The Bootstrap 5.3.8 starter template with an alert and a dropdownHTMLLive

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap starter</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
    integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
    rel="stylesheet" crossorigin="anonymous">
</head>
<body>
  <main class="container py-4">
    <h1>Hello, Bootstrap!</h1>
    <div class="alert alert-success">Bootstrap 5.3.8 is loaded.</div>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Version</button>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">5.3.8 (stable)</a></li>
        <li><a class="dropdown-item" href="#">6.0 (alpha)</a></li>
      </ul>
    </div>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
    crossorigin="anonymous"></script>
  <script>document.querySelector('.dropdown-toggle').click();</script>
</body>
</html>

Browser output of 2

The last <script> only opens the dropdown for the screenshot. Later listings show just the page content and assume this <head> and bundle.

The first rules in bootstrap.css after its variables are Reboot, element-only resets built on Normalize.css 53,518 . Reboot sets box-sizing: border-box on every element (CSS explains the box model), a native system font stack at 1rem through --bs-body-font-family, bottom-only margins on headings and paragraphs so margins never collapse unexpectedly, cursor: pointer on buttons and <summary>, and [hidden] { display: none !important; }. If you want only these resets, link bootstrap-reboot.min.css; the grid and utilities also ship as standalone files.

MENU