Bootstrap has become the world’s favorite framework for building responsive web UI. In the last edition of DNC Magazine, we took a more detailed look into the newest Bootstrap release - Bootstrap 4 Alpha - and discussed what the project has to offer. In this article, we will look into a migrating scenario from simple Bootstrap 3 website to Bootstrap 4, step by step.
This article is published from the DNC Magazine for Developers and Architects. Download this magazine from here [PDF] or Subscribe to this magazine for FREE and download all previous and current editions.
In a previous article, “Exploring Bootstrap 4”, we briefly touched upon the major differences and new features that come about with the latest release of Bootstrap. To recap: Bootstrap 4 is a complete re-write of its predecessor - as such, it comes with a number of breaking changes, including:
- Dropping support for panels, wells and thumbnails
- The replacement of the badge component with labels
- The addition of a new grid tier
- Favoring root em (rem) over pixels (px) as the preferred typographic measurement
- Class name changes for the nav bar, carousel, dropdown and pagination
(Note: A complete list of changes can be found here: https://v4-alpha.getbootstrap.com/migration/)
Migrating to Bootstrap v4
With these changes in mind, this article hopes to serve as a (non-exhaustive) step-by-step guide for migrating an existing Bootstrap 3 website to Bootstrap 4. To this end, we will be utilizing a small, single-page, demo website built using sample snippets provided by the official Bootstrap 3 documentation. Figure 1 below illustrates the landing page of this website.
Figure 1: The landing page of our demo website, built using sample snippets found in the official Bootstrap 3 documentation.
It is composed of a top nav bar, a carousel, an alert and a grid using panels, followed by a pagination component.
Adding Bootstrap 4
The first step on our migration journey is to replace the Bootstrap 3 reference (stylesheet and JavaScript file) with the Bootstrap 4 equivalent. To do so, first install Bootstrap 4 using bower install bootstrap#v4.0.0-alpha.4. This should create a new folder, bower_components, in your working directory.
Replace the Bootstrap 3 stylesheet reference with:
< link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
Similarly, replace the Bootstrap 3 JavaScript reference with:
< script src=“bower_components/bootstrap/dist/js/bootstrap.min.js">
Instead of bower, one can also use npm (npm install bootstrap@4.0.0-alpha.5), or composer (composer require twbs/bootstrap:4.0.0-alpha.5) to install Bootstrap.
Alternatively, as per the Bootstrap 4 documentation, you can use the Bootstrap 4 CDN:
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous" >
< script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous">
Save and refresh. Our demo page should now appear broken, as shown in figure 2 below.
Figure 2: The landing page of our demo website rendering incorrectly after including Bootstrap 4.
Fixing the navigation bar
First, let’s look into fixing the navigation bar. Our Bootstrap 3 nav bar is defined as follows:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 4 greatly simplifies the navbar. However, this simplification will require us to make several changes to our markup, in order to get the navbar working again. Firstly, we no longer need the div, wrapping the navbar contents, to which the container-fluid class is applied, because navbars are now fluid by default. We also no longer need to explicitly specify that the navbar items are collapsible. Hence, we can remove the div to which the class collapse navbar-collapse was assigned. Last but not least, we also no longer require the navbar-header class, so we can also remove that element.
Bootstrap 4 also requires that a color scheme be specified for the navbar.
For more information on color schemes see https://v4-alpha.getbootstrap.com/components/navbar/#color-schemes
Let’s go ahead and apply navbar navbar-light bg-faded to the nav element.
Any navbar list item now requires the nav-item class. Similarly, any links must have the nav-link class applied to them. Both the nav-item and nav-link classes ensure that the display type is set to inline-block.
Finally, we must also apply the dropdown-item to all dropdown items (more on this later).
Our Bootstrap 4 navigation markup now looks as follows:
<nav class="navbar navbar-light bg-faded">
<a class="navbar-brand" href="#">Brand</a>
<ul class="nav navbar-nav">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data- toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">Item 1</a></li>
<li class="dropdown-item"><a href="#">Item 2</a></li>
<li class="dropdown-item"><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-item"><a href="#">Item 3</a></li>
</ul>
</li>
</ul>
</nav>
As can be seen above, the markup required for the Bootstrap 4 navbar is much flatter and simpler, causing it to render faster, and making it easier to parse by the reader.
Replacing panels
As noted in the introduction, Bootstrap 4 dropped support for panels, wells and thumbnails. Instead, developers should make use of a new Bootstrap 4 concept: cards. Cards aim to merge the three aforementioned components into one, flexible, component that supports various types of content at the same time. For example, cards support images, lists, footers and headers, and as such are much less restrictive than their individual counter-parts.
Our demo website defines a series of panels within a 4x2 grid. The markup for each panel is as follows:
<div class="panel panel-default">
<div class="panel-body">
Lorem ipsum dolor sit amet, posse fabellas periculis at mei, fierent suscipiantur, in mei populo eloquentiam. Vel luptatum repudiare tincidunt cu. An mei adhuc imperdiet signiferumque.
</div>
</div>
We will go ahead and replace each occurrence of these panels with a card. The simplest form of card is defined (figure 3):
<div class="card">
<div class="card-block">
<p class="card-text">
Lorem ipsum dolor sit amet, posse fabellas periculis at mei, sit at fierent suscipiantur, in mei populo eloquentiam. Vel luptatum repudiare tincidunt cu. An mei adhuc imperdiet signiferumque.
</p>
</div>
</div>
Figure 3: The simplest form of cards, containing only a card text, and no title or image.
Since cards offer various types of content, we could add a title, an image and some links, using the card-title, card-img-* and card-link classes respectively (figure 4):
<div class="card">
<img class="card-img-top" src="beach.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Surf it up!</h4>
<p class="card-text">
Lorem ipsum dolor sit amet, posse fabellas periculis at mei, sit at fierent suscipiantur, in mei populo eloquentiam. Vel luptatum repudiare tincidunt cu. An mei adhuc imperdiet signiferumque.
</p>
</div>
<div class="card-block">
<a href="#" class="card-link">Stoked!</a>
<a href="#" class="card-link">Hang lose!</a>
</div>
</div>
Figure 4: A card containing an image, title and two links.
Updating pagination
Bootstrap 4 introduced two new classes to use for pagination:
1. page-item which adjusts the display to inline, and sets the margins of the first and last children
2. page-link which adjusts the border, position, margin and text decoration of an anchor element.
As such, we must update the Bootstrap 3 pagination markup, from:
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
to:
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a href="#" aria-label="Next" class="page-link">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Updating the carousel
The changes to the carousel code are minor. In Bootstrap 3, a carousel is defined through the following markup:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="http://placehold.it/1150x450" alt="First slide">
<div class="container">
<div class="carousel-caption">
<p>Note: The sample carousel image was created using <code>placehold.it</code>Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh .</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Click me!</a></p>
</div>
</div>
</div>
<!-- Other carousel items here -->
</div>
The only changes required are
i) Renaming the item class to carousel-item
ii) Replacing the Glyphicon classes with icon-prev and icon-next
Glyphicons
Although the demo project discussed in this article does not use of Glyphicons, and important change to point out is the removal of Glyphicons from Bootstrap 4. As a result of this decision, Bootstrap 4 may be more light-weight, and may have a smaller footprint than its predecessor. This means that icon sets now need to be included manually - which is advantageous as one is now no longer coupled to the default Bootstrap icon set.
Updating Dropdowns
As already noted previously, Bootstrap 4 dropdown list items are now required to have the dropdown-item class applied to them. Furthermore, the dropdown menu is no longer required to be an anchor tag - instead, one can use buttons. Aside from these two changes, the classes used to define a dropdown menu remain the same for Bootstrap 4.
The Grid System
The most striking change to the Bootstrap grid system is the introduction of a new grid tier, which contains a breakpoint at 480px. This gives Bootstrap 4, four grid tiers, instead of 3: xs, sm, md, and lg.
The addition of the sm grid tier means that Bootstrap now has five breakpoints:
• An extra-small breakpoint for handheld devices that boast a smaller screen than normal (0px)
• A small breakpoint aimed at phones / handhelds (544px)
• A breakpoint for screens of medium size, such as tablets (768px)
• A breakpoint for large screens - that is, desktops (992px)
• An extra-large breakpoint to support wide-screen (1200px)
Furthermore, the offsetting of columns has changed, from .col-*-offset-** to .offset-*-**. That is, .col-md-offset-* now is .offset-md-*. Likewise, the pushing of columns changed from .col-push-*-* to .push-*-*.
Conclusion
In this article, we took a brief look into migrating a simple, existing Bootstrap 3 website to Bootstrap 4. The website was constructed using various sample snippets encountered in the official Bootstrap 3 documentation. Although the overall task may have appeared daunting at first, the changes themselves were straight forward - with the most effort being expended by updating the navigation bar and replacing panels with cards. In summary, the major changes that one should watch out for are:
• The replacement of panels, wells and thumbnails with cards
• The renaming of classes and the introduction of a new grid tier
• The removal of Glyphicons
• The replacement of badges with labels
• The simplification of the navigation bar
• The introduction of additional classes around dropdowns and pagination
Thanks to Gil Fink for reviewing this article.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Benjamin Jakobus is a senior software engineer based in Rio de Janeiro. He graduated with a BSc in Computer Science from University College Cork and obtained an MSc in Advanced Computing from Imperial College London. For over 10 years he has worked on a wide range of products across Europe, the United States and Brazil. You can connect with him on
LinkedIn.