Bootstrap 4 Features You Should Know

Bootstrap has been one of the most trusted front-end frameworks of all times. It has a loyal audience who has been sticking around from the very robust "mobile-first" release of all times. Now Bootstrap 4 has been introduced. It's fairly understandable syntax makes it highly approachable.

Features of Bootstrap  v4.0

1) Navigation Bar :    

The navigation bar is mainly used to extend or collapse the Navbar, depending on the screen size. Navbar is wrapper that positions branding, navigation, and other elements in a concise header. It's easily extensible and collapse plugin can easily integrate responsive behaviors. Navbar require a class .navbar with .navbar-toggleable-* for responsive collapsing and color scheme classes such as bg-faded, bg-primary.

  <nav class="navbar navbar-expand-sm bg-faded">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
  </ul>
</nav>

2) Reboot :  

Bootstrap 3 had used Normalize.css in order to render all HTML elements their consistent appearance.Bootstrap 4 opted an enhanced version of Normalize.css i.e., Reboot.

3) Grid System :

Grid System enables you to create advanced layouts using rows and columns. The Bootstrap Grid System can have up to 12 columns, and you can specify how these columns scale for different viewport sizes. In Bootstrap 4 Grid system we have 5 classes as earlier it was 4 classes in Bootstrap 3. Now In Bootstrap 4 .col-xl-* is added for extra large screen size i.e., >=1200px.

<div class="container">
  <div class="row">
    <div class="col-sm">
          first column
    </div>
    <div class="col-sm">
      second column
    </div>
    <div class="col-sm">
      third column
    </div>
  </div>
</div>

4) Flexbox :

In Bootstrap 3, we usually used floats to align the columns or elements or to build multi-columns. Then on mobile, you would just remove the float and width property so that it would change to be one column and more with a full suite of responsive flexbox utilities. Flexible box is the other name of Flexbox

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>    
</div>
<div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>    
</div>

5) Pagination :

In Bootstrap 3, a pagination component was created by applying the pagination class to any ul element. Now, In Bootstrap 4 demands that element should properly indicate pagination with .page-link and .page-item class.

6) Plugins : 

In Bootstrap 3, Plugins were divided into two categories, namely a file including style rules and Javascript file. In Bootstrap 4 the style rules are composed using SASS whereas, plugins are available under global Jquery object.