1. Course content
  2. Wrap it in Bootstrap

Wrap it in Bootstrap

The story so far

You've learned a few HTML tags, and CSS properties. You know about different types of links. You can make simple Web pages, and small sites.

But… the look kinda sucks.

Table of suck

Here's a table you saw before.

Look sucks

With Bootstrap we can make templates. Drop our code into a Bootstrap template, and we get:

Good table

Aaahhh! Much better. We drop in the HTML, and Bootstrap makes it look nice. W00t!

Bootstrap to the rescue

Bootstrap is a set of HTML templates, style sheets, and JavaScript code that will do most of the make-it-look-good work for you.

Bootstrap has its own way of using HTML and CSS. It's in the documentation. You don't need to understand how Bootstrap works. Just copy code from the documentation, paste it into your code, and change it to do what you need.

Bootstrap is complicated, but you don't need to learn it all. Just as you learned a little HTML, and a little CSS, you'll learn a little Bootstrap, enough to make CRUD apps. If you want to do more, the documentation will show you how.

There are several versions of Bootstrap. We're working with Bootstrap 4. Before you paste code into your project, make sure its for version 4. Stick with the official docs if you can.

Responsive by default

Bootstrap sites are responsive, that is, they adjust automatically to different screen sizes. That means that your Bootstrap sites will work on laptops, tablets, and phones, without you having to do anything special. W00t! That's a Big Win.

Exercise: Subdomain for Bootstrap exercises
Make a subdomain called bootstrap. This is where your exercise solutions for this course module will go.

Add encryption, if you have Let's Encrypt.

Put an HTML file called index.html in the root of the subdomain. Recall that index.html is the default file that the server returns when the user doesn't type the file name.

Use <h1> and <p> tags in index.html. Add an animal joke.

Your page will have two URLs:

  • https://bootstrap.YOUR DOMAIN/index.html
  • https://bootstrap.YOUR DOMAIN

(If you didn't use encryption, the protocol will be http, not https.)

Test that both URLs work. Submit them both.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)

Summary

  • Bootstrap is an HTML/CSS/JS framework that will make your sites look good, without your having to do much work.
  • Bootstrap is responsive by default. It will work on laptops, tablets, and phones.