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
Aug
30
PBS 61 of X — Bootstrap Jumbotrons & Badges
Filed Under Software Development, Computers & Tech 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.
Sep
16
PBS 62 of X — A Basic Bootstrap Form
Filed Under Software Development, Computers & Tech 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.
Sep
23
PBS 63 of X — Bootstrap Buttons
Filed Under Software Development, Computers & Tech 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.
Oct
4
PBS 64 of X — Bootstrap Form Layouts
Filed Under Software Development, Computers & Tech on October 4, 2018 | 2 Comments
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.
Oct
20
PBS 65 of X — Bootstrap Input Groups
Filed Under Software Development, Computers & Tech on October 20, 2018 | 2 Comments
This will be the penultimate instalment of our introduction to Bootstrap forms. Today we’ll be looking at a really useful Bootstrap component for making form inputs clearer for the user, more powerful, and prettier. In the next instalment we’ll finish off with Bootstraps forms for the moment with a look at Boostrap’s built-in form validation features.
You can download this instalment’s ZIP file here.
Nov
4
PBS 66 of X — Bootstrap Form Validation
Filed Under Software Development, Computers & Tech on November 4, 2018 | 2 Comments
Over the past few instalments we’ve been making our way though the various form-related features Bootstrap offers. We’ll round out that tour in this instalment with a look at how Bootstrap can help with form validation.
You can download this instalment’s ZIP file here.
Dec
2
PBS 67 of X — Introducing Bootstrap Dropdowns
Filed Under Software Development, Computers & Tech on December 2, 2018 | 1 Comment
In this instalment we’ll start a two-part look at the Bootstrap Dropdown component. This component can be used to add pretty dropdown menus to both web app UIs and website navigation bars. In this instalment we’ll look at the first of those uses, and then in the next instalment we’ll look at navigation bars in general, which we’ve not seen before, and then Dropdowns within navigation bars.
You can download this instalment’s ZIP file here.
Dec
16
PBS 68 of X — Bootstrap Navs
Filed Under Software Development, Computers & Tech on December 16, 2018 | 1 Comment
In this instalment we’ll get our first look at Bootstrap’s so-call Nav component, a menu designed to facilitate navigation around a website, within a page, or within a web app. In the previous instalment we met Dropdowns for the first time, and saw how Dropdowns filled with buttons can be used within web app UIs. We ended by noting that Dropdowns come in two flavours, buttons and links. In this instalment we’ll learn how to use the link-flavour of Dropdowns within Navs. Finally, we’ll learn how to use Navs to create tabbed content regions within a web page or web app.
You can download this instalment’s ZIP file here.
Jan
13
PBS 69 of X — Bootstrap Navbars
Filed Under Software Development, Computers & Tech on January 13, 2019 | 1 Comment
In the previous instalment we learned how to use Navs for creating navigation bars, and learned how to use Dropdowns to add expandable menus to our Navs. In this instalment we’ll meet Bootstrap’s ultimate navigation component, the Navbar. This is a powerful component designed to act as the menubar at the top of websites or web apps.
You can download this instalment’s ZIP file here..
Jan
27
PBS 70 of X — Bootstrap Modals & Toasts
Filed Under Software Development, Computers & Tech on January 27, 2019 | 3 Comments
In this instalment we’ll continue our recent focus on Bootstrap components primarily intended for use in web apps rather than on web pages. We’ll look at a pair of components designed to notify of something — modal dialogue boxes, and so-called toast notifications.
Different notifications require a different UI, hence there being two components, Modal, and Toast. However, both are quite similar in the sense that you will most probably be triggering them via JavaScript. Unlike the other components we’ve seen so far, these will not be visible to the user when the page loads, they’ll make their presence felt at some later time in response to some kind of event.
You can download this instalment’s ZIP file here.