Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn Bootstrap 4
  • Bootstrap 3 Vs Bootstrap 4

Topics

  • Bootstrap 4 Cards
  • Bootstrap 4 List Groups
  • Bootstrap 4 Breadcrumbs
  • Bootstrap 4 Pagination
  • Bootstrap 4 Progress Bars
  • Bootstrap 4 Spinners
  • Bootstrap 4 Badges
  • Bootstrap 4 Button Group
  • Bootstrap 4 Buttons
  • Bootstrap 4 Alerts
  • Bootstrap 4 Figures
  • Bootstrap 4 Jumbotron
  • Bootstrap 4 Tables
  • Bootstrap 4 Images
  • Bootstrap 4 Colors
  • Bootstrap 4 Typography
  • Bootstrap 4 Grid System
  • Bootstrap 3 Vs Bootstrap 4
  • Bootstrap 4 Layout
  • Bootstrap versions
  • Bootstrap Introduction

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

Bootstrap 3 Vs Bootstrap 4

Bootstrap has been the leading choice for front-end developers. It is an open-source front-end framework. The bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy.
The bootstrap gives you a lot of shortcuts for creating web pages that will save you time and energy. All you need is a basic understanding of HTML and CSS to creates that are responsive, mobile-first, and compatible with all modern browsers. In this tutorial, we see the difference between bootstrap 3 and bootstrap 4.
Sr.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 Glyphicons Supported Not Supported
9 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.
10 Dark/inverse Tables Not supported Uses .table-dark class to make dark/inverse tables
11 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
12 Form Control Size By using .input-lg and .input-sm classes, you can increase or decrease size of an input control By using .form-control-lg and .form-control-sm classes, you caniIncrease or decrease size of an input control
13 Help Text Display the help text by using .help-block class Display the help text by using .form-text class
14 Styles Uses the .btn-default and .btn-info classes on buttons Uses the .btn-secondary, .btn-dark, and .btn-light classes on buttons and dropped the .btn-default class.
15 Outline Buttons Not Supported Styling the buttons with outline color using .btn-outline-* class
16 Button Sizes The .btn-xs class is available Supported only .btn-sm and .btn-lg classes and dropped the .btn-xs class
17 Menu Headers Use .dropdown-header class to the li tag Use .dropdown-header class to h1 - h2 tags
18 Dividers Use the .divider class in the li element Use the .dropdown-divider class in the div element
19 Fixed Navbars Used .navbar-fixed-top and .navbar-fixed-bottom classes to fix the navbar to top or bottom By using .fixed-top and .fixed-bottom classes, fix the navbar to top or bottom
20 Pagers Pages can be align by using .previous and .next classes Not supported
21 Jumbotron Full Width It does not uses .jumbotron-fluid class on full-width jumbotrons It uses .jumbotron-fluid class for full-width jumbotrons
22 Carousel Item Uses .item class for carousel items. Uses .carousel-item class for carousel items.
23 Wells, Panels and Thumbnails Supported Not supported. Use cards instead
24 Inline Navs It doesn't include .nav-inline class Display the navs as inline by using the .nav-inline class
25 Navbar Alignment By using .navbar-right, .navbar-left classes, align components within the navbar. Can either use spacing utilities for eg .mr-auto, or any of the flexbox alignment utilities.
26 Linked List Items/Button List Items Apply .list-group-item to the a element. Apply .list-group-item-action to the a element.
27 Cards Not supported Supported. Cards replace functionality that was previously provided by panels, wells, and thumbnails.
28 Wells, Panels and Thumbnails Supported Not supported
29 Affix Supported Not supported
30 Page Headers The .page-header class is supported. The .page-header class is not supported.
31 Jumbotron Full Width It does not uses .jumbotron-fluid class on full-width jumbotrons It uses .jumbotron-fluid class for full-width jumbotrons

Post navigation

Bootstrap 4 Layout
Bootstrap 4 Grid System

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok