Last week, the long-awaited version 5 of Bootstrap was released. In this article, we will look at the new features in this version and how they can be useful for our development if we wish to use this incredible framework in our projects.
How to install the new Bootstrap
To use the new Bootstrap, we can simply include its CDN in our and tags. This information is available on the Bootstrap website, in the download area.
Another alternative is to install Bootstrap using a package manager like npm. To do this, just run npm install bootstrap in your Terminal.
Then, we can reference the CSS and JS files of this framework in our code:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Now that we know how to use Bootstrap in its latest version, let's move on to the new features.
New Offcanvas Component
The new offcanvas component consists of a side panel that is not part of the visible area of the site but can be used to display information to users.
To use it, we need to create a Below we see an example of an offcanvas: When we only use the class “offcanvas”, by default our Offcanvas will not appear. However, by adding the class “show”, it will be displayed: To make this process dynamic, we can create a button that will control how the Offcanvas is shown or hidden on the page. We can create it inside a card: It will look like this: What makes it possible for it to open and close the offcanvas is the attribute data-bs-toggle, which makes it clear that the purpose of this button is to act as a “switch” for our offcanvas, and this information will be used by Bootstrap's JavaScript to execute this behavior. Additionally, the href attribute is also very important, as it shows which offcanvas we want to open or close when clicking the button. Now, when clicking this button, we will see the offcanvas being opened and closed: Another customization we can make to this component is to define where on the page we want to position our offcanvas. To define this, we change the class that is in the opening tag of our offcanvas. In addition to having the class “offcanvas”, remember that we also had the class “offcanvas-start”. This class defined that our offcanvas would appear to the left of our page. If we change this second class to “offcanvas-end”, it will appear to the right of our page: If we set the class to “offcanvas-bottom”, the offcanvas will appear at the bottom of the page: And if we set the class to “offcanvas-top”, the offcanvas will appear at the top of the page: Another notable new feature was the new accordion component. In previous versions of Bootstrap, we could create this component with the “card” class. Starting from version 5, we can use the “accordion” class. Below we see an example of an accordion: The result of this code will be as follows: In addition to the “accordion” class, the data-bs-target and data-bs-toggle attributes are essential for the accordion to work. As we can see in the example, when we click on other options, the clicked item appears and the others are hidden: This is possible thanks to the data-bs-parent attribute, which is added to all divs with the class “accordion-collapse”. If this attribute is removed, the items we click remain open, even if we click on other options: With these concepts, we can develop accordion components, which can be useful in various contexts in our systems. The next new feature we will discuss is related to Bootstrap forms. Below we will comment on some simplifications related to forms, as well as the addition of new features. Starting from version 5 of Bootstrap, it will be possible to position forms in a simpler way, using the already well-known concept of Grid Layout, using the “row” and “col” classes. Due to this simplification, the “form-group”, “form-row”, and “form-inline” classes have been removed from Bootstrap 5. We can see how to position the fields of our form with the Grid System in the example below: The code is much simpler, isn't it? The result of this code will be as follows: The next feature we will analyze is the floating labels, a very common feature in Modern Web, which consists of selecting the text of the label that suggests filling out a field and “lifting” it to the top of our input. To create a floating label, we need to use the “form-floating” class and define our input and label tag within it. See an example below: A very important detail to always remember: it is essential to define a placeholder for text inputs. The Bootstrap documentation states that this is necessary because the framework will use the pseudo-selector :placeholder-shown to select the text content of the label tag. Now, when we run our code, we will see the following result: Note that the fields were rendered correctly. When we click on one of them, we see the following change: Note that now the text “Password” appears a little above in our input and we can type its content. It is also possible to apply this feature to the select tag. Just add the “form-select” class to it and also create a label: With this code, we will see the following result: If you have been wanting to add the floating labels concept to your projects for some time, this new Bootstrap feature can be a great help! In version 5 of Bootstrap, an improved styling for checkbox and radio fields was also added. To apply these new styles, it is necessary to use the “form-check” class in a div that will wrap each of these fields. In addition, we should use the “form-check-input” and “form-check-label” classes, as we can see below: The result of this code will be as follows: Note that the styling of these fields is much more pleasant, following a pattern that is being widely used in modern systems today. In addition to improving the styling of existing form fields, in version 5 a new style was also added for the input known as switch, which serves the same role as a switch. It is very common, especially in mobile applications, but now it can also be applied in Web applications. To use this new feature, in addition to adding the “form-check” class, we should also use the “form-switch” class: This code will result in the following: This novelty is indeed quite interesting, don't you think? Still talking about forms, Bootstrap 5 brought a new feature related to file selection fields. To create a file selection field, we can use the following code: The result will be as follows: Note that this is yet another case where the functionality and structure of the HTML element remain the same, but the styling has changed, becoming more pleasant as well. Other new features we can discuss in version 5 of Bootstrap are: All the new features shown in this article were presented in a video on Hcode Café, our weekly program about programming and technology broadcast on our YouTube channel. In addition to showcasing the new features, we also commented on best practices in development and answered questions from subscribers live. Watch the explanation in the video by clicking here. You can see the code developed in this article on our GitHub. We hope this article has helped you analyze the new features of Bootstrap 5 and that the new version of this incredible CSS framework helps us continue developing amazing projects for the Web. See you in the next article! :) Sign up for the course platform and follow the next blog guides.<div class="offcanvas offcanvas-start show" tabindex="-1" id="myOffCanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Update made</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Last week we made a change to our system. Check out the new features below.
</div>
</div>
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Updates in the System</h5>
<p class="card-text">We had updates in our System last week. Click the button below to learn more</p>
<a class="btn btn-success" data-bs-toggle="offcanvas" href="#myOffCanvas" role="button" aria-controls="myOffCanvas">See updates</a>
</div>
</div>
New Accordion Component
<div class="accordion" id="myAccordion" style="width: 50vw;">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#optionOne" aria-expanded="true" aria-controls="optionOne">
Bootstrap Course
</button>
</h2>
<div id="optionOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
<div class="accordion-body">
Do you want to elevate your knowledge in Web Development with a CSS Framework that enhances your productivity and makes your projects more professional? Would you like to understand the news in Bootstrap 4? Or is it time to elevate your knowledge in Bootstrap and understand its structure and how to extract the best it has to offer?
Whatever your motivation, you came to the right place.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#optionTwo" aria-expanded="false" aria-controls="optionTwo">
Complete Course in PHP 7
</button>
</h2>
<div id="optionTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#myAccordion">
<div class="accordion-body">
Looking to specialize as a WEB Programmer? Or perhaps seeking a career that offers more free time and flexibility? Always been curious to learn in a practical way how to program on the Back-End?
Whatever your motivation, you came to the right place.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#optionThree" aria-expanded="false" aria-controls="optionThree">
Mastering Databases with MySQL
</button>
</h2>
<div id="optionThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#myAccordion">
<div class="accordion-body">
Would you like to know why all programmers need to master databases? How do companies' information get stored, and how to manipulate this information? Do you want to become a complete Web programmer?
Whatever your motivation, you came to the right place.
</div>
</div>
</div>
</div>
Updates on Forms
Simplification in Positioning
<form>
<div class="row">
<label for="firstName" class="form-label col-5">First Name</label>
<div class="col-7">
<input type="text" class="form-control" id="firstName" />
</div>
</div>
<div class="row">
<label for="lastName" class="form-label col-5">Last Name</label>
<div class="col-7">
<input type="text" class="form-control" id="lastName" />
</div>
</div>
</form>
Floating Labels
<div class="form-floating">
<input type="email" class="form-control" id="email" placeholder="me@example.com" />
<label for="email">Email Address</label>
</div>
<div class="form-floating">
<input type="password" class="form-control" id="password" placeholder="Your password" />
<label for="password">Password</label>
</div>
<div class="form-floating">
<select id="selectState" class="form-select">
<option value="" selected>Select a state</option>
<option value="AC">AC</option>
<option value="AL">AL</option>
<option value="AP">AP</option>
…
</select>
<label for="selectState">State of residence</label>
</div>
Improved Styling of Checkbox and Radio Fields
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="rememberMe">
<label class="form-check-label" for="rememberMe">
Remember me
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ageGroup" id="checkOne">
<label class="form-check-label" for="checkOne">
Underage
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="ageGroup" id="checkTwo">
<label class="form-check-label" for="checkTwo">
Of legal age
</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="notifications">
<label class="form-check-label" for="notifications">Enable notifications</label>
</div>
Improved File Input Styling
<div>
<label for="photo" class="form-label">Add a photo to your profile</label>
<input class="form-control" type="file" id="photo">
</div>
Other New Features
See more on YouTube
Conclusion
Keep learning with Hcode