PBS 52 of X — Introducing Bootstrap 4
One of the golden rules of programming is not to waste your time needlessly re-inventing the wheel. This is the driving motivation behind the development of many open source libraries. The aim is to give programmers a leg up by providing pre-built foundations for them to build on. The best example of this approach we’ve seen so-far in this series is jQuery. Today, I’m going to introduce you to another one, Bootstrap.
Out of the box, all versions of HTML, even HTML 5, have some significant short-comings:
- The default style is just plain ugly!
- There are no simple tags for creating complex page layouts.
- There are no simple tags for facilitating responsive design (same page displayed differently depending on screen resolution).
- Some basic elements and behaviours common to many web pages are not provided.
Matching Podcast Episode 531
Listen along to this instalment on episode 531 of the Chit Chat Across the Pond Podcast
You can also Download the MP3
Getting Started with Bootstrap 4
For now, this is all we have to do to start using Bootstrap 4:
Use the HTML 5 doctype
Bootstrap won’t behave consistently across browsers if the page doesn’t use the HTML 5 doctype. Since that’s the only doctype we’ve learned about in this series, that’s not going to be a problem for us 🙂
Set the Responsive Viewport Meta Tag
Again, for cross-browser consistency, the Bootstrap documentation makes it clear that the following tag should be added to the
headsection of any HTML page that uses Bootstrap:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Include the Bootstrap 4 CSS
You could download the Bootstrap CSS and include your own copy, but by far the easiest thing to do is to load it from the officially supported content distribution network (CDN) by adding the following into the
headsection of the HTML page:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
A Basic Bootstrap Template
For now, you can use this as a template for HTML pages that use Bootstrap:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <!-- Include Bootstrap 4 CSS --> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title></title> </head> <body> </body> </html>
The CSS Box Model Re-Visited
We met what we called the CSS box model way back in instalment 7, but we really should have called it the default CSS box model.
To understand why there is more than one box model, let’s go back in time to the very earliest days of CSS. Back then there was no W3C facilitating web standards, each browser manufacturer did their own thing, and tried to convert their way of doing things into a de-facto standard through ubiquity. In the grand scheme of things the manufacturers agreed on far more than they disagreed on, but when it comes to CSS there was a fundamental disagreement that caused no end of pain for developers — Microsoft’s box model was different to everyone else’s!
Mozilla and the other smaller players in the market used what has now become the default box model — the padding, border, and margin are external to the width (and height) of an HTML element. That is to say, the CSS
width property refers to the width of the content area, not including any of the blank space around it. When you think about it, this is not logical! For example, a paragraph with a
width of 300px, a
padding of 10px and a
border-width of 1px would appear on screen as a box that’s 322px wide (from outside border edge to outside border edge)!
Microsoft did things differently, in older versions of IE the border and padding were internal to the
width, so regardless of the padding or border thickness, a paragraph with a
width of 300px would always be rendered as a 300px wide box, the content area would simply shrink and grow as you altered the padding and border widths.
Initially, the W3C threw away the old IE-style box model completely, but in CSS 3 they added it back in as an alternative to the default box model. CSS 3 introduced the
box-sizing CSS property for selecting the box model to be used for each element on a page. Rather than allowing users to choose between just the Netscape and IE approaches, they also added a third option where the padding is internal to the width, but the border is external to it.
The three valid values for the
box-sizing CSS property are:
heightproperties are interpreted as referring to the content width, with the
marginexternal to it (the old Netscape approach, and the current default).
heightproperties are interpreted as referring to the content width plus any padding.
heightproperties are interpreted as referring to the content width plus any padding plus the border width (the old IE approach).
Why am I telling you all this? Simple, because Bootstrap changes the default
box-sizing for all elements from
border-box. In other words, Bootstrap changes your page from the counter-intuitive Netscape box model to the much more sensible IE box model.
Bootstrap’s Big-Picture Design & Documentation
For the most part, you should think of Bootstrap as a pre-written collection of CSS classes. Philosophically, Bootstrap separates these classes into four distinct categories, and these categories define the structure of the official Bootstrap documentation:
- Layout — the CSS classes for defining page structure. These CSS classes are built to be responsive, that is to say, they allow the layouts you construct with them to behave differently depending on screen size.
- Content – the CSS classes for enhancing the standard HTML components, e.g. nice tables, nice block quotes, nice headers etc..
- Components — the CSS classes for creating page elements that are not part of the HTML spec, but are none-the-less the kind of standard component that many web pages need, e.g. nice alert boxes, carousels, modal dialogues, badges, and so on.
- Utilities — the CSS classes for controlling very generic CSS properties in a concise, consistent and simple way. E.g. quickly setting consistent borders, padding, alignment, and so on.
At this stage of our coding journey I expect you not to be intimidated by links to official documentation. I’m not going to be spending countless hours re-creating the excellent Bootstrap docs, instead, I’ll be linking to the relevant sections of the official docs.
You can find the documentation at https://getbootstrap.com/docs/4.0/.
The most important four buttons for navigating the documentation are the ones matching the four main categories of CSS classes listed above. This is where you’ll find them:
A New Playground
I know Bootstrap is an API rather than a language, but still, I think it’s time for the traditional Hello World! 🙂
Enter the following into the HTML area in the playground:
<div class="jumbotron m-3"> <h1>Hello World!</h1> <p class="lead text-muted">Welcome to Bootstrap 4</p> </div>
To see what this looks like, press the Run button in the upper left:
Initially, until we learn about Bootstrap’s layout functionality, we’ll need to wrap our code snippets with the following:
<div class="container-fluid mt-3"> <div class="row"> <div class="col-12"> <!-- Your Code Here --> </div> </div> </div>
To make things simple I’ve saved this template to Bootly.com at www.bootply.com/JcxTTJWslw.
Start by creating a regular HTML 5 web page that does not include Bootstrap and add a recipe for the dish or drink of your choice to it. Your recipe must have the following:
- A top-level heading with the name of the dish/drink
- A second level heading “Description”
- One or more paragraphs describing the dish/drink
- A table of ingredients
- A second level heading reading “Instructions”
- A numbered list of instructions
- An image of your dish (doesn’t have to be your own, some clip art will do fine)
Now include Bootstrap 4 into the page by adding the needed
<meta> tags to the page’s
<head> section and notice how much better your recipe looks already!
All we’ve done today is set the scene. Bootstrap is a very big API, so it’s going to take us quite some time to explore. Next time we’ll start out exploration with a look at some of the utility classes Bootstrap offers.
Join the Community
Find us in the PBS channel on the Podfeet Slack.