Home » Web programming » Bootstrap

Difference between Bootstrap 3 and Bootstrap 4

In this article, we are going to learn differences between bootstrap 3 and bootstrap 4, newly added features, components etc.
Submitted by Bharti Parmar, on September 02, 2018

Introduction

In the previous article, we have learned what is .Jumbotron and .page-header class and how to use it? Basically, .page-header class is used in Bootstrap 3, not in Bootstrap 4 and .jumbotron class used in both the version; But, the new class .jumbotron-fluid is used in Bootstrap 4 which is currently a new component in Bootstrap 4. Like this, here are some more differences between bootstrap 3 and Bootstrap 4. Bootstrap 4 brought some major changes, adding new component; clashing others. So, in this article, we will discuss these differences. If you have any doubt, feel free to ask in the comment section.

So, let’s get started to discuss the differences between them.

Difference between Bootstrap 3 and Bootstrap 4

1) Global / default

Both Bootstrap 3 and Bootstrap 4 have some global components.

Like:

Font size: - In bootstrap 3 by default font size is 14px and In Bootstrap 4 by default font size is 16px.
Primary CSS Unit: - In bootstrap 3 px unit is used and in bootstrap 4 rem unit is used.
Font: - In bootstrap 3 by default Helvetica, san-serif, Arial font is used and bootstrap 4 uses 'native font stack' (system fonts) including san-serif, Arial, Helvetica Neue.

2) Grid System

We use a Grid system in both Bootstrap 3 and Bootstrap 4 to design a mobile-friendly responsive page.

Like:

Grid Tier: - Bootstrap 3 grid system has 4 tier xs (for extra small device like phones) , sm (for small device like tablets) , md (for medium device like desktops) , lg (for large device like large desktop) and bootstrap 4 has 5 tier xs, sm, md, lg, xl (for extra large device like LED, LCD).
Offset Column: - bootstrap 3 Offset columns uses col-*-offset-* like col-sm-offset-3 and bootstrap 4 (offset-*-*) is used like offset-sm-3.

3) Tables

For creating a responsive table we use .table classes in bootstrap and here, in bootstrap 4 some more new different classes are used to create better responsive tables.

Like:

Table head: Table head uses .thead-light and .thead-dark classes in bootstrap 4; not present in bootstrap 3 (No table head class is supported in bootstrap 3).
Dark and Inverse table: In bootstrap 3 .table-dark class is not supported but, can be used in bootstrap 4.
Note: Prior to the bootstrap beta-2 version .table-inverse class is used. This .table-inverse class has been replaced with .table-dark class in bootstrap 4.
Condensed table: .table-condensed class is used in bootstrap 3 and in bootstrap 4 .table-sm class is used.
Contextual table: In bootstrap 3 .active, .info, .warning, .success, .danger classes are used. But, in bootstrap 4 .table-* is used like .table-info, .table-warning, .table-success, .table-danger, .table-active.
Responsive table: In bootstrap 3 .table-responsive class is used but, bootstrap 4 can be used to specify a particular breakpoints; which means in bootstrap 4 .table-responsive-* class is used ( Astric (*) xs, ms, md, lg, xl).

4) Forms

We used multiple classes to create responsive forms in bootstrap.

Like:

Horizontal Form: In bootstrap 3 .form-horizontal is required. This is no longer needed to display a horizontal form in Bootstrap 4. So, the .form-horizontal class is dropped in Bootstrap 4.
Note:
1. .row class does not require in forms when using grid but; in bootstrap 4 forms required either .row class or .form-row class when using the grid.
2. The .control-label class is used in bootstrap 3 and .col-form-label is used in bootstrap 4 for form layout when using the grid.
3. Bootstrap 4 initially used .form-control-label but successively changed this to .col-form-label.
Checkboxes and radio buttons: Use .radio, .radio-inline, .checkbox and .checkbox-inline class in bootstrap 3 and use .form-check-input, .check, .check-label and .form-check-inline class in bootstrap 4
Form control size: Use .input-sm and .input-lg to increase and decrease the size of an input; and In bootstrap 4 .form-control-lg and .form-control-sm is used.
Form label size: In bootstrap 3 no specific class is available for form label. .col-form-label-sm and .col-form-label-lg class is used in bootstrap 4 to form label.
Help text: .help-block is used in bootstrap 3 and .form-text class is used in bootstrap 4 to display help text.
Legends: No legend classes is used in bootstrap 3 but, bootstrap 4 provide .col-form-label class inside the <legend> element to style it like a label.
Static text: Bootstrap 3 uses .form-control-static class and bootstrap 4 uses .form-control-plaintext class.

