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
Jul
28
PBS 59 of X — More Bootstrap Breakpoints
Filed Under Computers & Tech, Software Development on July 28, 2018 | Leave a Comment
In the previous instalment we met the bootstrap breakpoints. We learned that Bootstrap is mobile-first, so it has an implicit breakpoint of extra small (xs), followed by small (sm), medium (md), large (lg), and extra-large (xl). The sizes refer to the width of the window the page is being displayed in, AKA, the viewport. We used these breakpoints to interact with the Bootstrap grid (see instalment 57), allowing us to specify different layouts for different viewport widths.
The important points to remember are that breakpoints apply to a given viewport width, and greater, and that larger breakpoints override smaller ones.
Bootstrap does not just use breakpoints within the grid though. Some of the Bootstrap utility and content classes also have breakpoint support. In this instalment we’ll circle back and re-visit some of these. Note that only some utility and content classes have breakpoint support, not most, let alone all.
You can Download this instalment’s ZIP file here.
Jul
14
PBS 58 of X — Bootstrap Breakpoints
Filed Under Computers & Tech, Software Development on July 14, 2018 | 3 Comments
We’ve now been introduced to two and a half of the four aspects of the Bootstrap web API. We’ve had our first look at the Bootstrap CSS utility classes, we’ve also looked at many of the CSS classes Bootstrap provides for styling standard HTML elements (content in Bootstrap jargon), and we’re now about half way through our look at Bootstrap’s layout CSS classes. So far in terms of layout we’ve met the Bootstrap grid and learned about how it breaks your page into container that contain rows that contain columns, and how column widths are expressed as twelfths of the container width. In this instalment we’ll take our first look at Bootstrap’s support for responsive design by looking at how the Bootstrap grid layouts can be altered depending on the viewport width.
There’re more to Bootstrap’s support for responsive design than just the grid, so in the next instalment we’ll look back a little and discover that many of the bootstrap utilities and content classes also support responsive design. After that we’ll be ready to move on to the fourth and final aspect of Bootstrap, its collection of non-standard but commonly needed HTML elements, or components in Bootstrap jargon.
You can Download this instalment’s ZIP file here.