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