21
Bootstrap 3 vs. 4 Ahmad Awsaf-uz-zaman Apr 17, 2016 www.a2z-soft.com

Bootstrap 3 vs. bootstrap 4

Embed Size (px)

Citation preview

Page 1: Bootstrap 3 vs. bootstrap 4

Bootstrap 3 vs. 4Ahmad Awsaf-uz-zamanApr 17, 2016

www.a2z-soft.com

Page 2: Bootstrap 3 vs. bootstrap 4

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

Page 3: Bootstrap 3 vs. bootstrap 4

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

Page 4: Bootstrap 3 vs. bootstrap 4

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

Page 5: Bootstrap 3 vs. bootstrap 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

Page 6: Bootstrap 3 vs. bootstrap 4

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

Page 7: Bootstrap 3 vs. bootstrap 4

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

Page 8: Bootstrap 3 vs. bootstrap 4

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

Page 9: Bootstrap 3 vs. bootstrap 4

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

Page 10: Bootstrap 3 vs. bootstrap 4

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

Page 11: Bootstrap 3 vs. bootstrap 4

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

Page 12: Bootstrap 3 vs. bootstrap 4

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

Page 13: Bootstrap 3 vs. bootstrap 4

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

Page 14: Bootstrap 3 vs. bootstrap 4

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

Page 15: Bootstrap 3 vs. bootstrap 4

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

Page 16: Bootstrap 3 vs. bootstrap 4

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

Page 17: Bootstrap 3 vs. bootstrap 4

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

Page 18: Bootstrap 3 vs. bootstrap 4

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

Page 19: Bootstrap 3 vs. bootstrap 4

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

Page 20: Bootstrap 3 vs. bootstrap 4

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

Page 21: Bootstrap 3 vs. bootstrap 4

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