Bootstrap – ASTC 2017

I’m attending the Technical Communicators Conference 2017, the annual conference of the Australian Society for Technical Communication (ASTC). This post is a live blog of a session at the conference. In other words, I’m writing as the presenter speaks. Any mistakes are mine, and all credit goes to the presenter.

Grant Noble presented a session titled Bootstrap. The talk is about Bootstrap, and how it can help us with website design.

Grant discovered Boostrap through his hobby of homebrewing. He needed to keep track of his brewing processes, ingredients, and experiments. So, he developed an application to do that. Along the way, he discovered that his initial app design looked terrible on a mobile device. Looking for information on responsive web design, he discovered Bootstrap.

Grant’s talk covered the following topics:

An overview of Bootstrap
Why we would use it
Setting up Bootstrap
Containers, rows, and columns – the three fundamental things you need to know if you want to use Bootstrap
Examples
Bootstrap v4 beta – an upcoming new version, whereas v3 is the current stable release
Arguments against using Bootstrap
Alternatives to Bootstrap

What is Bootstrap and why would you use it?

Bootstrap is a framework for developing responsive, mobile-first websites. It provides the HTML and CSS templates you need, and JavaScript plugins for dynamic features like dropdowns and tabs. The “mobile first” part means you develop for small devices first, then scale up to larger devices like desktops.

Grant says a highlight is that Bootstrap makes your website look professional, and it requires only a basic knowledge of HTML and CSS. It gives you a responsive design, so your content looks right on all browsers and devices. It includes many themes and templates. And it’s free.

Setting it up

Grant walked us through the four basic steps of including Bootstrap in your website. Basically, it involves including HTML tags in your page headers to pull in the CSS, and tag, to make sure things work well on mobile devices. Also, make sure your page is HTML5 as defined by your html tag.

Containers, rows, and columns

Containers wrap your content. You can choose a fixed-width container, or a fluid container, depending on your requirements. To specify a container, you use a CSS class called “container” or “container-fluid”.

Rows fit inside containers, and columns fit inside rows. There’s a max of 12 columns per row. And again, “row” and “col” are CSS classes.

So, for example, you may have a with a class of “container-fluid”, and within that a further set of elements with classes of “row” and “col”. Instead of , you can use other HTML elements, including HTML5 elements.

Columns can sit side by side, or stack on top of each other, depending on the device size and ratio, as determined by the column styles you’ve specified.

Grant showed us examples of the various “col” classes, the resulting device sizes that you can cater for, and how you can use them to make sure your column is displayed in a useful, logical structure on all device formats.

There’s also a “table” class that produces a pleasing variety of responsive tables. And some classes that provide good-looking forms.

Bootstrap v4

Bootstrap v4 is in beta, and is a major rewrite. Grant recommends staying with v3 for corporate projects, or if you need to support older browsers. Otherwise, move to v4 so that you don’t need to migrate later.

Arguments against Bootstrap, and alternatives

People say: Sites using Bootstrap all look the same. You end up with a lot of tags and CSS classes. The CSS and JavaScript can make the page slow to load.

Alternative frameworks include Foundation and Skeleton.

Thanks Grant for a useful overview of an exciting framework.

[image error]