Rambling into the void...

Bootstrap: A CSS Facelift

You can download the full code for this tutorial at my github under release 1.1

So let's say you want to make your website look professional with as little effort as possible. Use squarespace!

Ok, so lets say you want to make your website look professional with some effort because you want to code it yourself? Use Bootstrap!

Bootstrap is CSS framework designed to create responsive, mobile first webpages. Responsive means that the layout of the page responds to the size of the page, and mobile first means that it is originally designed to work with mobile rather than porting a full sized webpage over to mobile. This is important because its usually easier to scale up to desktops rather than down to mobile.

We will be using Bootstrap 4 for our project. Let's start by loading it into the head:

<head>
    <title>Example</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Popper JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    
    <!-- Our CSS -->
    <link rel="stylesheet" href="styles/style.css">

</head>

We mentioned in the previous tutorial that you can load outside resources into your webpage. What we are doing is loading four different scripts, which are hosted by bootstrap, into our document.

It's important to note that our custom style sheet is still being loaded in after bootstrap. Thats because if we using a conflicting class name, our class will overwrite theirs rather than vice versa.

So what did we just load in?

At its core, Bootstrap is a ton of CSS classes that work in concert as a framework, with each class performing a common task rather than styling a set of HTML elements. Let me explain with pseudo code.

Let's say you have a rather large website with hundreds of different elements. Some elements are large, some are blue, some are large and blue.

One way you could handle this is by creating three different classes, one for each type of element. Like so:

blue {
	color: blue;
}

large {
	size: large;
}

large_blue {
	color: blue;
	size: large;
}

This would almost immediately become cumbersome, as the number of combinations would grow exponentially. What Bootstrap (and other frameworks) does is create reusable components that aren't uniquely designed for a class of elements but are designed to be combined. So in the framework version of our example, we would only have the first two elements but would apply them like so:

<div class ="large"></div>
<div class ="blue"></div>
<div class ="large blue"></div>

By stacking classes we are able to write less code and achieve the same effect. Bootstrap doesn't have classes for things like "large". Instead, it has classes for common tasks like navigation bars or utilities like creating a grid.

The Container Class

You may have noticed that our website, despite us adding some CSS, still doesn't look great. One of the reason is that is kinda cramped. The container class comes to the rescue. It will add margins, padding, alignments, and more to our HTML elements. Additionally, the container class is often the parent class to many different elements, oftentimes to everything you see on the page.

Let's add that class to our first div element. Container does not add top padding so we will add a <br> as well. See below for the body of our index.html now:

<body class="page-style">
    <div class = "container">
    		<br>
        <a href="pages/second.html">Link to your second page</a>
        <h2>Create Your Static Website</h2>
        <p>Here is the content of your site.</p>
    </div>
</body>

Notice how we stack our elements here. We still have our page-style class after our container class.

Note: If you want to apply the styling to our second page, you will have to be a little careful with file paths. This tutorial will just cover styling the homepage. See GitHub for the full code.

At this point your website should look like this:

Creating a Navigation Bar

Almost every website has a navigation bar. And you want to fit in, so let's add one to our website, that way people can easily switch between our two pages. See below for the boilerplate for navigation bar in bootstrap.

    <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="index.html">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="pages/second.html">Second Page</a>
            </li>
        </ul>
    </nav>

You can see that we use a combination of HTML tags and bootstrap classes to pull this together. Just add another list item to add a new link. At this point you will still have to manage all the different file paths between all your pages. We will take care of that using flask eventually.

At this point your website should look like this:

The Grid System: Rows and Columns

You know what surprisingly hard to do? Positioning things on a page using CSS, which many would say is a critical element of front end design. There is a ton of things that you can when it comes to aligning columns on a webpage. Let's start by dividing content into three columns.

<div class="row">
	<div class="col m-2 examples"></div>
	<div class="col m-2 examples"></div>
	<div class="col m-2 examples"></div>
</div>

First, we need to use the row class to align our three children elements in a row. Then we use the col class to put each in a column. We are using the m-2 class to add some margins around our columns. (I wrote the examples class to add color, min-width, and height)


    .examples {
        background-color: #6699cc;
        color: white;
        border-radius: 5px;
        height: 100px;
        min-width: 200px;
    }

Breakpoints

You will notice that these three columns will autofill the full width of its parent container. If you don't want to fill the full width of the parent, you can add a breakpoint to it. Breakpoints determine how far across the page the column will extend. For bootstrap, 100 percent of the page would be the 12th breakpoint, 50 percent would be the 6th breakpoint, and so on.

You may be wondering why we use 12 instead of 10. Its because 12 has more factors than 10 and thus more possible combinations. Here is an example of where one column with breakpoint 2, one with breakpoint 5, and one with breakpoint 4. The breakpoints only add up to 11 because we are using margins and need to leave a little room for that.

<div class="row">
	<div class="col-2 m-2 examples"></div>
	<div class="col-5 m-2 examples"></div>
	<div class="col-4 m-2 examples"></div>
</div>

Try making the page take less horizontal space. See how the elements will wrap underneath each other?

At this point your website should look like this:

More Bootstrap!

Bootstrap has a ton of different classes that you can use. It has guides on how to do things like vertically center, which is waaaay trickier than you might imagine, and important components like cards, which makes your website standout. Try playing around with the items on bootstraps site. Remember: copy paste is your friend.