Lesson 1: The Starter Template

Bootstrap consists of a CSS file and a JS file - actually the JS file is only used in some cases but it is good practice to include it. The Bootstrap JS libraries require jQuery, so you need to include a call to that as well. Typically you place the JS file calls at the bottom of the page. 90% of the time this works just fine. Occasionally you will run into a situation where the JS needs to be at the top of the page - just move the files up as needed.

Below, you will see the code for a starter template in Bootstrap. The calls to the CSS and JS files are using our AFIT Scripts library so you don't even need to download anything.

Starting Up
Let's start by creating a template we can use for all of the lessons I post here:

  1. Create a new page in your editor
  2. Copy the code below and replace the contents of the new file with this new code
  3. Name the file blank.htm
  4. Make a copy of blank.htm and rename the copy containers.htm

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://scripts.afit.edu/bootstrap4/css/bootstrap.min.css">

    <!-- Font Awesome CSS -->
    <link rel="stylesheet" href="https://scripts.afit.edu/fontawesome/all.min.css">

    <title>Bootstrap Starter Template</title>

    <!-- Optional JavaScript -->
    <script src="https://scripts.afit.edu/jQuery/jquery-3.6.0.min.js"></script>
    <script src="https://scripts.afit.edu/bootstrap4/js/bootstrap.bundle.min.js"></script>