Ads Top


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>

2 comments:

  1. You know what i like in Bootstrap 4. New Buttons. I understand lots of coding and classes has been changed in bootstrap 4. But it's amazing and you have described very well the changes. Thanks.

    ReplyDelete
  2. form-control-label doesn't work in bootstrap 4 now

    ReplyDelete

Powered by Blogger.