Migrating to Bootstrap 4

This article gives detailed steps on migration to Bootstrap 4 from Bootstrap 3 along with fixes to be applied to common components such as navigation, panels, pagination and so on.

Overview

Bootstrap is the most popular HTML, CSS, and JS framework in the world for building responsive, mobile-first projects on the web. Bootstrap provides the ability to rapidly create modern websites that are fully responsive.

With the announcement of Bootstrap 4 many websites potentially will need to be updated.  In addition building new websites, current Bootstrap sites should be made compatible with Bootstrap 4. Bootstrap 4 boasts a number of major changes and improvements to the popular front-end framework

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 em (rem) over pixels (px) as the preferred measurement
  • Class name changes for the nav bar, carousel, dropdown and pagination

This article will discuss about migration steps as well as fixes to be applied to the commonly used components in any website.

Adding Bootstrap 4

The first step on our migration journey is to replace the Bootstrap 3 references (stylesheet and JavaScript file) with the Bootstrap 4 equivalent. There are multiple ways to include the references. We will have a look for 2 of them as below.


1. Download Compiled Files and Include References

You can download compiled flies from https://getbootstrap.com/docs/4.0/getting-started/download/. This doesn’t include documentation, source files, or any optional JavaScript dependencies (jQuery and Popper.js).

After downloading you can add references as shown below along with the external dependencies.

20191010082742-00000281-1.png

20191010083309-00000281-2.png

2. Use CDN
You can use below code snippets to include through CDN
20191010083905-00000281-3.png

20191010082742-00000281-1.png

After adding Bootstrap 4, your website must have overall broken UI. Let's start fixing the common components, your website would have.

1. Fixing navigation bar
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. Below are the highlights.
  • 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.
  • we also no longer require the navbar-header class.

Let's have a look, how Bootstrap 3 nav bar was looking so it is easier to understand and update.


Bootstrap 3 navbar
<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> 
  

Now new changes for Bootstrap 4 are,

  • Any navbar list item now requires the nav-item class.
  • Any links must have the nav-link class
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>
Hence , 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.

2. Replacing Panels

Bootstrap 4 removes the Panel and replaces it with the card. Our old panel code was as shown below.

<div class="panel panel-default">
    <div class="panel-body">
      Sample text
    </div>
</div>
Let's replace each occurrence of these panels with a card. The simplest form of card looks like,

<div class="card">
      <div class="card-block">
          <p class="card-text">
              Sample text
          </p>
      </div>
 </div>
3. Updating pagination
Bootstrap 4 introduced two new classes to use for pagination:
  • page-item which adjusts the display to inline
  • page-link which adjusts the border, position, margin and text decoration of an anchor

Bootstrap 3 Pagination:


 <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>
Bootstrap 4 Pagination:

  <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>
4. Glyphicons
Bootsrtap 4 removes the Glyphicons, as a result of this, 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.

5. 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. Bootstrap now has five breakpoints:
  • An extra-small breakpoint for handheld devices
  • A small breakpoint aimed at phones (544px)
  • A breakpoint for screens of medium size, such as tablets (768px)
  • A breakpoint for large screens - such as, desktops (992px)
  • An extra-large breakpoint to support wide-screen (1200px)

Conclusion:

  • The replacement of panels with cards
  • The renaming of classes and the introduction of a new grid tier
  • The removal of Glyphicons
  • The simplification of the navigation bar
  • The introduction of additional classes for dropdowns and pagination

Additional Images




Comments

Add your comment

Book a free consultation
user-symbol

Stay in touch

Get Practical Tips For Business and Developers.
Learn about PieceX Community Needs for Source Code Projects.
Be the First to Know PieceX Newest Free Community Code Projects.