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
- 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?
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
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 <div> with a class of “container-fluid”, and within that a further set of <div> elements with classes of “row” and “col”. Instead of <div>, 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 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
Alternative frameworks include Foundation and Skeleton.
Thanks Grant for a useful overview of an exciting framework.