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>
<!-- 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">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
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>
<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>
</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.
|
Similar Reads
Difference between React.js and Bootstrap
React JS is a JavaScript library for creating user interfaces while Bootstrap is a framework having pre-designed and styled components to create responsive UI. React dynamically builds the structure and Bootstrap add the format and styling to the components. What is React.js?ReactJS is a JavaScript
2 min read
Difference between HTML and Bootstrap
HTML stands for HyperText Markup Language. It is a standard markup language for creating webpages. It describes the structure of webpages. HTML is a basic building block of a website. It has different attributes and elements with different properties. HTML consists of a series of elements, which you
4 min read
Differences between Bootstrap and JQuery UI
Bootstrap: Bootstrap is a framework for front-end web development.it makes web development faster and easier. It contains HTML and CSS based design templates for various responsive front-end designing, as well as optional JavaScript plugins. JQuery UI: JQuery UI is a collection of GUI widgets and th
3 min read
Difference between reactstrap and react-bootstrap
Bootstrap is a popular front-end CSS framework used by web developers to design their web applications. Bootstrap components include HTML, CSS, and JavaScript with additional dependencies like jQuery which makes it hard to use in React applications. There are two libraries available which are reacts
4 min read
Difference Between Bootstrap and WordPress
Both Bootstrap and WordPress are popular tools used to create websites, but they serve different purposes and have unique features. Here’s a simple breakdown of what each one is and how they differ from each other.What is Bootstrap?Bootstrap is an open-source framework used for developing responsive
3 min read
Difference Between CSS and Bootstrap
Cascading Style Sheet(CSS): CSS is developed by Hakon Wium, Bert Bos, World Wide Web 17 December 1996. It is a language used to describes how HTML elements are to be displayed on a web page or layout of HTML documents like fonts, color, margin, padding, Height, Width, Background images, etc. CSS sta
3 min read
Difference between Angular Material and Bootstrap
Angular Material: Angular is a framework that is open-source and written in TypeScript. Angular framework is officially maintained by Google Organization and its main objective is to develop and design single web page applications. Angular Material is a User-interface module developed for Angular JS
2 min read
What is the Difference Between container and container-fluid in Bootstrap 5 ?
In Bootstrap 5, the "container" class creates a responsive container with a fixed width, adjusting to different screen sizes while maintaining margins. On the other hand, the "container-fluid" class generates a full-width container that spans the entire viewport without any margins, providing a seam
3 min read
Difference Between Bootstrap 3 and Bootstrap 4
Bootstrap: Bootstrap was developed by Mark Otto and Jacob Thorton at Twitter in August 2011. It is an open-source framework that is used to design responsive websites faster and easier. It is the most popular open-source framework that includes HTML, CSS, and JavaScript. It can create web applicatio
2 min read
Difference between Bootstrap 4 and Bootstrap 5
What is Bootstrap? It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc. bootstrap helps to design the frontend
3 min read