- poojaoneact
- Oct 9, 2019
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
- 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.
2. Use CDN
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
- 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
<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>
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>
<div class="card">
<div class="card-block">
<p class="card-text">
Sample text
</p>
</div>
</div>
3. Updating 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>
<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
5. The Grid System
- 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
Comentarios
Agrega tu comentario