24 Bootstrap

Important

This chapter is being rewritten to utilize Github Codespaces as the primary development platform, which is a recent change. Please bring to my attention anything that doesn’t make sense.

Bootstrap is a HTML/CSS/Javascript framework for designing websites and web applications. Using Bootstrap saves time and effort because common parts of a web site – navigation, buttons, colors, boxes, grids – are all pre-built, but also customizable. Its “mobile-first, responsive design” framework allows you to make websites or web applications that look great on a phone, tablet or desktop. While Bootstrap is only one of many frameworks available, it is very popular one.

With the lesson we return to the teaching method of Tutorial > Practice > Mastery.

Tip

There is a screencast of this lesson with explanations in Canvas under Panopto Video. Look for Bootstrap practice lesson.

24.1 Tutorials

Throughout this lesson, we will extensively refer to the Bootstrap documentation.
You should also go through the first part of the Tutorial Republic’s Tutorial Republic’s Bootstrap 5 tutorial starting with “Bootstrap Introduction” through “Bootstrap Responsive Layout” – before jumping into this week’s Practice lesson. You are free to go through the rest, or come back to specific tutorial pages as needed.
There are other tutorials if you are interested, like W3 Schools’ Bootstrap 5 Tutorial or the video-based Net Ninja Bootstrap 5 Crash Course Tutorial.

24.2 Goals for this section

We will:

Discuss the benefits of using a mobile-first framework.
Add pre-built components like navigation, etc.
Use Bootstrap’s grid-system to create a responsive website.
Introduce Sass/SCSS for customization.

24.3 Create your project and Github repo

We’ll take some leaps of faith and create our project and get all our files, so we have something to talk about within the lesson.

Codespaces

These directions assume you are using Github codespaces. If you want to run this rig on your own machine there is move involved. Look to the repo’s README file for some tips on that.

24.4 Repo from a template

Like our last Sass chapter, we are going to start our project by copying a Github repo and then using a Codespace from your new repo.

Go to github.com/utdata/icj-bootstrap-template.
Click on the green Use this template button and choose Create a new repository.
- This should allow you to create new repo based on icj-bootstrap-template. Call this new repo yourname-bootstrap.
- Leave all the other settings the same and click Create repository.
- It takes several seconds to create your repo.
Click on the green <> Code button and then choose the Codespaces tab.
- Click Create codespace on main.
- This will take a bit more time, but should just be a couple of minutes. It will pause at one point and give you a prompt, but wait until after you see it say “Detected Node.js” and let it finish that setup.
- Once the Node installation finishes, your browser will look like you have a version of Visual Studio Code open, and you do!
In the codespace’s VS Code Terminal, run:
```
npm install -g gulp
```
In the Terminal, run gulp dev.

If you get errors, you might have to try npm install and then run gulp dev again.

24.5 Review the template files

This project is similar to the Sass template in that it uses the Node development environment. There are a couple of differences so we’ll review the files.

24.5.1 The docs folder

The docs/ folder is where all our finished site files go. It is the folder that will be read by the web server.

Warning

DO NOT EDIT FILES IN THE DOCS FOLDER!!! All the files in docs/ get regenerated when you are running gulp dev.

Most web apps like this will use a folder called dist/ or public/ for their published files, but we are using docs/ to take advantage of some free web serving services offered by Github.

Inside our docs folder, you will eventually see the following:

A css/ folder with all our compiled css. We won’t edit these files, because we will be using Sass and editing from the src/scss/ folder.
A js/ folder. There are some Node.js server tasks that will copy files here for us.
An index.html file. This is the HTML page we will be building, but we will will be editing it from the src/ folder.

24.5.2 The src folder

This is where we edit our files. Any change we make here gets compiled or copied into the docs/ folder by our Node.js server.

Our .html files sit loose in the src/ folder (or put into subfolders). These get copied into docs/ in the same relative location.
The img folder is for our original image files. They get “minified” and placed in docs/img/.
The scss folder has styles.scss file were we will add all our Sassy css.

When we run gulp dev we also launch a live server that will rebuild our project when we save our source files.

24.5.2.1 Inspect the html file

While we are in our src folder, let’s look at our HTML.

Open src/index.html and take a look at it.

There are several things going on here with this file beyond the base HTML. In the <head> we are pulling in css file that will be generated through Sass, including for the Bootstrap framework. At the bottom we are pulling in the JavaScript file that we need for Bootstrap, which will also be copied there by our development environment.

24.5.2.2 Inspect the scss file

Open the src/scss/styles.scss file

You’ll see a lot of comments in this file to explain some things. There is an @import command here that pulls in all the Bootstrap css from our node_modules folder that we downloaded when we ran npm install. You don’t see the result yet on our index page, but you will soon. There are also some comments to guide you.

24.5.3 Inspect the configuration files

The remaining files in the root level of the project are configuration files that help make this development ecosystem run.

The .gitignore file. It’s configured for a Node.js based web app.
The README.md file explains how to get started with this template.
The gulpfile.js is our magic task runner. More on that below.
The package.json and package-lock.json files keep track of all the npm packages we are using. When you run $ npm install, it downloads all the software into the node_modules folder, which is NOT saved into Github because it contains thousands of files.

24.5.3.1 More about the gulpfile

Gulp is our task runner that creates our server, compiles our CSS and copies files where we need them. The gulpfile.js is the main controller file works works with a series of files in the tasks folder.

Each task file does a single thing, like clean out folders, copy files to different directories, or run the Sass CSS compiler. Each task uses one or more node packages to do its work, and the names of the file indicates more or less what that is. We might review some of these in class and you are free to poke around there, but I’d be careful in editing these files at this point.

This setup gives us the two commands that we will use the most:

gulp will compile our CSS and copy all our files into the docs/ folder.
gulp dev will do all of the above, plus start our web server so we can see our page.

I can tell you I did not write all this JavaScript. I found examples on the web that were close to what I needed and I used those, along with documentation, to configure them for my needs. In some cases I had to reach out to other developers to help me.

24.6 Launch

Let’s run it and see if it works.

In your VS Code Terminal, do this:
```
gulp dev
```

With any luck a browser will launch and you’ll see some dummy text “Testing: 1, 2, 3, 4” on your screen. This means everything should be good to go.

Congrats! You are now ready to get down to business and build a website.