The Big Bang of Web Development: What Is Bootstrap?

Welcome back to our cosmic exploration of web development!

If you ever need to review our previous stages of web development evolutions, just look here:

1: Starting at index.html

2: Adding some style with CSS

3: Get moving with JavaScript

Hopefully with the weeks off due to my travel schedule you've been able to dive a bit deeper into JS or HTML or CSS. We'll be deviating away from the basics for a bit to get to know how the landscape has changed (and a little bit of why).

This week, let's take a look at Bootstrap. Bootstrapping websites became quite popular in 2011. Why did it become so popular? Two primary reasons: it's easier on the developer - developing custom CSS is tedious; it provides a consistent user experience - created by Twitter, people knew how to interact with page because they were already trained on the layout from using Twitter.

Nowadays, when creating a custom webpage, Bootstrapping is the bare minimum expectation for design. It's more of an expectation than a design decision. And we'll see why.

Remember that lovely webpage we made?

Yea, that one. Open that back up again, because we are going to make a few simple changes and turn the experience from drab to fab.

It's pretty simple to get started. All we have to do is swap out our stylesheet link in the index.html file. Instead of pointing to the file we created, we'll point to the Bootstrap cloud hosting of the CSS stylesheets.

DELETE your stylesheet link in the header. In its place, PASTE in the Bootstrap link tag.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

SAVE your changes. Now open your index.html file in the browser and see how that change impacted your app.

Some of our styles don't exist in the Bootstrap styling, so you may immediately notice those color changes. Another thing you might notice is the font is different. Bootstrap's default font is different than the browsers. And one of the last key differences we see is the button. The button styling is bigger and more squared-off than the default.

Let's update some of our styling tags.

Back on the Bootstrap website, you can find the documentation about styling.

If we explore the documentation, we can find some more information about styling images. Take a look! Go to Documentation, then Content, and then Images.

We can make the image responsive to screen size and density. When you are designing your web pages, you always need to be thinking about the desktop and mobile browser use case. Many viewers will be coming in through a mobile browser, and the user experience on both the web and mobile needs to be considered.

If you scroll down on the Images page, you will be styling for responsive images, thumbnails, and pictures. Let's try out the responsive styling for our image.

Copy the class portion of the styling code snippet.

class="img-fluid"

Open your index.html file in a text editor. Add the class property to the image tag you already have.

<img id="myImage" class="img-fluid">

SAVE your changes, and refresh your index.html file in the browser. Click the Load Picture button. As you change your browser window size, notice how the image also changes size instead of being cut off.

Bootstrap also has styled new tags like the sample tag, which can be found under Content > Code. Let's style our second paragraph as if it was a computer output.

Replace the <p> tags with the <samp> tag.

<samp>And then I added more that I want to be in a new paragraph. </samp>

SAVE your changes and run the index.html file in the browser.

But now we lost some styling! The link is no longer on a new line. When I showed you how to break things up before, we used the <br /> tag. While this works, it's not a good practice. What we should you use are styled <div> tags. <div> helps us define a section of tags, text, and elements that we want to be grouped together. It helps define a "fenced off" area on a page. You can nest div tags to create further styling.

Wrap the <samp> line with a <div>.

Under the Utilities section of the Bootstrap documentation, we can find more information about how to style these div boxes. Looking at the display section, we can find examples of how to display text. I'm grabbing the blue d-block example.

class="d-block p-2 bg-primary text-white"

Now my div looks like this:

<div class="d-block p-2 bg-primary text-white">
  <samp>And then I added more that I want to be in a new paragraph. </samp>
</div>

And when I SAVE my changes and refresh my web page in the browser, it looks like this:

Continue to explore the Bootstrap documentation to see all that we can do with it. It makes styling some much easier. Come back next time ready to make some navigation bars!