Case Container

Bootstrap Case: My First Bootstrap 5 Website

Build a Bootstrap Web Page From Scratch

This guide will walk you through building a basic Bootstrap 5 web page from scratch.

We’ll start with a minimal HTML structure and progressively add Bootstrap components to create a responsive webpage.

Let’s begin with the following basic HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My First Bootstrap Page</title>
</head>
<body>
  <h1>My First Bootstrap Website!</h1>
  <p>This page will grow as we add more and more components from Bootstrap...</p>
  <p>This is a paragraph.</p>
  <p>This is another paragraph.</p>
</body>
</html>

Add Bootstrap CDN and Wrap Elements in a Container

First, include the Bootstrap 5 CSS and JavaScript Bundle (which includes Popper.js) via CDN in the <head> and before the closing </body> tag, respectively. Bootstrap 5 does not require jQuery.

Next, wrap your main content within a container element like <div class="container"> for a responsive fixed-width container, or <div class="container-fluid"> for a full-width container.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Case with Container</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container mt-3">
    <h1>My first Bootstrap website!</h1>
    <p>This page will grow as we add more and more components from Bootstrap...</p>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <!-- Bootstrap JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Tip: To make the content span the entire width of the viewport, change .container to .container-fluid:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Case with Container-Fluid</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <div class="container-fluid mt-3">
    <h1>My first Bootstrap website!</h1>
    <p>This page will grow as we add more and more components from Bootstrap...</p>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>

  <!-- Bootstrap JS Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Using mt-3 (margin-top: 3 units) is a Bootstrap spacing utility to add some space at the top of the container for better visual appearance.