Bootstrap 3 and 4 are front-end frameworks that provide HTML and CSS templates. This document compares the differences between Bootstrap 3 and 4. It outlines changes to components like grids, forms, buttons, images and navbars. Some key differences include Bootstrap 4 having a 5-tier grid system compared to 4 tiers in Bootstrap 3, and dropping features like glyphicons and changing class names.

1. Bootstrap 3 vs. 4
Ahmad Awsaf-uz-zaman
Apr 17, 2016
www.a2z-soft.com

2. What Is Bootstrap?
 free front-end framework for faster and easier
responsive web development.
 includes HTML and CSS based design
templates for typography, forms, buttons,
tables, navigation, modals, image carousels
and many other, as well as optional
JavaScript plugins.
www.a2z-soft.com
2

3. Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- jQuery library -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
www.a2z-soft.com
3

4. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Global
Source CSS Files LESS SCSS
Primary CSS Unit px rem
Media Queries Unit px em
Global Font Size 14px 16px
Grids
Grid Tiers 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl).
www.a2z-soft.com
4

5. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Table
Inverse Tables Not supported.
Added inverse tables with the .table-
inverseclass.
Table Head Styles Not supported.
Added table head styles with
the .thead-defaultand .thead-
inverse classes.
Condensed Tables .table-condensed .table-sm
Contextual Classes
Bootstrap 3 doesn't use the .table-
prefix for its contextual classes.
Added the .table- prefix for its
contextual classes.
Responsive Tables
The .responsive-table class must be
added to a parent <div> element.
Can add .responsive-table to the
actual <table> element.
Reflow Tables Not supported.
Added reflow tables with the .table-
reflow class.
www.a2z-soft.com
5

6. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Forms
Horizontal Forms
Horizontal forms require the .form-
horizontal class.
Forms don't require .row when using
grids (although this class is still a
requirement on Bootstrap 3 grids in
general).
Forms require the .row class when
using grids.
Use .control-label when using grids
for form layout.
Use .form-control-label when using
grids for form layout.
Form Control Size
Use .input-lg and .input-sm to
increase or decrease the size of an
input control.
Use .form-control-lg and .form-
control-sm to increase or decrease
the size of an input control.
www.a2z-soft.com
6

7. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Forms
Validation and Feedback Icons
The .form-control-* classes are not
available in Bootstrap 3. To present
icons on the input fields using
Bootstrap 3, you need to
use glyphicons.
Dropped the .has-feedback class. It
is no longer required with the
introduction of the .form-control-
* classes.
Custom Forms Not supported.
Bootstrap 4 introduced custom
forms — completely custom form
elements that replace the browser
defaults.
www.a2z-soft.com
7

8. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Buttons
Semantic Styles
Includes the .btn-default and .btn-
infoclasses.
The .btn-secondary class isn't
available in Bootstrap 3.
Introduced the .btn-secondary class.
Dropped the .btn-default class.
Note that the .btn-info class was
initially dropped in Bootstrap 4 but it
has reappeared again.
Outline Buttons Not supported.
Introduced the .btn-*-outline classes
for styling buttons with an outline
color.
Button Sizes The .btn-xs class is available.
Dropped the .btn-xs class (only .btn-
sm and.btn-lg are available now).
www.a2z-soft.com
8

9. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Images
Responsive Images Use .img-responsive class. Use .img-fluid class.
Image Alignment
Use .pull-right, .pull-left, and .center-
block helper classes.
Can also use the various .pull-*-
right and.pull-*-left responsive helper
classes, as well as the .text-*-
left, .text-*-center, and.text-*-
right helper classes on the image's
parent.
Can use the various .pull-*-
none classes to disable floating.
www.a2z-soft.com
9

10. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Dropdowns
Structure
Apply dropdowns to lists (i.e.
using <ul> and <li>).
Apply the .dropdown-item to
a <a> or <button> element and wrap
them all in a <div> with a.dropdown-
menu class applied.
Menu Headers
Apply .dropdown-header to
the <li> tag.
Apply .dropdown-
header to <h1> - <h2> tags (as
Bootstrap no longer uses <li> tags to
build dropdowns).
Dividers
Apply the .divider class to
the <li> element (because it used
lists to build dropdowns).
Apply the .dropdown-divider to
the <div> element.
Disabled Menu Items
Apply the .disabled class to
the <li> element.
Apply the .disabled class to
the <a> element.
www.a2z-soft.com
10

11. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Button Groups
Justified?
Supports justified button groups (via
the .btn-group-justified class).
Not supported.
Navs
Inline Navs There is no .nav-inline class.
Can use the .nav-inline class to
explicitly specify navs to be displayed
inline.
www.a2z-soft.com
11

12. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Navbars
Colors
Limited (preset) color options.
Supports inverse navbars but not the
other classes.
New (preset) color options.
Introduced the .bg-*class, as well as
the .navbar-light and .navbar-
dark classes.
Navbar Alignment
Use .navbar-right, .navbar-left to
align components within the navbar.
Use the various .pull-*-right and .pull-
*-left responsive helper classes.
Can also use the various .pull-*-
none classes to disable floating.
www.a2z-soft.com
12

13. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Pagination
Default Pagination
Only requires .pagination to be added (to
the <ul> element that represents the list
of pages).
Must also add .page-item to
each <li> element and .page-link to
each <a> element.
Pagers
Uses .previous and .next for aligning
pagers.
Uses .pager-prev and .pager-next for
aligning pagers.
www.a2z-soft.com
13

14. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Labels
Pill Labels
The .label-pill class is not available.
However, Bootstrap 3 does
have badges (which achieves a
similar visual effect). Badges were
dropped in Bootstrap 4.
Introduced the .label-pill class for
making the corners more rounded.
Jumbotron
Full-Width
The .jumbotron-fluid class is not
required on full-width jumbotrons.
Introduced the .jumbotron-fluid class
for full-width jumbotrons.
www.a2z-soft.com
14

15. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Progress Bars
Uses <progress>?
Doesn't use the <progress> for
progress bars. Instead, applies
progress bar classes to nested
<div> elements.
Uses the
HTML5 <progress> element when
working with progress bars.
Glyphicons
Supported? Supported. Not supported.
www.a2z-soft.com
15

16. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Typography
Blockquotes
Bootstrap styles are applied to
the <blockquote> element by default.
Introduced the .blockquote class for
styling the <blockquote> element (i.e.
styling this element is now opt-in).
Page Headers The .page-header class is supported.
The .page-header class is not
supported.
Description Lists
The .dl-horizontal class does not
require grid classes.
The .dl-horizontal class requires grid
classes.
Blockquotes
Bootstrap styles are applied to
the <blockquote> element by default.
Introduced the .blockquote class for
styling the <blockquote> element (i.e.
styling this element is now opt-in).
www.a2z-soft.com
16

17. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Non-Responsive Usage
Supported?
Supported. You can specify a layout
to be non-responsive.
Not supported.
Cards
Supported? Not supported.
Introduced in Bootstrap 4. Cards
replace functionality that was
previously provided by panels, wells,
and thumbnails.
Carousels
Carousel Item Use .item class. Use .carousel-item class.
www.a2z-soft.com
17

18. Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Panels
Supported? Supported. Not supported. Use cards instead.
Wells
Supported? Supported. Not supported. Use cards instead.
Thumbnails
Supported? Supported. Not supported. Use cards instead.
www.a2z-soft.com
18

19. An example of XML
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
www.a2z-soft.com
19

20. Why Is Bootstrap Important?
 Easy to use: Anybody with just basic knowledge
of HTML and CSS can start using Bootstra.
 Responsive features: Bootstrap's responsive CSS
adjusts to phones, tablets, and desktops.
 Mobile-first approach: In Bootstrap 3, mobile-first
styles are part of the core framework.
 Browser compatibility: Bootstrap is compatible
with all modern browsers (Chrome, Firefox,
Internet Explorer, Safari, and Opera).
www.a2z-soft.com
20

21. Conclusion
 If someone need to get a prototype built
quickly, admin screens or internal apps
then Bootstrap is fantastic at creating a
professional look and feel straight out of
the box.
 Someone might not have a lot of
expertise in creating the front-end of a
website, considering browser deficiencies
and the myriad of device sizes, Bootstrap
has them covered – up to a point.
www.a2z-soft.com
21