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:

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

Bootstrap Tip: In order for your site/app to work properly on mobile devices, you have to make sure the viewport META tag is in your document. Without that tag, your pages will not scale up on small screens!

<!doctype html>
<html lang="en">
  <head>
    <!-- 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>
  </head>
  <body>
    

    <!-- 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>
  </body>
</html>

Introduction

Lesson 2: Containers