What is the difference between Bootstrap v3 and v4 ?
Last Updated :
26 Sep, 2021
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>
<link rel="stylesheet" href=
integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous" />
<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.
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...