1. Browser Support

Component Bootstrap 3 Bootstrap 4 Browser support supports IE8 and iOS 6 does not support IE8 & IE9 and iOS 6. It is supporting only IE10-11/Microsoft Edge and iOS 7+

2. Global Changes

Component Bootstrap 3 Bootstrap 4 Preprocessor for source CSS files LESS SASS Primary CSS unit px rem



px will still be used in Bootstrap 4 for media queries, grid breakpoints and container widths as viewports are not affected by font-sizes Global font-size 14px 16px



Since the primary CSS unit is rem and global font-size is 16px,

16px -> 1rem

15px -> 0.9375rem

14px -> 0.875rem

13px -> 0.8125rem

12px -> 0.75rem

11px -> 0.6875rem

10px -> 0.625rem

3. Grid system

Component Bootstrap 3 Bootstrap 4 Extra small Size < 768px < 576px max container width none (auto) none (auto) class prefix .col-xs- .col-xs- Small size ≥ 768px ≥ 576px max container width 750px 540px class prefix .col-sm- .col-sm- Medium size ≥ 992px ≥ 768px max container width 970px 720px class prefix .col-md- .col-md- Large size ≥ 1200px ≥ 992px max container width 1170px 960px class prefix .col-lg- .col-lg- Extra large size - ≥ 1200px max container width - 1140px class prefix - .col-xl-

4. Typography

Component Bootstrap 3 Bootstrap 4 Blockquote custom <blockquote> for quoting content Wrap <blockquote class="blockquote"> around any HTML as the quote. Similarly, use .blockquote-reverse class for a blockquote with right-aligned content Description list .dl-horizontal for horizontal description list, makes terms and descriptions side by side

<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl> Dropped .dl-horizontal . Use .row on <dl> and use grid column classes on its <dt> and <dd> children

<dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> </dl> Inline list <ul class="list-inline"> <li>....</li> </ul> <ul class="list-inline"> <li class="list-inline-item">....</li> </ul> added .list-inline-item to the children <li> item

5. Tables

Component Bootstrap 3 Bootstrap 4 Responsive table wrapping parent element must have .table-responsive class <table> element can have it instead of parent element Inverted table not supported colors can be inverted - light text on dark background with .table-inverse class Small table .table-condensed .table-sm Table head modifiers not supported added table head modifiers using .thead-default and .thead-inverse classes Contextual classes .active , .success , .warning , .danger and .info .table-active , .table-success , .table-warning , .table-danger and .table-info . Reflow table not supported the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc. by using the class .table-reflow on <table>

6. Images

Component Bootstrap 3 Bootstrap 4 Responsive images .img-responsive

<img src="..." class="img-responsive" alt="abc" /> .img-fluid

<img src="..." class="img-fluid" alt="abc" /> Rounded Images .img-rounded

<img src="..." class="img-rounded" alt="abc" /> .rounded

<img src="..." class="rounded" alt="abc" /> Image Circle .img-circle

<img src="..." class="img-circle" alt="abc" /> .rounded-circle

<img src="..." class="rounded-circle" alt="abc" />

7. Forms

Component Bootstrap 3 Bootstrap 4 Control labels .control-label .form-control-label Form control size .input-lg and .input-sm .form-control-lg and .form-control-sm Form group size .form-group-*

*(lg, md, sm or xs) .form-control-*

*(lg, md, sm or xs) Horizontal forms .form-horizontal No longer need the .form-horizontal class

8. Buttons

Component Bootstrap 3 Bootstrap 4 Button styles .btn-default .btn-secondary Button size .btn-xs No longer available. Only .btn-lg and .btn-sm are available Button group .btn-group-xs No longer available because of the removal of .btn-xs

9. Dropdowns

Component Bootstrap 3 Bootstrap 4 Build dropdowns applied to <li> using <ul> dropdowns can be built with <div> or <ul> now Divider .divider .dropdown-divider Dropdown item <ul class="dropdown-menu"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> dropdown items <li> don't require any class <div class="dropdown-menu"> <a class="dropdown-item" href="#">1</a> <a class="dropdown-item" href="#">2</a> </div> Support dropdown items as <a> and <button> . The dropdown items require .dropdown-item Caret symbol dropdown toggle must have explicit <span class="caret"></span> for caret symbol no longer required. It is provided automatically via CSS's ::after on .dropdown-toggle

10. Media queries

Bootstrap 3 /* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... }



Max and min widths @media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } Not available via LESS mixins Bootstrap 4 /* Extra small devices (portrait phones, less than 576px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) { ... } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) { ... } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) { ... } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { ... }



Available via SASS mixins:

@include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @include media-breakpoint-up(md) { ... } @include media-breakpoint-up(lg) { ... } @include media-breakpoint-up(xl) { ... }



Max and min widths /* Extra small devices (portrait phones, less than 576px) */ @media (max-width: 575px) { ... } /* Small devices (landscape phones, 576px and up) */ @media (min-width: 576px) and (max-width: 767px) { ... } /* Medium devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) { ... } /* Large devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) { ... } /* Extra large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { ... }

Bootstrap, so far, has been the most popular HTML, CSS and JS framework for creating responsive, mobile-first websites. With more than 100,000 stars and 45,000 forks, Bootstrap is the second most-starred project on GitHub . Bootstrap (currently v3.3.7) is available to download and use. Mark Otto and Jacob Thornton, the authors of Bootstrap, have announced that Bootstrap 4 is under development and as of now, Bootstrap 4 alpha 6 has been deployed (January 6, 2017).Bootstrap 4 has come up with a few notable changes from Bootstrap 3 version. If you are thinking of migrating from Bootstrap 3 to Bootstrap 4, keep the following changes in consideration: