The name Bootstrap may sound unfamiliar or new to some people. Any idea or speculations? No, it’s definitely not a shoe brand but rather a web toolkit that has existed since 2011. The latest version released a couple of months ago is actually the fifth version. So what is it exactly?
We can define Bootstrap as a CSS-based and open-ended free framework utilized for web development in a more comprehensive way. Why comprehensive? Because it also aims at improving user experience on mobile devices. This is also due to its capabilities in terms of HTML and JavaScript. So more than just a system, it’s a whole ecosystem on its own, striving for innovative websites and apps.
Now that we have the skeleton of our topic, we will attempt to dig a little deeper. Are some of you following the updates regularly brought to this fancy toolkit? No worries either way because we will start by revealing some of the latest improvements. We will also consider the starter template, cards, and buttons more closely. Those are indeed among the priorities for less experienced users.
Bootstrap 5: What’s New?
Were you already using any of the previous versions of Bootstrap? If so, you may be naturally curious about the advantages of the new one over its predecessors. A brief comparison with the most recent forerunner, namely Bootstrap 4, can give a glimpse of the upgrades.
Colors
Looks do matter, don’t they? The latest version comes up with an enriched color palette. Beyond the looks, this also adds up to the overall clarity.
Modification alert also for the Bootstrap form elements. Their look will not change from now on, regardless of the browser or operating system (OS) you may be using.
Grid system
Bootstrap 4 had a total of 5 tiers. The new Bootstrap grid adds one more to the list. So now we have xs (extra small), small (sm), md (medium), lg (large), xl (extra large), and xxl (extra extra large). Note that all of them are much more responsive than before.
Gutter
Here’s another innovation. The current version uses .g* with font size in rem (Root Em). At least some of you surely understand why this enables much more flexibility than the previous version based on pixels.
Icons
Get ready for some excellent news: Bootstrap icons are now SVG (Scalable Vector Graphics). Do you need a heads-up on how cool those can be? Well, what if we said resolution independence, increased reactivity, more interactivity, or DOM navigability? Already enough to whet one’s appetite, right?
JQuery
RIP, good old jQuery library. Time to taste new flavors with Vanilla JavaScript. Okay, it’s not so new per se, but it seems that Bootstrap needed some time to integrate it. Now, is that a practical choice? The reviews are mixed, varying from one developer to the other. While some praise the speed of Vanilla (up to 25 times more than jQuery), others complain about its complexity. What about you?
Navbar
Adios to inline-block as well. The youngest Bootstrap member has revised some of its default options. For instance, it offers a black dropdown as a default feature for the dropdown-menu-dark class.
Jumbotron
Another controversial farewell from the new version: Jumbotron is no more. Bootstrap has decided to remove it to smooth out some elements like margins and padding. One of the reasons is its willingness to implement more sustainable and sensitive utility classes. However, judging by the number of online questions asking how to get Jumbotron back, there’s no unanimity in favor of this update.
Utilities API
Some fresh air in here too. With Bootstrap 5, you can now change your utilities and even create your own from scratch. So don’t wait to join the developers who have already started enjoying more freedom.
‘Is that all there is?’, the late Peggy Lee would have asked. No, of course not. Those were just a few appetizers. We will let you discover the remaining ones. What we will do right now is to move to some concrete Bootstrap examples. In other words, we will start exploring the most noticeable usage characteristics.
Let’s clarify something beforehand: Bootstrap 5 is a somewhat complex tool. This explains the amount of documentation that keeps flourishing on the web. You may even have noticed that some specific courses are being offered. So we suggest you consider the following as a preliminary or ‘beginner’s guide’. Not to mention that many other features are likely to appear in the coming months. Staying tuned as much as possible seems the best thing to do.
Bootstrap 5 Starter Template
That being said, let’s grab our torches and look closer. First of all, to use Bootstrap… one needs to have Bootstrap. Don’t wait any longer to visit getbootstrap.com and download the current version abbreviated as v5.1.0. Alright, what’s next?
Get your files ready
Maybe you already know that Bootstrap templates require users to download the appropriate CSS and JavaScript files. If you don’t want to do that, you may also use the Bootstrap CDN links. Either way, don’t skip the files step. That’s the basis of your starter template from which you will proceed for all the rest.
Thus you have the choice between hosting the files on your server and downloading them. We will examine both possibilities respectively in the two upcoming subsections.
Hosting the files on your server
The safest way is to download the dedicated CSS and JavaScript files directly from Bootstrap’s official site (the getboostrap.com as mentioned earlier). That said, independent open-source sites (GitHub, etc.) can supply you as well. You will get a zip file comprising the necessary CSS and JS folders. Observe those carefully. There are indeed several factors that should guide your choice, such as the browser you are using, the particularity of your project, etc.
For the CSS aspect, you will have different versions at your disposal: grid, reboot, utilities, and minified. In most cases, the latter should be enough, meaning that minified files are usually multipurpose. They are coded as ‘bootstrap.min.css’.
JS files can be a little more tricky. The fact that you won’t need jQuery anymore (see previous sections of the article) is undoubtedly an advantage. However, you will have to proceed differently depending on whether you are using bundled versions or not. Reminder: bundled files are coded as ‘bootstrap.bundle.js’, and they already include Popper script files. On the other hand, plain versions (not bundled) are coded as ‘bootstrap.js’ and don’t have any Popper script. So if you choose to use those, you must incorporate additional JS and Popper script files. The Popper ones are downloadable on popper.js.org.
It’s simply impossible to cover every template option within the limits of our article. The most important thing to remember is to arrange the CSS and JS files in proper order. Don’t forget either that Bootstrap templates are built on HTML5 Doctype. So your HTML template should start with the indicator to function without any flaw.
Working with CDN files
Remember, this is the second option that you’ve got. If you don’t want to overload your server, you may use CDN (Content Delivery Network) links. Those can offer you non-negligible gains in terms of speed. Your starter template will be sort of prefabricated. The main thing you will have to do is fill the body section with your content. That section is the one starting with and ending with.
Personalize your files
Well, this is kind of the point, right? Source files help you obtain your own design and serve your own objectives. What this means is that you can be selective. Bootstrap’s official website is already displaying a handful of guidelines about customization (please check https://getbootstrap.com/docs/5.0/customize/overview/). So, in fact, you will have to perform only the actions required by the components you have chosen. We will be selective in this article and discuss the most commonly used elements. Meet us at the following sections.
Bootstrap Card System
So within our willingness to be selective, we have picked cards as one of the topics to be briefly discussed here. Indeed, cards are among the relatively new components (existing since Bootstrap 4). Thus most of us are still trying to figure them out properly. In very simplified terms, cards are a sort of content container. Anything related to headers and footers is also located there. The different elements of the container (e.g., buttons, description, images) allow you to use different card types. So it’s up to you to choose and experiment with the various alternatives. We will provide some basic information about the commands that seem to be used more frequently.
Basic features
First of all, let’s mention the ‘purest’ form of a card. In fact, it’s nothing but a ‘.card’ class. If you also add a ‘.card-body’ class to it, what you get is… a basic card. From there, you can add the elements that you need to create more elaborated cards.
Titles and text
It’s safe to say that these are among the essential ingredients. Without them, it would be harder to detect what is what, namely the role of the X or Y card. To create a title, just use the ‘.card-title’ class. Similarly, the ‘.card-subtitle’ class is the right one for adding subtitles (if any). But what if there’s confusion between titles and subtitles? No worries, you can separate them by changing their respective looks. To do so, you can use the ‘.text-muted’ class.
Then when it comes to introducing your body text, all you have to do is add the .’card-text’ class. In other words, that’s the one allowing you to insert your text after the titles.
Text alignment
You probably don’t want to spread your text randomly all over the place, do you? Sure, there’s already a default configuration that aligns your text to the left. But some other times, you may need to bring some modifications. Here’s what to do: in the ‘.card-block’ class, add the ‘.text-center’ class to center your text or the ‘.text-right’ class to shift it to the right.
Is there something that you want to emphasize in your card? Headers and footers can help you do that. You can place these shaded text areas at the top and/or bottom of your cards. Their respective classes are coded as ‘.card-header’ and ‘.card-footer’.
Colors
Bootstrap 5 has improved its color palette, so why not enjoy it? Thanks to the background utilities, you can change the background color of your cards and make them more attractive. The same goes with your texts and borders. You can color them at your convenience. Do it by using the ‘.text-‘ and ‘.border-‘ classes. To avoid any readability issues, assign darker backgrounds to lighter texts and vice versa.
Bootstrap cards have many other properties that we will let you discover by yourself… also for the fun of it.
It is worth mentioning this other major component of the framework. This is indeed a foundation that will allow you to perform a whole set of actions. Moreover, this isn’t only about you but also those who will visit your website. Buttons are among the main tools that will make them interact with your site.
The Bootstrap button functionalities are pretty easy to manipulate once you have grasped a few principles. The predefined styles are Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. Each one has a specific semantic purpose, color, and code. Here’s the cool thing: copy-pasting the related code is enough whenever you want to use one of them. Once pasted in the body section of the HTML file, the button is ready to be used.
Why do the predefined styles have such names? Simply because they literally represent specific kinds of actions (see the aforementioned semantic purpose). Let’s pick the green ‘Success’ style as an example. This one can serve as a ‘Ready to checkout’ button on your future site. So as you see, it would indicate that the visitor has performed a successful action, getting ready to go further (green color analogy). The same logic applies to the other styles (danger = red = informing the user that something went wrong, etc.).
The generic button class is ‘.btn’. But since not all buttons have the same purpose, you will have to use modifier classes. Those are easy to remember because they include the name of the desired style. So it goes like this: ‘.btn-primary’, ‘.btn.secondary’, ‘.btn-success’, etc. To complete the modifier classes, you can use
the <body>, <a>, and/or <input> elements. To change their size, just add the .btn-lg and .btn.sm modifiers.
Bootstrap 5 Under a Few Lines
Bootstrap 5 is a promising, multifaceted framework that unveils new web design and development horizons. Sure, it may require a minimum of mastery to be used effectively. You don’t need to be preoccupied, though. This latest version is much easier to explore, even on your own.
Plus, the number of helpful tutorials and courses (with some of them focusing on very specific aspects) increases day by day. Don’t shy away from using them. You will understand how fruitful those efforts can be once you end up with a sophisticated yet mobile-friendly website. Interested in further reads? Check out Bootstrap vs Foundation.