Ever since the release of Bootstrap 4 beta version in 10 Aug 2017, all the frontend developers went crazy to find out if it's a rewrite or some form of upgrade to the previous version namely Bootstrap 3. Finally, the stable version of Bootstrap 4 was released on 18 Jan 2018, so, we can now find out what's the difference and decide on which one to choose from.
We all know that Bootstrap is the most popular and widely used css framework because of its fairly understandable syntax while it requires the understanding of basic HTML and CSS only.
What's new in Bootstrap 4?
Bootstrap 4 is a major rewrite using flexbox instead of floats along with a new grid tier included followed by a huge number of utility classes, typography det in rem values instead of pixel values and a few more notable modifications. But, rather than providing a vague opinion on those two versions and lets have a look on what's new in the latest version of bootstrap which will be userful as a quick documentation as well before the conclusion.
- Flexbox Grids and Auto Layout
- XL Grid
- Vertical Alignment
- Navigation Customization Options
- Auto Margins
- Responsive Spacings
- Responsive Sizings
- Utility Classes
- Reboot
- Form Appearance
- Dropdown
- Image Classes
- Introduction of Cards
- Extended Browser Support
- No Glyphicons
- Introduction of Reboot
Flexbox Grids and Auto Layout
The biggest change in Bootstrap 4 is the shift from floating specified width column approach to the flexbox grid method. The previous grid system is well supported in thid version along with the new one which is much easier to use while creating complex layouts. All the classes for widths are intact like container and container fluid and col-*-* along with row class. New class no-gutter is included for row which if added will remove the horizontal paddings of its child column classes.
The flexboxes classes like col or col-sm doesn't possess a specified width but the row class aligns all its child elements horizontally with the total width divided equally between them. Column classes with number indicate the number of columns to be used out of the possible 12 per row. So, if you need three equal-width columns in a row you'd need to use col-4 or col-sm-4 or so on. Class col-xl is introduced for screens with size larger than 1200px.
<div class="container">
<div class="row">
<div class="col">
One of the three equal width columns
</div>
<div class="col">
One of the three equal width columns
</div>
<div class="col">
One of the three equal width columns
</div>
</div>
</div>
Column Break Classes
Class w-100 is introduced as a class to add a full width div between the flexbox auto layout columns which will create a breakpoint and forces the column classes below it to get aligned in a new line on their own.
<div class="container">
<div class="row">
<div class="col">
One of two columns
</div>
<div class="col">
One of two columns
</div>
<div class="w-100"></div>
<div class="col">
One of two columns
</div>
<div class="col">
One of two columns
</div>
</div>
</div>
Defining width of desired columns
Within the flexbox classes, we can define specific width of the desired columns and the rest will automatically resize around them.
<div class="container">
<div class="row">
<div class="col">
auto width
</div>
<div class="col-6">
50% width
</div>
<div class="col">
auto width
</div>
</div>
Auto Width Column
The width of a column can be defined to depend on the natural width of its content by simply adding the key auto to the cloumn class like col-auto or col-sm-auto.
<div class="container">
<div class="row">
<div class="col">
defined width div
</div>
<div class="col-sm-auto">
div defined as auto width depending upon the area its content take up
</div>
<div class="col col-sm-2">
defined width div
</div>
</div>
</div>
Vertical Alignment of Contents
Bootstrap 4 allows the alignment of contents in a div vertically when the div has some defined height. The utility classes like align-items-start, align-items-center or align-items-end can be used to get the desired result.
<div class="container">
<div class="row align-items-center">
<div class="col">
Contents aligned to the center of the div vertically
</div>
<div class="col">
Contents aligned to the center of the div vertically
</div>
</div>
</div>
Horizontal Alignment of Contents
It has also introduced classes for the alignment of contents in a flexbox horizontally. The utility classes like justify-content-start, justify-content-center, justify-content-end and justify-content-around can be used to get desired alignment.
<div class="container">
<div class="row justify-content-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
Order Classes
It has also introduced the classes for the visual ordering of the divs namely order-*. The divs without the order class would be displayed first followed by the divs with order classes in ascending order of the number attached to them which should be between 1 and 12. Classes order-first and order-last also exist which will have the value of -1 and 13 respectively to avoid conflicts.
<div class="container">
<div class="row">
<div class="col">
Unordered class appears first in the order
</div>
<div class="col order-2">
Placed second in the page but declared second among the ordered divs and hence appears last on the browser
</div>
<div class="col order-1">
Placed last in the page but declared first among the ordered divs and hence appears second on the browser
</div>
</div>
</div>
Column Offset
With the use of flexbox, column offset can be achieved using the margin utility classes like mr-auto and ml-auto. ml-auto will leave space on the left equal to the width of the div itself while mr-auto will take up equal space on the right.
<div class="container"> <div class="row"> <div class="col-sm-4"> div without any offset </div> <div class="col-sm-4 ml-auto"> div with equal offset on the left </div> </div> </div>
Screen Size Break Point
Here's the screen size break point used by bootstrap 4.
// Extra small devices (phones with less than 576px width)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones with width ranging from 576px to 767.98px)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets with width ranging from 768px to 991.98px)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops with width ranging from 992px to 1199.98px)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large screen with width 1200px or higher)
@media (min-width: 1200px) { ... }
Typography
All heading elements like <h1> and paragraph element <p> have no margins on the top. Headings are given .5rem as margin-bottom and 1rem for paragraphs for easy spacing.
The <pre> element is reset to remove its margin-top and use rem units for its margin-bottom.
Classes from h1 to h6 are added to replicate the stylings of the original heading elements. Traditional large standout headings are also available.
<h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1>
Images
Class img-responsive has been replaced by img-fluid along with utility classes float-left and float-right added to float contents. mx-auto class is added for margin auto property and d-block class added for display block property.
<figure> element is optimized for images with captions. Classes like figure, figure-img and figure-caption are added to be used with respective HTML elements for baseline stylings. Utility classes for texts can be used to align the captions.
<figure class="figure"> <img src="" class="figure-img img-fluid rounded" alt=""> <figcaption class="figure-caption text-right">Sample Caption</figcaption> </figure>
Media Object
Class media-left has been scrapped, so, adding an image along with a div with class media-body for body contents will work fine. All the classes for margins and paddings are stated at the end of the article.
<div class="media"> <img class="mr-3" src="" alt=""> <div class="media-body"> <h5 class="mt-0">Media heading</h5> <p>Text contents here</p> </div> </div>
Class mr-3 defines the right margin from the image as 1rem, i.e. 16px which is the default font size of a normal text in a browser. Class mt-0 defines the margin on top of the h5 element with the value set to 0. Class align-self-* class can be used with the image to align it vertically in relation to the contents in media-body from the available options align-self-start, align-self-center or align-self-end.
Tables
Tables are slightly adjusted to style <caption>, collapse borders with consistent text-align throughout. Additional changes come with the table class. Class table-dark inverts the table into dark background with light colored texts. Classes thead-light and thead-dark can be added to <thead> to make them appear light or dark. Class table-condensed is replaced by table-sm while contextual classes like table-primary, table-secondary, etc are added. For tables with table-dark class added, these contextual classes won't work. Classes like bg-primary, bg-success, etc needs to be used instead.
Vertically Centered Modal
Class .modal-dialog-centered has been introduced which can be added to .modal-dialog to get a vertically centered modal.
Borders
Bootstrap 4 has introduced classes for borders like border, border-top, border-0, border-top-0, border border-primary,etc which allow to add border to contents easily. Defining border radius has also been easy with classes like rounded, rounded-top, rounded-circle, rounded-0, etc.
Display Classes
CSS display properties like inline, block, flex, etc are all included in classes where the classes are named in a format like d-{value} and the responsive versions as d-{breakpoint}-{value} as shown in examples.
- d-none
- d-inline
- d-inline-block
- d-block
- d-table
- d-table-cell
- d-table-row
- d-flex
- d-inline-flex
Embed
Class embed-responsive can be used to match the embedded object's aspect ratio with the container div. The aspect ratio classes are embed-responsive-1by1, embed-responsive-4by3, embed-responsive-16by9, embed-responsive-21by9.
<div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="" allowfullscreen></iframe> </div>
Spacings
Responsive classes for margins and paddings are introduced starting with m for margin and p for padding ranging from 0.25rem to 3rem.
Margin/Padding Sides
- t - margin-top or padding-top
- b - margin-bottom or padding-bottom
- l - margin-left or padding-left
- r - margin-right or padding-right
- x - both *-left and *-right
- y - both *-top and *-bottom
- blank - all 4 sides
Margin/Padding Values
- 0 - 0
- 1 - .25rem
- 2 - .5rem
- 3 - 1rem
- 4 - 1.5rem
- 5 - 3rem
- auto - auto
Buttons
Bootstrap 4 has come up with nice outlined buttons along with the regular ones namely .btn-outline-*.
<button type="button" class="btn btn-outline-primary">Primary</button>
Class btn-block is added for full width buttons. These button styles can be applied to other elements such as labels to provide checkbox or radio style button toggling by adding data-toggle="buttons" to a div containing those buttons and adding btn-group-toggle class.
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" checked> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options"> Radio
</label>
<label class="btn btn-secondary">
<input type="radio" name="options"> Radio
</label>
</div>
Dropdown Buttons
Any button can be turned into dropdown buttons easily in boostrap 4. The dropup variation can be achieved by replacing the class dropdown from the wrapper div by dropup while other variations like dropright and dropleft are also available. Add dropdown-toggle-split class to split the caret and the button text. Buttons can also be used in the dropdown items in place of anchor texts.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown">Dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</div>
Forms
Form elements are reset to simpler base styles where the most notable changes are as follows.
- fieldset has no borders, paddings or margins.
- legend has also been restyled to be displayed as headings.
- label is set to display: inline-block to allow margin to be applied.
- input, select, textarea and button have their margin removed and line-height set to inherit.
- textarea are modified to make them resizable vertically only.
- Class form-control-file is added for file inputs.
- Classes form-control-sm and form-control-lg are added for form sizing.
- Class form-check is added for checkbox and radio inputs which will stack grouped contents vertically. Class form-check-inline is added for horizontal alignment of such inputs.
- New classes have been added for form styling as shown below.
<div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customCheck1"> <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label> </div> <select class="custom-select"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> </select> <div class="custom-file"> <input type="file" class="custom-file-input" id="customFile"> <label class="custom-file-label" for="customFile">Choose file</label> </div>
Input Group
Classes input-group-prepend or input-group-append are added to group buttons with the input field or textarea.
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">some content</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">some content</span>
</div>
</div>
Cards
Cards have replaced the panels, wells and thumbnails from bootstrap 3. It includes options for headers and footers with a wide variety of content, contextual background colors and powerful display options. They offer easy alignment due to flexbox properties and have no margins by default.
<div class="card w-25"> <img class="card-img-top" src="" alt="Card image"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some texts</p> <a href="#" class="btn btn-primary">Click Button</a> </div> </div>
Class card-img-top places the image on the top of the card. With card-text class, texts can be added to the card. Classes card-header and card-footer are optional and goes on top and bottom of the class card-body. These cards by default take up the entire available width so it's important to define their width with sizing utilities.
The image of a card can be turned into background and texts can be added on top of it with the use of bootstrap 4 classes only.
<div class="card bg-dark text-white w-50">
<img class="card-img" src="" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">Add some texts for the card</p>
<p class="card-text">Some more texts</p>
</div>
</div>
Card Layout
A few options to define the layout of the series of cards are also available which are not responsive as of now. Series of cards can be wrapped with card-group class to give them equal width and height. Use of class card-footer inside a card group will force automatic alignment of the contents inside the group. Class card-deck can be used instead of card-group for unattached cards or the card-columns instead for masonry view.
Lists
All lists elements have their margin-top removed and a margin-bottom defined as 1rem. Nested lists have no margin-bottom. <dd>s margin-left is 0 and margin-bottom .5rem. while <dt>s are bolded. list-inline-item class should be added to the list itself along with the class list-inline to the list wrapper markup for inline list.
<ul class="list-inline"> <li class="list-inline-item">List Item</li> <li class="list-inline-item">List Item</li> <li class="list-inline-item">List Item</li> </ul>
List Group
List items are required to have proper classes in each markups. Add class active to the list item to indicate active selection. Add list-group-flush class to remove the left and right side borders along with rounded corners from the list group. Use contextual classes like list-group-item-primary to list items for stateful background and color. Use list-group-item-action class for hover effects. Class list-group can be added to div elements too for list group type styling.
<ul class="list-group"> <li class="list-group-item list-group-item-action">List Item</li> <li class="list-group-item list-group-item-action list-group-item-primary">List Item</li> <li class="list-group-item list-group-item-action list-group-item-secondary">List Item</li> </ul>
List groups can be used for tab contents too by adding data-toggle="list" attribute added to the list group item itself.
<div class="row">
<div class="col-4">
<div class="list-group">
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#list-home">Home</a>
<a class="list-group-item list-group-item-action" data-toggle="list" href="#list-profile">Profile</a>
</div>
</div>
<div class="col-8">
<div class="tab-content">
<div class="tab-pane fade show active" id="list-home">Content A</div>
<div class="tab-pane fade" id="list-profile">Content B</div>
</div>
</div>
</div>
Breadcrumbs
As other list items breadcrumb list items also need a class breadcrumb-item for proper styling.
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>
Pagination
Classes page-item and page-link need to be added to each list item and anchor element in pagination. Pagination size can be modified with pagination-sm or pagination-lg along with pagination class while alignment of the pagination in the div can be defined by the class justify-content-* which may be start, center or end.
<ul class="pagination pagination-sm justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">Previous</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="#">Next</a>
</li>
</ul>
Navigation
Bootstrap navigations share common markups along with the basic nav class. List items are required to have class nav-item and the links have the class nav-link. Nav items are left aligned by default which can be changed using flexbox utilities like justify-content-center or justify-content-end. Class nav-pills can be added to the nav for active link styling. Class nav-fills can be added to make the navigation items occupy entire horizontal space with random width or nav-justified to define equal width to each of the nav items. Class flex-column can be added to the nav for vertical navigation or responsive version like flex-sm-column can be added to define vertical navigation for specified screen size only.
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Nav Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav Item</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nav Item</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled Nav Item</a>
</li>
</ul>
Responsive Navigation Bar
Responsive navigation bar requires to be wrapped by navbar class along with navbar-expand-* which may be sm or md or lg or xl for collpasing breakpoint. Background color classes like bg-light or bg-dark can be added for background color. The wrapper class navbar-header has been scrapped from the previous version and navbar-toggler-icon class is added for toggle icon. Class for the toggle button has been changed to navbar-toggler. Rest of the markups are quite similar to the previous version with classes for each nav item and link required.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Website Name</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
Link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Link</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
In bootstrap 4, navigation menu can be created with the div element instead of ul and li markups.
Other Features
- The way flex items wrap in a flex container can be changed with classes like flex-nowrap, flex-wrap or flex-wrap-reverse.
- Position related classes like position-static, position-relative, position-absolute, position-fixed are also added.
- Classes for width percentage namely w-25, w-50, w-75 and w-100 are available along with classes for height h-25, h-50, h-75 and h-100 are added too. But the height divs can only be used inside a div which has its height defined in pixel value. Classes for max-width and max-height 100% are also available namely mw-100 and mh-100.
- Class text-truncate is introduced to truncate paragraphs with ellipsis.
- Classes like font-weight-bold, font-weight-normal, font-weight-light and font-italic are added for texts along with classes like visible and invisible for css visibility property.
Comparing Bootstrap 3 and Bootstrap 4
Now, we knew the about latest features added in bootstrap 4, let's compare these two versions to find out the best.
Layout
Bootstrap 3 is based on float based grid layouts while Bootstrap 4 is flexbox based. Aligning contents have been much easier with the latest version with any number of divs supported within a row. Apart from the, the contents now can be aligned vertically as well in a div with the use of pre-defined classes. This latest version even creates equal width auto layout without any prefixes defined. With flexbox, one can even define the direction of the content flow.
Grid System
Last version supports only 4 types of grid system namely xs, sm, md and lg while the newer one supports 5 namely sm, md, lg, xl and blank for extra small. So, styling for specific screen size has become much easier. Default media query breakpoints were quite limited in Bootstrap 3 with the framework supporting only four grid tiers.
col-xs-* : (phones, less than 768px)
col-sm-* : (tablets, 768px and up)
col-md-* : (desktops, 992px and up)
col-lg-* : (large desktops, 1200px and up)
Now, it's much flexible in Bootstrap 4 with the introduction of 5th tier.
col-* : (extra small, less than 576px)
col-sm-* : (small, 575px and up)
col-md-* : (medium, 768px and up)
col-lg-* : (large, 992px and up)
col-xl-* : (extra large, 1140px and up)
Font Size and Spacing
In previous version font size is declared in px value along with the margins and paddings while in the new version font size and spacings are all declared in rem values. It eases device responsiveness. Furthermore, Bootstrap 4 has added huge number of utility classes for margins and paddings along with border stylings which reduces the amount of custom css coding.
Utility Classes
This is another major upgrade in bootstrap 4 as a lot of utility classes for display, spacings, visibility, color, backgrounds, border styles, positioning, alignment, buttons and tables are added along with responsive touch-ups while the previous version had only few utility classes for positioning, colors and backgrounds.
Form Styling
With Bootstrap 4, additional form styling options are available along with the one present in previous version. Custom form styles which replaces the browser defaults are also added. Some of the styles present in Bootstrap 3 are not available though. Class input-group-addon has also been scrapped in the latest version.
Display Cards
Bootstrap 4 has completely scrapped the thumbnail, panel and well classes and introduced a new easy concept of cards.
Buttons and Dropdowns
With the latest version of Bootstrap, dropdowns are easy to add in buttons as well while positioning of the dropdown content has also been a lot easier.
Media Objects
Adding media objects have alos become easier with Bootstrap 4 since most of the media classes has been scrapped. Only the classes media and media-body can produce the effect with some helper classes.
Lists and Navigations
With Bootstrap 3, creating lists and navigations is quite an easy task with minimal css classes involved but in Bootstrap 4, all of the list or nav items along with the list and nav links requires individual classes to be added to them. It's a bit tedious.
Icons
The latest version of bootstrap has dropped the glyphicons font so the developers need to integrate external font files while the previous version supports it very well.
Conclusion
With significant changes and lots of improvements, Bootstrap 4 is definitely an upgrade on Bootstrap 3. It won't be tough for existing frontend developers to step up to the latest version and they should too, because, it offers the best customization and it's always better to stay updated to the recent tools available in the industry but if anybody is just starting to learn the framework, it's much better to learn the previous version first and then upgrade to the latest one. Huge increment in number of utitlity classes in the newest version would require greater extent of time to get into mind and the navigation classes are too much to learn initially. Moreover, if you need to edit some existing projects, it'd be a lot more confusing for a few years from now onwards if you start your learning process directly from the latest version.
Let us know what you think via comments.
Leave a comment