Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.

Bootstrap 4 has better and improvised options to create your website easily and quickly.

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

Component Bootstrap 3 Bootstrap 4
CSS source files LESS SCSS
Grid System 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl)
CSS Unit px rem
Font Size 14px 16px
Dropdown Structure Created with <ul> and <li> Created with <ul> or <div>
Offsetting Columns col-md-offset-4 offset-md-4
Images .img-responsive class .img-fluid class
Tables Add .table-responsive class to parent <div> element Add .table-responsive class to <table> element
Glyphicons Supported Not Supported
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.
Dark/inverse Tables Not supported Uses .table-dark class to make dark/inverse tables
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
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
Help Text Display the help text by using .help-block class Display the help text by using .form-text class
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.
Outline Buttons Not Supported Style the buttons with outline color by using .btn-outline-* class
Button Sizes The .btn-xs class is available Available only .btn-sm and .btn-lg classes and dropped the .btn-xs class
Menu Headers Use .dropdown-header class to the li tag Use .dropdown-header class to h1 - h2 tags
Dividers Use the .divider class in the li element Use the .dropdown-divider class in the div element
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
Pagers Align the pages by using .previous and .next classes Not supported
Jumbotron Full Width It does not uses .jumbotron-fluid class on full-width jumbotrons It uses .jumbotron-fluid class for full-width jumbotrons
Carousel Item Uses .item class for carousel items. Uses .carousel-item class for carousel items.
Wells, Panels and Thumbnails Supported Not supported. Use cards instead
Inline Navs It doesn't include .nav-inline class Display the navs as inline by using the .nav-inline class