Differences Between Bootstrap 3 and 4


Advertisements

Description

Bootstrap is a powerful and popular mobile first front-end framework for building responsive mobile first sites on the web by using HTML, CSS and JS framework.

The following table shows differences in Bootstrap 3 and Bootstrap 4 −

S.No. Component Bootstrap 3 Bootstrap 4
1 CSS source files LESS SCSS
2 Grid System 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl)
3 CSS Unit px rem
4 Font Size 14px 16px
5 Dropdown Structure Created with <ul> and <li> Created with <ul> or <div>
6 Offsetting Columns col-md-offset-4 offset-md-4
7 Images .img-responsive class .img-fluid class
8 Tables Add .table-responsive class to parent <div> element Add .table-responsive class to <table> element
9 Glyphicons Supported Not Supported
10 Media Objects Uses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-body Uses just .media class for media objects.
11 Dark/inverse Tables Not supported Uses .table-dark class to make dark/inverse tables
12 Checkboxes and Radio Buttons Displays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classes Displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes
13 Form Control Size Increase or decrease size of an input control by using .input-lg and .input-sm classes Increase or decrease size of an input control by using .form-control-lg and .form-control-sm classes
14 Help Text Display the help text by using .help-block class Display the help text by using .form-text class
15 Styles Uses the .btn-default and .btn-info classes on buttons Uses the .btn-secondary, .btn-light and .btn-dark classes on buttons and dropped the .btn-default class.
16 Outline Buttons Not Supported Style the buttons with outline color by using .btn-outline-* class
17 Button Sizes The .btn-xs class is available Available only .btn-sm and .btn-lg classes and dropped the .btn-xs class
18 Menu Headers Use .dropdown-header class to the li tag Use .dropdown-header class to h1 - h2 tags
19 Dividers Use the .divider class in the li element Use the .dropdown-divider class in the div element
20 Fixed Navbars Fix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classes Fix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes
21 Pagers Align the pages by using .previous and .next classes Not supported
22 Jumbotron Full Width It does not uses .jumbotron-fluid class on full-width jumbotrons It uses .jumbotron-fluid class for full-width jumbotrons
23 Carousel Item Uses .item class for carousel items. Uses .carousel-item class for carousel items.
24 Wells, Panels and Thumbnails Supported Not supported. Use cards instead
25 Inline Navs It doesn't include .nav-inline class Display the navs as inline by using the .nav-inline class
Advertisements