What's new and different in Bootstrap 4?

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:

Since Bootstrap 4 has been released under beta version, it may be subjected to change. Therefore, the following list can be changed.

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) { ... }

Also available via SASS mixins:

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

11. Flexbox

Component	Bootstrap 3	Bootstrap 4
flexbox support	flexbox is not enabled	Bootstrap 4 is now flexbox by default. It has included flexbox grid system which will keep the floats away. <div class="d-flex flex-row"> <div class="p-2">Item 1</div> <div class="p-2">Item 2</div> <div class="p-2">Item 3</div> </div>

12. Utilities

Component	Bootstrap 3	Bootstrap 4
Quick floats	.pull-left, .pull-right	.float-{xs,sm,md,lg,xl}-{left,right,none} and removed .pull-left and .pull-right since they are redundant to .float-xs-left and .float-xs-right
Text alignment	.text-{left,center,right}	.text-{xs,sm,md,lg,xl}-{left,center,right}
Center content blocks	.center-block	.mx-auto

13. Responsive utilities

Component	Bootstrap 3	Bootstrap 4
Show/hide content	.show, .hidden .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document	the .hidden and .show classes have been removed because they conflicted with jQuery’s $(...).hide() and $(...).show() methods. Toggling the [hidden] attribute, using inline styles like style="display: none;" and style="display: block;", or toggling the .invisible class can show or hide the content
Toggling content across viewport breakpoints	.hidden-{xs,sm,md,lg,xl} .visible-{xs,sm,md,lg,xl}-block .visible-{xs,sm,md,lg,xl}-inline	.hidden-{xs,sm,md,lg}-up and .hidden-{xs,sm,md,lg}-down .hidden-*-up classes hide the element when the viewport is at the given breakpoint or larger e.g. .hidden-sm-up hides an element on small, medium, large and extra-large devices .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. e.g. .hidden-sm-down hides an element on small, extra-small devices In order to achieve the results for .visible-*, we can make an element visible at that screen size by not hiding it and using combined classes .hidden-*-up and .hidden-*-down. e.g. .hidden-md-down .hidden-xl-up will automatically make the element show up on large devices

14. Labels and badges

Component	Bootstrap 3	Bootstrap 4
Label	.label	.tag Labels in Bootstrap are used to provide additional information about something and they are different than <label> element This is the primary reason for .label to be renamed as .tag in Bootstrap 4 to disambiguate it from <label>
Badge	.badge	encourages to use .tag-pill and .tag together to achieve the rounded look

15. Non-responsive layout

Component	Bootstrap 3	Bootstrap 4
Non-responsiveness	Supported. The responsiveness of Bootstrap can be disabled by fixing the width of the container and using the first grid system tier	Not supported

16. Glyphicons

Component	Bootstrap 3	Bootstrap 4
Glyphicons	Supported	Not supported. Instead, the upstream version of Glyphicons, Octicons or Font Awesome can be used

17. Panels,Thumbnails and Wells

Component	Bootstrap 3	Bootstrap 4
panels	.panel	Not supported, replaced by .card
thumbnails	.thumbnail	Not supported, replaced by .card
wells	.well	Not supported, replaced by .card

18. Navigation bars

Component	Bootstrap 3	Bootstrap 4
navbar default	.navbar-default <nav class="navbar navbar-default"> </nav>	.navbar-light <nav class="navbar navbar-light"> </nav>
navbar with flexbox	not enabled	navbar has been entirely written in flexbox and can use flexbox utilities
navbar toggle	.navbar-toggle	.navbar-toggler
navbar forms	.navbar-form <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>	Use .form-inline instead <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form>
nav base	requires .nav base class <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> </ul>	.nav base class is not required. <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> </ul>