bootstrap 3 vs. bootstrap 4
TRANSCRIPT
Bootstrap 3 vs. 4Ahmad Awsaf-uz-zamanApr 17, 2016
www.a2z-soft.com
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
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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4GlobalSource CSS Files LESS SCSS
Primary CSS Unit px rem
Media Queries Unit px em
Global Font Size 14px 16px
GridsGrid Tiers 4 tier grid system (xs, sm, md, lg) 5 tier grid system (xs, sm, md, lg, xl).
www.a2z-soft.com
4
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4TableInverse 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 ClassesBootstrap 3 doesn't use the .table-prefix for its contextual classes.
Added the .table- prefix for its contextual classes.
Responsive TablesThe .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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Forms
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 SizeUse .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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Forms
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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Buttons
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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4ImagesResponsive 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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Dropdowns
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).
DividersApply 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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Button 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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Navbars
ColorsLimited (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 AlignmentUse .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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Pagination
Default PaginationOnly 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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Labels
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-WidthThe .jumbotron-fluid class is not required on full-width jumbotrons.
Introduced the .jumbotron-fluid class for full-width jumbotrons.
www.a2z-soft.com
14
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Progress 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.
GlyphiconsSupported? Supported. Not supported.
www.a2z-soft.com
15
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Typography
BlockquotesBootstrap 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.
BlockquotesBootstrap 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
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4Non-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.
CarouselsCarousel Item Use .item class. Use .carousel-item class.
www.a2z-soft.com
17
Difference between Bootstrap 3 and Bootstrap 4Component Bootstrap 3 Bootstrap 4PanelsSupported? Supported. Not supported. Use cards
instead.
Wells
Supported? Supported. Not supported. Use cards instead.
ThumbnailsSupported? Supported. Not supported. Use cards
instead.
www.a2z-soft.com
18
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
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
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