Large

Bootstrap

Make a Bootstrap page in 20 minutes--seriously!

From the Firehose

Make a Bootstrap Page in 20 Minutes--Seriously!

September 28, 2020 by Mike

You may notice something slightly different about this post, assuming you've read my others. But what? Before I answer the mystery, let's talk about bootstrap.

Bootstrap, not bootstrapping, that mythical process whereby one "lifts one up by their own bootstraps," in other words, defies gravity and the laws of physics and levitates merely by applying force to one's footwear. Bootstrap is a design system--the most popular in the internet world--so it's time you learned it, don't you think? Don't want to be left behind, do we?

lifting oneself up by one's bootstraps, metaphorically

Seriously, though, let's learn Bootstrap. It's kind of cool.

Learning Bootstrap

Before we start, a few preparations. Get yourself a code editor (I like Visual Studio Code) and get ready to click a few links. If you're the preparing type, maybe think up a website you'd like to create. Download some pics from Pixabay. Maybe write some text, or copy it.

Let's start Bootstrapping!

Make Index.html

Open up a file in your text editor, save it as index.html. Write or copy the following code in it (I suggest typing everything to get "muscle memory").

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                    <title>Bootstrap FTW</title>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                  </head>
                  <body>
                  </body>
                  </html>

Load in Bootstrap and JQuery with a CDN

Now, Bootstrap is a framework--which someone had to write. We need that code on our page before we can take advantage of its features. The quickest and easiest way to get started coding is to just put a link on our page. And I'm all about quick and easy!

So start off by adding in these links in the following way:

paste this code into the <head> section of your index.html page

                      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
                      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

