English

Bootstrap Tutorial

Bootstrap Layouts

Bootstrap Content

Bootstrap Components

Bootstrap Forms

Bootstrap Helpers

Bootstrap Utilities

Bootstrap Demos

Bootstrap - Starter Template Demo

Hello there, aspiring web developers! Today, we're going to dive into the wonderful world of Bootstrap and explore its starter template. As your friendly neighborhood computer science teacher, I'm excited to guide you through this journey. So, grab your favorite beverage, get comfortable, and let's begin!

Bootstrap-Starter template Demo

What is a starter template?

Before we jump into the nitty-gritty of Bootstrap's starter template, let's understand what a starter template actually is. Think of it as a pre-made recipe for your website's structure. Just like how a recipe gives you the basic ingredients and instructions to create a delicious dish, a starter template provides you with the essential HTML, CSS, and JavaScript to kickstart your web project.

In the context of Bootstrap, a starter template is a basic HTML file that includes all the necessary Bootstrap components and dependencies. It's like having a blank canvas with all your painting tools already set up and ready to go!

Why use a starter template?

You might be wondering, "Why should I bother with a starter template? Can't I just write everything from scratch?" Well, you absolutely could, but let me share a little story from my early teaching days.

I once had a student who insisted on building everything from the ground up. While admirable, he spent weeks struggling with basic layout issues that Bootstrap could have solved in minutes. Don't be like that student - work smarter, not harder!

Using a starter template:

  1. Saves time
  2. Ensures you have all necessary dependencies
  3. Provides a consistent starting point
  4. Helps you focus on actual content and functionality

Now that we understand the 'why', let's look at the 'how'!

The Bootstrap Starter Template

Here's what a basic Bootstrap starter template looks like:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Let's break this down piece by piece:

The Document Type Declaration

<!doctype html>

This line tells the browser that this is an HTML5 document. It's like introducing yourself before starting a conversation - it sets the tone for everything that follows.

The HTML Tag

<html lang="en">

This opens our HTML document and specifies that the language is English. It's like opening a book and seeing that it's written in English.

The Head Section

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

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

The <head> section contains metadata about our document. Let's break it down:

  1. <meta charset="utf-8">: This specifies the character encoding for the HTML document. UTF-8 is a universal character encoding that can represent any character.

  2. <meta name="viewport" content="width=device-width, initial-scale=1">: This ensures that the webpage is responsive and looks good on all devices.

  3. The <link> tag imports Bootstrap's CSS file from a Content Delivery Network (CDN). This is like importing a styling guidebook for your webpage.

  4. <title>: This sets the title of your webpage, which appears in the browser tab.

The Body Section

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

  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  -->
</body>

The <body> section is where the main content of your webpage goes. In this starter template, it includes:

  1. A simple "Hello, world!" heading to get you started.
  2. JavaScript files for Bootstrap functionality. You have two options:
    • Option 1: A single bundled file that includes both Bootstrap and Popper.js (a library Bootstrap depends on for some components).
    • Option 2: Separate files for Popper.js and Bootstrap (commented out by default).

Using the Starter Template

Now that we've dissected our starter template, let's put it to use! Here's a simple example of how we can build upon this template:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>My First Bootstrap Page</title>
  </head>
  <body>
    <div class="container">
      <h1 class="mt-5">Welcome to My Website!</h1>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  </body>
</html>

In this example, we've added a simple hero unit (a prominent message box) using Bootstrap classes. Let's break down what we've added:

  1. <div class="container">: This creates a responsive fixed-width container.
  2. <h1 class="mt-5">: The mt-5 class adds margin to the top of the heading.
  3. <p class="lead">: The lead class makes this paragraph stand out.
  4. <hr class="my-4">: This creates a horizontal rule with margin on the y-axis.
  5. <a class="btn btn-primary btn-lg">: This creates a large, primary-colored button.

Conclusion

And there you have it, folks! We've journeyed through the land of Bootstrap starter templates, from understanding what they are to creating a simple webpage using one. Remember, this is just the beginning. Bootstrap offers a wealth of components and utilities that you can use to create stunning, responsive websites.

As we wrap up, I'm reminded of another student I had. She started with this very same template and, by the end of the semester, had created a portfolio site that landed her an internship. Who knows? Maybe that'll be you in a few months!

Keep practicing, keep exploring, and most importantly, have fun with it. Web development is as much an art as it is a science, so let your creativity shine through. Until next time, happy coding!

Credits: Image by storyset

Previous Tutorial:
Bootstrap-Masonry Demo
Next Tutorial:
Bootstrap-Album RTL Demo