Module 11:
Frameworks and Bootstrap Columns
What's covered in this module
Font Awesome Icons (CSS Framework)
Bootstrap (CSS and JavaScript Framework)
Other Bootstrap Classes: Images, Navigation, and Responsive Videos
Materials
| Assigned Reading: | None |
| Slideshow: | Module 11: Frameworks and Bootstrap Columns |
| Lab: | Best in Show Puppies |
| Optional Reading: |
In this Module
This is our first module that goes beyond the material in our textbook. We are going to cover frameworks overall, and then first install and try out a relatively easy framework to learn, Font Awesome. Then we will dive into Bootstrap and its grid system, which makes it much easier to make full-width websites that also look great on mobile. Bootstrap is a desired skill and something you should list on your resume once you finish this module.
Frameworks
What are “frameworks”?
A framework is a CSS or JavaScript file that you add to your website to attach some pre-built code. Most websites today use multiple frameworks.
We will be adding the following frameworks to your template for use on the lab assignments and all of the websites you make going forward.
- jQuery: Used for JavaScript functionality
- Bootstrap: Used for columns, menus, forms, and other types of modern layouts
- Font Awesome: Used for icons
How do you attach a framework to your website?
You add a framework by linking to an internal or external file. You attach CSS frameworks with a <link> and you attach JavaScript frameworks with <script>. For example:
- A CSS framework looks like this:
<link rel=”stylesheet” type=”text/css” href=”my-css-framework.css”>
- A Javascript Framework looks like this:
<script src=”jquery-3.4.1.min.js”></script>
You place CSS and JavaScript frameworks in different places in the web page.
Place the CSS stylesheets in the <head></head>. For example:
<link rel=”stylesheet” href=”my-framework.css”>
Place the CSS framework link ABOVE your CSS stylesheet, so that your CSS stylesheet overrides the others. (The last stylesheet wins.)
Note: When students have trouble with the lab assignment, it often is simply because they placed the framework underneath their custom stylesheet.
Place Javascript scripts at the end, just above the </body> tag. Technically, they could be placed inside of the <head>, like CSS frameworks, but it speeds the loading time to place them after the footer, so the best practice is to place them after the </footer> tag. The end of the web page looks like this:
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
</body>
</html>
You can either include the framework files in your website folder OR you can use an external link.
- External link example:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js“></script>
- Internal Link Example:
<script src=”js/jquery.min.js”></script>
Commonly used CSS and JavaScript frameworks have external links available. In the example above, the external link is hosted by googleapis.com. Most developers, most of the time, use an external link to the frameworks.
Font Awesome Icons (a CSS Framework)
Let’s start with an easier but very important framework, Font Awesome. Font Awesome is how most icons on the internet are displayed. Font Awesome icons look like this:
But why are icons called “Font Awesome”?
Font Awesome is a set of icons that work like a font. Web designers love them because they can use CSS to make the fonts any size and color. Of note, you can add hover effects if you use them for links.
Font Awesome is added with a CSS framework.
Font Awesome Versions
There are a many versions of Font Awesome as it has been enhanced over the years. For this exercise, we will use Font Awesome 4. Font Awesome 5 has more icons available than Font Awesome 4, but is harder to install. Font Awesome 6 is in Beta testing.
For this class we are using Font Awesome 4 If you want to try Font Awesome 5, Here are instructions at W3 Schools:
https://www.w3schools.com/icons/fontawesome5_intro.asp
Adding the Font Awesome Framework
Because Font Awesome is a CSS framework it is placed into the <head>. It is important to add it above your stylesheet, so that it doesn’t override your stylesheet. See the code below to see where it is placed. By putting this link into your website <head> you are importing all of the font-awesome 4 icons into your project.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
In context, it looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
We are developers, so we need to know what we are adding to our websites, right? Take a moment to click on this link: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css.
What a mess, right? The code is hard to follow because it is minified. You can unminify with an online tool and see what it the code looks like.
Styling the Icons
Say you pick out the Font Awesome icon for a user. Let’s use this icon: <i class=”fa fa-user-circle-o” aria-hidden=”true”></i>. This icon looks like this:
Let’s also make the icon into a link, since many icons are links to social media. The code would look like this:
<a href="https://webdevstudents.com">
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
</a>As you can see, the icon requires two classes: fa and fa-user-circle-o. Let’s break this into a few scenarios.
Scenario 1. If you want to style ALL font awesome icons on your website, use .fa or i.fa as the selector in your CSS.
i.fa{
font-size: 3em;
color: purple;
}
i.fa:hover{
color: blue;
}
By selecting i.fa, we are selecting all HTML elements that are an i with a class of .fa. We then go on to make the icons 3 times the usual font size, and make them purple. I then added a selector for the hover state, and changed the color of the icon to blue on hover.
Scenario 2. If you want to only select that one icon, then use .fa-user-circle-o as the selector.
Scenario 3. If you want to select icons only in the footer, then use footer .fa as the selector.
Exercise: Font Awesome
Step 1: Add this link to your <head> ABOVE your stylesheet template
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css“>
Step 2: Go to FontAwesome.com 4 and pick out at least one icon. Add it to your template HTML file.
Step 3: Change the color and font-size in your CSS file by selecting i with a class of fa (i.fa). Try setting the icon to 5em.
Grid Systems Frameworks
So, why do we need a grid system? We need grid systems in order to have stacking for mobile devices. On mobile devices, we need the columns to stack. The stacking on mobile is the primary reason web developers use Bootstrap. Because we know we can stack the content on mobile, that gives web developers the freedom to design full-width websites.
This is why web developers LOVE Bootstrap! It saves them work and helps them make better websites.
We are going to use Bootstrap in this course, but it isn’t the only Grid Framework. With a grid system you can use the full width of the website and have the content stack on mobile.
Grid Systems
- Foundation Zurb–http://zurb.com/responsive
- Bootstrap– http://expo.getbootstrap.com/
- W3 https://www.w3schools.com/w3css/w3css_grid.asp
Of these three, the most popular is Bootstrap. Before Grid Systems came into use, websites were made with a narrow width so that they were somewhat usable on smartphones.
Here are a few more examples of stackable columns:
Bootstrap (CSS and JavaScript Framework)
Bootstrap is a front-end framework. It has a grid system and much more. It uses both CSS and JavaScript. It provides code for many cool effects you see, popups, accordions, and responsive videos.
First things first: We need to install Bootstrap on to our website template.
Exercise: Install Bootstrap
We are going to install Bootstrap by adding CSS and JavaScript frameworks. We need to add 4 frameworks for Bootstrap to work, one CSS framework and three JavaScript frameworks. Add this code to your template HTML file.
Step 1. Add Bootstrap Stylesheet to <head>
<!-- Bootstrap Stylesheet-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">Be sure to place the Bootstrap stylesheet above your stylesheet in the head. You can see I added a comment before the link. That is because you may wonder later why you have this file in the <head> of your website.
Step 2. Add these JavaScript files between </footer> and </body> at the end of the html
<!--jQuery, Popper, and Bootstrap Javascript files-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
It’s that easy! Now you can use Bootstrap throughout your website. The most important thing we will learn is how to use the Bootstrap grid system and make stackable columns.
Bootstrap Columns
The Bootstrap Grid is kind of like a table. It has a container, rows, and cells.
<table> is similar to <div class=”container-fluid”>
<tr> is similar to <div class=”row”>
<td> is similar to <div class=”col-sm-6″>
You will use the grid system to layout websites. For example, if you want an image on the right and text on the left, you will lay that out with Bootstrap Columns instead of with floats.
The Bootstrap framework has pre-written classes that you use to access the Bootstrap functionality.
A quick refresher: What is a class? A class is an HTML attribute that is used to add classes to an HTML element to allow you to select more specifically.
The Bootstrap Column Classes look like this:
- <div class=”container-fluid”> is used for the overall container.
- <div class=”row”> is used to start a new row.
- <div class=”col-sm-6″> is the code for a column
When you want to start working in columns, start out by adding a div with a class of container-fluid. Then add another div to start a row, and then add a div for each column.
The column div classes, like col-sm-6, need a bit more explanation.
Dissecting the Bootstrap Column Classes
There are three segments in the Bootstrap column classes.
First Segment. Column classes start with col. That’s easy enough.
Second Segment. The middle section is the breakpoint (screen width) at which the column stacks. The “sm” in the class at right stands for small devices. The middle section of the column class is the breakpoint at which the column stacks. There are four sizes: lg for large, md for medium, sm for small, and xs for never stacking.
- <div class= “col-lg-6” > Tells the browser to stack the columns if the width is greater than or equal to 1200 pixels.
- <div class= “col-md-6” > Tells the browser to stack the columns if the width is >= 992 pixels
- <div class= “col-sm-6” > Tells the browser to stack the columns if the width is >=768 pixels
- <div class= “col-xs-6” > Tells the browser never to split stack the columns.
I usually use the “sm” unless I want the columns to never break, in which case I use xs.
- With “sm”, the iPad in landscape will appear the same as the desktop without stacking.
- With “sm” the columns will stack for the iPad in portrait and all smartphones.
Just use “sm” while you are getting the hang of Bootstrap columns.
Third Segment. The third segment is the most challenging to understand. The grid has 12 columns. When choosing the column classes, you must create rows that total 12.
It may be easier to comprehend it with some examples:
- If you wanted two evenly sized columns, you would use “col-sm-6” 2 times. (6 x 2 = 12)
- If you wanted three evenly sized columns, you would use “col-sm-4” 3 times. (4 x 3 = 12)
- If you wanted four evenly sized columns, you would use “col-sm-3” 4 times (3 x 4 = 12)
In addition, you don’t need to use equally sized columns. The columns only need to add up to 12. Here are some examples:
Let’s stop and think about it for a minute.
- What would you use if you wanted 6 evenly-sized columns?
- What would you use if you wanted 12 evenly-sized columns?
- What would you use if you wanted 5 evenly-sized columns?
5 evenly-sized columns is a trick question. You can’t make 5 evenly sized columns with Bootstrap. When I first started making websites, one of my clients wanted FIVE columns. With Bootstrap I knew how to make 2, 3, 4, and 6 evenly-sized columns. However, I Googled it and found a solution.
Any combination is fine as long as they total 12. You don’t need to have evenly sized columns. For example, if you want:
⅔ and ⅓: Use col-sm-8 and col-sm-4
¾ and ¼: Use col-sm-9 and col-sm-3
The screenshot below is an example of col-sm-8 and col-sm-4:
What if you only want one column? If you want a row to be one column, use col-sm-12. There is built in padding and margin for the Bootstrap classes, so if you have only one column, still use the Bootstrap grid to give your rows consistent spacing.
Containers, Rows, and Columns
Now that we understand the columns, we need to take a step back and look at how we put this all together to make the grid. The containers and rows are not optional.
- Start the Bootstrap columns by making a container with: <div class=”container-fluid”>
- Add a row with: <div class=”row”>
- Add columns with:<div class=”col-sm-x”> where “x” equals the parts of 12 for that column.
This image may help you visualize how the container, row, and columns go together.
Exercise: Containers, Rows and Columns
Open your template and type in this code into the <main> section. You are adding one row and three columns, which you will need for the lab exercise. This is an image, so you have the opportunity to type it in. Once you’ve typed it in once, you can always cut and paste this to modify it.
Feeling Overwhelmed? It is critical that you understand Bootstrap Columns before starting the lab for this week. If the previous slides feel overwhelming, head on over to W3 Schools to read more about it. Another option is to read my blog post on the Bootstrap Grid System. We will be working in Bootstrap columns for the remainder of the course, so you will get several chances to practice it in upcoming lab assignments.
Other Bootstrap Classes: What else can you do with Bootstrap?
Bootstrap does a lot more than making Bootstrap columns. It has built in classes to help you handle a variety of other cool layouts. Here is a short list of what you can do with Bootstrap.
Bootstrap Image Handling
Add class=”img-fluid” to your images in a Bootstrap website. This code makes images autofit to the right size.
It adds three properties that make your images responsive:
- display:block;
- max-width:100%;
- height:auto;
In addition, Bootstrap has a variety of image classes you can add to quickly style your images. W3Schools has a nice summary: Bootstrap Images
Cool Effects with Bootstrap
This is a very limited list of what you can do with Bootstrap in addition to stacking columns:
- Attractive Popups (Modals)
- Dropdown Menus
- Hamburger Menu for Mobile
- Accordions (for an FAQ)
I put together a separate blog post on some of the options for Bootstrap.
Adding Bootstrap Adds CSS
When you attach the Bootstrap framework to your website, your website immediately will look different in subtle ways. That is because Bootstrap adds a lot of CSS to your website. One problem you may notice is with your navigation. See the example below:
As you can see, your navigation may no longer be vertically centered. Bootstrap adds margins to the <ul> tags. That margin may have changed the alignment of your navigation.
There is an easy fix. Simply override the Bootstrap code in your style.css by adding margin to your nav ul selector.
Exercise: Repair Navigation
Check the navigation in your template. If it is no longer vertically centered, here is the fix:
Step 1: Find your nav ul selector in your template CSS file.
Step 2: add margin: 10px to your nav ul selector, and that will override the Bootstrap margin. Because your stylesheet is below the bootstrap stylesheet, your CSS overrides the Bootstrap CSS.
You may find that Bootstrap has made other changes to your website. If you don’t like the changes, simply override the CSS in your stylesheet.
Lab Assignment
For the lab assignment this week we are going to make the Best In Show Puppies website.
View Live Version of the Puppies Lab
Your website will look something like this when completed, with your own color and font choices:
The website you make in this lab will be a great portfolio item. Here are some Best In Show Puppies websites made by students at Saint Paul College:
Modules
Final Project Websites
Additional Presentations
- The Template Lab (Between Module 6 and 7)
- Study for the HTML/CSS Exam
- WordPress
- PHP Websites
- The Best Internship
Bootstrap Starter Pack
This is a starter pack of Bootstrap HTML file using Bootstrap navigation. It includes a page with columns, a photo gallery (with modal pop-up) that automatically adjusts the number of images in a column based on the width of the screen, a slider, and responsive embedded video using Bootstrap.