Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Bootstrap 3 vs. 4
Ahmad Awsaf-uz-zaman
Apr 17, 2016
www.a2z-soft.com
What Is Bootstrap?
 free front-end framework for faster and easier
responsive web development.
 includes HTML and CSS ba...
Bootstrap CDN
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootst...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Global
Source CSS Files LESS SCSS
Primary...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Table
Inverse Tables Not supported.
Added...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Forms
Horizontal Forms
Horizontal forms r...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Forms
Validation and Feedback Icons
The ....
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Buttons
Semantic Styles
Includes the .btn...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Images
Responsive Images Use .img-respons...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Dropdowns
Structure
Apply dropdowns to li...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Button Groups
Justified?
Supports justifi...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Navbars
Colors
Limited (preset) color opt...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Pagination
Default Pagination
Only requir...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Labels
Pill Labels
The .label-pill class ...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Progress Bars
Uses <progress>?
Doesn't us...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Typography
Blockquotes
Bootstrap styles a...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Non-Responsive Usage
Supported?
Supported...
Difference between Bootstrap 3
and Bootstrap 4
Component Bootstrap 3 Bootstrap 4
Panels
Supported? Supported. Not supporte...
An example of XML
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div ...
Why Is Bootstrap Important?
 Easy to use: Anybody with just basic knowledge
of HTML and CSS can start using Bootstra.
 R...
Conclusion
 If someone need to get a prototype built
quickly, admin screens or internal apps
then Bootstrap is fantastic ...
Upcoming SlideShare
Loading in …5
×

Bootstrap 3 vs. bootstrap 4

Bootstrap 3 vs. bootstrap 4

  • Be the first to comment

Bootstrap 3 vs. bootstrap 4

  1. 1. Bootstrap 3 vs. 4 Ahmad Awsaf-uz-zaman Apr 17, 2016 www.a2z-soft.com
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×