(If for some reason this process doesn't take, go to the bootstrap source page and copy the link under BootstrapCDN )

now put in jQuery
This code gets pasted right before the closing body tag.

                      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

(Again, you can go to the jQuery source page if needed. Click on the "minified" of the most recent jQuery core.)

Index.html should look like this

                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                    <title>Bootstrap Tutorial Sample Page</title>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
                  </head>
                  <body>
                  
                  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
                  </body>
                  </html>

What we now have is an html file (that is, a page for a web site), which now has Bootstrap and jQuery loaded on it. The setup is complete. Now we can use Bootstrap to make our page!

Design the page

One of the principles of design is that it comes before creating. That is, try to figure out what you want to make before you start making it.

In my mind, I see a basic web site. It is a simple but elegant landing page, with a bit of navigation up top, a centered bit of text and header in the middle, with a call-to-action button in the center.

Can you see it?

This is an example page put out by Bootstrap itself. It covers, pardon the pun, a common use-case scenario for web developers. Got it? Cool, let's get Bootstrapping!

Make the page

Bootstrap works by classes and divs. Essentially, you make your page according to a certain way of working. Within that way, you can customize or change whatever you like. The main way of accessing Bootstrap is through classes. Let's start by adding the class "text-center" to our body tag

                  <body class="text-center">

Endless divs

Now we are entering the phase of Bootstrap that I like to call, "endless divs." Basically, the div is the main element Bootstrap uses to categorize and cut up the overall page into manageable elements. There will be divs inside of divs inside of divs. If you've ever seen a nesting doll, or matryoshka--it's kind of like that.

So let's start adding divs! Inbetween the two body tags, create your first of many divs.

                  <div class="cover-container d-flex h-100 p-3 mx-auto flex-column">

This forbidding fingerful of text will serve as the container for our site. Everything will go in there. The funny codes in the classname control how the site will be rendered. A very diligent person who wants to understand exactly what's going on can read the very user-friendly docs and dig in. A very good idea! But for now, I'll move on.

Header

Now inside of the div, type or paste this code:

                  <header class="masthead mb-auto">
                  <div class="inner">
                <h3 class="masthead-brand">Bootstrap!</h3>
                <nav class="nav nav-masthead justify-content-center">
                  <a class="nav-link active" href="#">Home</a>
                  <a class="nav-link" href="#">Features</a>
                  <a class="nav-link" href="#">Contact</a>
                </nav>
              </div>
            </header>

Let's take a bit to examine what this is. It's all enclosed in a header tag, which is semantic html (but basically it's a div) used for the top and first section of a web page. Inside that, like the 2nd largest doll, is a div with a class of "inner". Then we have an h3 title: Cover.

Inside of the div is a nav tag, another semantic tag used for navigation divs, with a few links inside.

If you add this in and refresh, you will get your first shock. There is a nicely centered, aesthetically pleasing navbar at the top of your site! Wow! Looks pretty good, doesn't it?

Again, what's doing the work behind the scenes is controlled by the classes. They look like a bunch of nonsense for now, but there is definitely a method behind the madness. In short, Bootstrap gives you these classes as a way to control the look without having to micromanage and code every bit of css yourself. So you learn things like "nav-link" and put that in the class instead of a multi-line CSS declaration for the nav a tag where you have to tweak every pixel and margin yourself.

Main

Now for the next chunk of code.

                  <main role="main" class="inner cover">
                  <h1 class="cover-heading">Bootstrap your page</h1>
                  <p class="lead">Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.</p>
                  <p class="lead">
                    <a href="#" class="btn btn-lg btn-secondary">Learn more</a>
                  </p>
                </main>

This is the "main" section, which in our case is the semantic area for the hero page. It's nicely centered and looks good, but currently is squashed a bit. We'll fix that later.

Footer

You know the drill by now:

                  <footer class="mastfoot mt-auto">
                  <div class="inner">
                    <p>Cover template for <a href="https://getbootstrap.com/">Bootstrap</a>, by <a href="https://twitter.com/mdo">@mdo</a>.</p>
                  </div>
                </footer>

Add the custom CSS

Finally, create a style tag in your head, and paste the following CSS that will tweak things:

                  /*
       * Globals
       */
      
      /* Links */
      a,
      a:focus,
      a:hover {
        color: #fff;
      }
      
      /* Custom default button */
      .btn-secondary,
      .btn-secondary:hover,
      .btn-secondary:focus {
        color: #333;
        text-shadow: none; /* Prevent inheritance from `body` */
        background-color: #fff;
        border: .05rem solid #fff;
      }
      
      
      /*
       * Base structure
       */
      
      html,
      body {
        height: 100%;
        background-color: #333;
      }
      
      body {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-pack: center;
        -webkit-box-pack: center;
        justify-content: center;
        color: #fff;
        text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
        box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
      }
      
      .cover-container {
        max-width: 42em;
      }
      
      
      /*
       * Header
       */
      .masthead {
        margin-bottom: 2rem;
      }
      
      .masthead-brand {
        margin-bottom: 0;
      }
      
      .nav-masthead .nav-link {
        padding: .25rem 0;
        font-weight: 700;
        color: rgba(255, 255, 255, .5);
        background-color: transparent;
        border-bottom: .25rem solid transparent;
      }
      
      .nav-masthead .nav-link:hover,
      .nav-masthead .nav-link:focus {
        border-bottom-color: rgba(255, 255, 255, .25);
      }
      
      .nav-masthead .nav-link + .nav-link {
        margin-left: 1rem;
      }
      
      .nav-masthead .active {
        color: #fff;
        border-bottom-color: #fff;
      }
       
      
      /*
       * Cover
       */
      .cover {
        padding: 0 1.5rem;
      }
      .cover .btn-lg {
        padding: .75rem 1.25rem;
        font-weight: 700;
      }
      
      
      /*
       * Footer
       */
      .mastfoot {
        color: rgba(255, 255, 255, .5);
      }

So there's your first Bootstrap page. The way I did this was to go to an example page, right click it, and look at the source. That gives you the keys to the kingdom.

If you find a layout you like, just copy it and put it into your site. Then customize. When you want to change it or do something else, dig into the docs or google for a tutorial. The docs are very nice, by the way.

One more thing--in the beginning of the post, I said there was something different about this page. That's because I used Bootstrap to make it! Very meta, no? You can look at the source code and see for yourself!

Happy Bootstrapping!