5) Buttons

Different types of button classes are also available in bootstrap.

Like:

Style: We can use contextual classes to provide a style to the buttons; .btn-secondary class is not available in bootstrap 3. But, in bootstrap 4 all the contextual classes (.info, .primary, .secondary, .danger, .warning, .success) are available for stylizing the buttons.
Outline buttons: Not supported in bootstrap 3; In bootstrap 4 .btn-outline-* class is used.
Button size: .btn-xs class is available only in bootstrap 3 and in bootstrap 4 .btn-lg and .btn-sm class is available.

6) Images

Image classes in bootstrap.

Like:

Responsive image: Use .img-responsive class is used in bootstrap 3 and .img-fluid class is used in bootstrap 4.
Image alignment: .pull-right, .pull-left and .center-block class is used in bootstrap 3 and in bootstrap 4 .pull-*-right, .pull-*-left, .text-*-right, .text-*-left and .text-*-center are used.

7) Media Object

Bootstrap media queries has some different media object classes.

Like:

Classes: In bootstrap 3 .media, .media-object, .media-body, .media-heading, .media-right, .media-left, .media-list and .media-body are used. Bootstrap 4 uses .media class in which margins can be applied using spacer utilities. Some flexboxes are uses in bootstrap 4 like reordering.

8) Dropdowns

Difference between bootstrap 3 and bootstrap 4 dropdowns.

Like:

Structure: In bootstrap 3, dropdowns to the lists using <ul> and <li>. In bootstrap 4 dropdown can be built with <ul> and <div>. We can apply dropdown by using .dropdown-item to a <a> or <button> element wrap them all in a <div> or <ul> using .dropdown-menu.
Menu header: In bootstrap 3 .dropdown-header to the <li> tag and in bootstrap 4 in place of <li> tag, use <h1> and <h2> tag to .dropdown-header.
Divider: For Bootstrap 3, Apply .divider class to the <li> element (It is used with lists to build dropdowns) and in bootstrap 4 apply .dropdown-divider to the <div> element.
Disabled Menu Item: Apply the .disabled class to the <li> element and in bootstrap 4 .disabled class is used in <a> tag.

9) Buttons group:

btn-group-justified and .btn-group-xs class is used in bootstrap 3 but not in bootstrap 4.

10) Navs

.nav-inline class is not supported in bootstrap 4 anymore.

11) Navbars:

.navbar-light, .navbar-dark and .bg-* class is available in bootstrap 4 but, in bootstrap 3 only limited color options only supported viz. .navbar-inverse. For navbar forms, .navbar-form class is used in bootstrap 3 , not in bootstrap 4. For fixed navbar .navbar-fixed-top, .navbar-fixed-bottom class is used in bootstrap 3, but in bootstrap 4 .fixed-top, .fixed-bottom class is used.

12) Pagination

In pager .previous and .next class is used in bootstrap 3 but not support in bootstrap 4.

13) Labels

In bootstrap 3 .label-pill is not used but, in bootstrap 4 label is replaced with badge. So, here .badge-pill class is used for rounded corner.

14) Progress Bar

<progress> is used for animated progress in bootstrap. .progress, .progress-bar, .progress-bar-info, .progress-bar-striped, .progress-bar-active, .progress-bar-danger, .progress-bar-warning, .progress-bar-success classes is used in bootstrap 3. In bootstrap 4 .progress, .progress-bar, .progress-bar-striped, .progress-bar-animated class is used.

15) Glyph icons

Glyph icons are used in bootstrap 3, but not available in bootstrap 4.

16) Panel, Well, Affix, Thumbnails

Supported in bootstrap 3 but, not supported in bootstrap 4.

17) Carousel

.carousel-item class is used in bootstrap 4 and .item is used inside the carousel in bootstrap 3.

Conclusion:

In this article, we have case studied the differences between bootstrap 3 and Bootstrap 4. After reading this article, you can correlate the differences between them and have a better grasp over other articles mentioned in different articles. Stay tuned for the next article. We will dig deeper and discover more about Bootstrap.

Comments and Discussions!

Load comments ↻