The Author – Bart Busschots
Creative Commons
Unless otherwise stated, the content on this site is licensed under Creative Commons Attribution, Noncommercial, No Derivative Works 3.0 License
Jun
30
PBS 57 of X — The Bootstrap Grid
Filed Under Software Development, Computers & Tech on June 30, 2018 | 3 Comments
As we’ve learned in previous instalments, there are four distinct aspects to Bootstrap, a collection of utility CSS classes, a collection of styles for controlling built-in HTML elements like headers, figures, images, and tables (which Bootstrap refers to as content), page layout functionality, and a collection of re-usable components that don’t exist in native HTML. We started by looking at the utilities, then moved on to styling the standard HTML elements, and now we’re ready for our first look at layout.
Bootstrap’s layout functionality is designed from the ground up to be responsive, that is to say, to allow you to control the layout of a page differently depending on the size of the viewport. For example, you can create a single layout that shows as a simple single column when viewed on a small phone screen, two columns on a tablet, and three on a device with a larger screen.
Going from zero to responsive design would be a big leap, so we’re going to break it down into two distinct parts. In this instalment we’re going to confine ourselves to creating layouts that work on larger screen devices like desktops, laptops, and large tablets. Once we can lay things out at one size, then we’ll add in responsiveness in the following instalment.
You can download this instalment’s ZIP file here.
Jun
16
PBS 56 of X — More Bootstrap Content
Filed Under Software Development, Computers & Tech on June 16, 2018 | 1 Comment
In the previous instalment we got our first look at the functionality the Bootstrap documentation groups together under the heading Content. These are opt-in additional styles for standard HTML elements. Last time we looked at headings, paragraphs, quotations and lists. This time we’ll finish our overview of this aspect of Bootstrap with a look at styling images, figures, and tables.
In the next instalment we’ll move on to the most powerful aspect of Bootstrap, layout. This will take us a few instalments to cover, but when we’re done we’ll have learned how to use Bootstrap to arrange content on a page, and, better yet, to make our layouts responsive. That is to say, we’ll learn how to use Bootstrap to make our pages look right on any screen, from the smallest phone to the largest desktop!
You can download this instalment’s ZIP file here.
Jun
2
PBS 55 of X — Bootstrap Content
Filed Under Computers & Tech, Software Development on June 2, 2018 | 2 Comments
In this instalment we’ll continue our exploration of Bootstrap, making a start on the second of the four main aspects of Bootstrap — content. This is the word the Bootstrap team have used to describe Bootstrap’s styling of regular HTML tags for things like headers, paragraphs, lists, tables, etc.. In the previous two instalments we looked at the first of the four aspects, the utility classes, and when we finish with the content aspect we’ll move in to look at the third aspect — layout.
It’s going to take us at least two instalments to look at Bootstrap content. We’ll make a start in this instalment by focusing on the most important classes related to the HTML elements Bootstrap’s documentation (somewhat confusingly IMO) bundles together under the sub-heading Typography (under Content). Specifically that means headings, paragraphs, block quotations, and lists.
You can download the ZIP file for this instalment here.