Skip to content
Related Articles

Related Articles

Improve Article

What is the difference between Bootstrap v3 and v4 ?

  • Last Updated : 26 Sep, 2021
Geek Week

In this article, we will see the differences in Bootstrap v3 & v4 and their implementation. Bootstrap is a free open-source front-end framework for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. It provides pre-defined CSS classes and id to users which helps them in the development process that saves time and makes code clean and enhances readability. Bootstrap version 3 was launched in 2013, while in August 2017 Bootstrap version 4 first came into use. You can get the Bootstrap CDN link by copying the CDN link from the official website & to your HTML document. We can also download the bootstrap from the site then placed it in the working directory. Please refer to the Bootstrap Tutorials article for further details.

Different versions of Bootstrap:

  • Version 2.x: Supports responsive design.
  • Version 3.x: Supports mobile-first design.
  • Version 4.x:  Introduces SASS and Flexbox support.
  • Version 5.x: Latest update.

We will understand both bootstrap v3 & v4 through the examples.

Bootstrap v3: It introduces a mobile-first design for developers by introducing the concept of the Bootstrap grid system that scales up to 12 columns to increase the device viewport. It allows us to create complex and adaptive layouts with ease by making use of the 4-tiers of grid classes – phones, tablets, desktops, and large desktops. In Bootstrap v3, the typography concept is introduced for adding already-existing HTML text-based control functionality along with adds the new text-control to enhance the way to render the text. The CSS source file for bootstrap v3 is LESS

Bootstrap v3 CDN links for Bootstrap’s CSS and JavaScript:



<!– CSS only –>
<!– Latest compiled and minified CSS –>

<link rel=”stylesheet” 
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” 
integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”>

<!– Optional theme –>
<link rel=”stylesheet” 
href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css” 
integrity=”sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” 
integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script>

Example 1: In this example, we have used the Bootstrap v3 CDN link

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href=
        integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous" />
  
    <!-- Optional theme -->
    <link rel="stylesheet" href=
        integrity=
"sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
</head>
  
<body>
    <div class="container">
        <h2>Welcome To GFG</h2>
        <div class="row">
            <div class="col-sm">Data Structure</div>
            <div class="col-sm">Web Development</div>
            <div class="col-sm">Placement course</div>
        </div>
    </div>
    <script src=
        integrity=
"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Output:

Bootstrap version 4.0: It includes Bootstrap 3 features, and added some new features, likes SASS files and Flexbox. SASS is the CSS source file for bootstrap v4. Bootstrap v4 is supported by the major browsers along with the improvement in the grid layout & form supports. It also introduced the concept of the card component that provides a flexible and extensible content container having multiple options.



Bootstrap v4 CDN links for Bootstrap’s CSS and JavaScript:

<!– Latest compiled and minified CSS –>

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css” 
integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>

<!– Latest compiled and minified JavaScript –>

<script src=”https://code.jquery.com/jquery-3.2.1.slim.min.js” 
integrity=”sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN” crossorigin=”anonymous”>
</script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js” 
integrity=”sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q” crossorigin=”anonymous”>
</script>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js” 
integrity=”sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl” crossorigin=”anonymous”>
</script>

Example 2: In this example, we have used the Bootstrap v4 CDN link for making the Bootstrap card.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
</head>
  
<body>
    <div class="container">
        <div class="card">
            <div class="card-header">Bootstrap Card</div>
            <div class="card-body">
                <h5 class="card-title">GeekforGeeks</h5>
                <p class="card-text">
                    A Computer Science portal for geeks. 
                    It contains well written, well
                    thought and well explained computer 
                    science and programming articles
                </p>
  
                <a href="#" class="btn btn-primary">
                    Know More
                </a>
            </div>
        </div>
    </div>
  
        integrity=
"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous">
    </script>
</body>
  
</html>

Output:



Difference between Bootstrap v3 and Bootstrap v4:

Component

Bootstrap v3

Bootstrap v4

CSS source file

LESS

SASS

CSS  Unit

px

rem

Font Size

14px

16px

Grid System

It is based on 4 tier grid system (xs, sm, md, lg)

It is based on 5 tier grid system (xs, sm, md, lg, xl)

Dropdown Structure  

Created using <ul> and <li>

Created with <ul> or <div>

Images class 

.img-responsive 

.img-fluid

Tables



use .table-responsive class in <div> tag

use .table-responsive class in <table> tag

Offsetting Columns  

col-md-offset-4

offset-md-4

Form Control Size

.input-lg increases size while .input-sm decreases size

.form-control-lg increases size while .form-control-sm decreases size

Button Sizes

.btn-xs class is available

.btn-sm and .btn-lg classes are there and the .btn-xs class is not

Jumbotron Full Width

.jumbotron-fluid class is not used on full-width jumbotrons 

.jumbotron-fluid class for full-width jumbotrons is used in this

Carousel Item

carousel items are arranged using .item class

It uses .carousel-item class for arranging carousel items.

Inline Navs

Do not have .nav-inline class 

Inline navs are displayed by using the .nav-inline class



Styles

It has .btn-default and .btn-info available classes for buttons 

Have different classes for buttons like: .btn-secondary, .btn-light and .btn-dark.

Checkboxes and Radio Buttons

.radio, .radio-inline, .checkbox, or .checkbox-inline classes are available for radio and checkbox.

.form-check, .form-check-label, .form-check-input, or .form-check-inline are the classes used to display radio and checkbox.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :