Introduction to Bootstrap

Contents

Overview
Downloading Bootstrap
Code Additions
Add general.css

Overview

Bootstrap is the most popular HTML, CSS, and JavaScript framework in the world for building responsive, mobile-first websites.

A framework is pre-written code that aims to alleviate the overhead associated with common activities performed in web development. PRO: you don’t need to reinvent the wheel, the code is already written! CON: you have to learn OPC (other people’s code).

With Bootstrap, it is easy to quickly build responsive websites (meaning the function and look good on all device sizes). It is free and open-source. You can easily construct page layouts and use components — it contains CSS- and JavaScript-based templates for typography, forms, buttons, navigation, and other interface components. There are lots of pre-built classes to implement and then customize.

Slides

Downloading Bootstrap

To use Bootstrap in your project, follow these instructions:

Go to the getbootstrap.com download page
Scroll down to the Compiled CSS and JS section
Click the Download button
The resulting compressed file will include a folder with two sub-folders: one called css and one called js. These contain all the necessary code you will need for the framework. Move those two folders into your project folder.

Code Additions

Next, you will need to make some additions to your code to implement the Bootstrap framework.

Adjust your the <head> of your HTML document so it looks like the code below. The two meta elements *must* come first in the head. Any other head content must come after these.



<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>

Include the link for the Bootstrap CSS file in the <head> of your HTML file:



<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">

Add this right before your </body>. This is to include Javascript for interactive components like dropdowns, overlays, etc.



<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

<!-- Include Bootstrap components -->
<script src="js/bootstrap.min.js"></script>

If you don't want to type any of this, you can use this starting project set up which includes all of the Bootstrap files (v5.3.0) and an HTML file.

Add general.css

You still need to add your own CSS file for any custom CSS you may need to do. Place this reference under the reference to the bootstrap CSS file:



<!-- the Bootstrap CSS -->
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">

<!-- please your general one here -->
<link rel="stylesheet" type="text/css" href="css/general.css">