DocHero
Lesson 4 +10 XP

The Starter Template

The Starter Template

A good Bootstrap 5 page uses an HTML5 doctype and a viewport meta tag for proper responsive behavior.

The full template

<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

What each part does

  • <!doctype html> tells the browser this is an HTML5 page.
  • <meta charset="utf-8"> sets the character encoding.
  • The viewport meta tag ensures proper rendering and touch zooming on mobile devices.
  • The CSS link loads the Bootstrap styles.
  • The bundle script enables interactive components.

Why the viewport matters

Without the viewport meta tag, mobile devices may render the page at a desktop width and zoom out, making everything tiny. Add it to every page:

<meta name="viewport" content="width=device-width, initial-scale=1">

TL;DR

  • Always start with the HTML5 doctype.
  • Always include the viewport meta tag.
  • Load CSS in the head and JS before the body ends.