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
Oct
4
PBS 64 of X — Bootstrap Form Layouts
Filed Under Computers & Tech, Software Development on October 4, 2018 | 1 Comment
In the previous few instalments we’ve been learning about Bootstrap forms. We first learned how to include standard HTML form controls like text areas, text boxes, checkboxes, radio buttons, and dropdowns into the default form layout. Then we learned about buttons and button groups. Now it’s time to learn about three alternative form layouts — inline forms, horizontal forms, and grid-based forms.
You can download this instalment’s ZIP file here.
Listen Along: CCATP Episode 566
Sep
23
PBS 63 of X — Bootstrap Buttons
Filed Under Computers & Tech, Software Development on September 23, 2018 | Leave a Comment
In this instalment we’ll continue our exploration for forms in Bootstrap, but we’ll zoom right in to just a single form control — the button. In many ways buttons are the single most important form element because they generally act as the trigger for the action the form has been building up to. If you have a form for composing an email, it will be a button that sends the email, if you have a form for entering payment details it will be a button that confirms your payment and finishes the transaction. If you’re just using a form to log in it’s a button that submits your credentials to the server. In short, buttons make forms go, so they’re worth spending a little time on.
Having looked at basic form inputs in the previous instalment, and then buttons in this instalment, we’ll be ready to look at the different options Bootstrap provides for laying out forms beyond the default stacked layout we’ve seen to date.
You can Download this instalment’s ZIP file here.
Sep
16
PBS 62 of X — A Basic Bootstrap Form
Filed Under Computers & Tech, Software Development on September 16, 2018 | Leave a Comment
So far in our exploration of Bootstrap 4 we’ve focused on the kinds of features that are useful when building web pages designed to communicate information — news sites, blogs, corporate websites etc.. There is of course much more out there in the universe of websites, and one of the biggest categories we’ve totally ignored is web apps! All web apps need the ability for the user to interact with them. In other words, all web apps need web forms, and we’ve totally ignored those in our explorations of Bootstrap to date! It’s about time we rectified that, so in this instalment we’ll dip our toes in the ocean of form-related Bootstrap features.
One of the reasons I’ve delayed diving into Bootstrap forms is that it’s almost impossible to know where to begin. Bootstrap provides so many form-related features and options it’s almost overwhelming!
We’ll start our exploration of forms very simply, but bear in mind that what we’ll see today is just the tip of the proverbial iceberg.
You can Download this instalment’s ZIP file here.
Aug
30
PBS 61 of X — Bootstrap Jumbotrons & Badges
Filed Under Computers & Tech, Software Development on August 30, 2018 | 1 Comment
In the previous instalment we met our first so-called Bootstrap Component, the alert. This was our first example of a JavaScript enabled Bootstrap feature. As we learned last time, Bootstrap components are small generic pieces of functionality that are not provided by HTML out of the box. The aim is give website developers a leg up and save them from having to re-invent the same commonly used proverbial wheels over and over again.
While many, probably most, Bootstrap components either require JavaScript to function at all, or, require JavaScript for their more advanced features, that’s not true of all components, some of the simpler ones are implemented in pure CSS. We’ll look at two such simple components in this instalment – the wonderfully named Jumbotron, and badges.
You can Download this instalment’s ZIP file here.
Aug
12
PBS 60 of X — Bootstrap & jQuery
Filed Under Computers & Tech, Software Development on August 12, 2018 | 1 Comment
So far we’ve looked at three our of the four aspects of Bootstrap — the utility CSS classes, the so-called content CSS classes for styling standard HTML components, and Bootstrap’s layout functionality (the grid & the breakpoints). So far, it’s all been pure CSS, we’ve not even imported the Bootstrap JavaScript library yet!
That changes in this instalment when we make a start on Bootstrap’s final aspect, so-called components. These are re-usable generic website components, and they rely on JavaScript for some or all of their functionality. To get the ball rolling we’ll take a look at just one very simple component, the Bootstrap alert.
You can Download this instalment’s ZIP file here.
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 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.
Jun
30
PBS 57 of X — The Bootstrap Grid
Filed Under Computers & Tech, Software Development 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 Computers & Tech, Software Development 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.