Twitter Bootstrap 4 alpha: what's new?

Bootstrap, a framework which every Front End Developer knows about. Now as @twbs team has announced the v4 alpha, there are many things that can be hoped

Twitter Bootstrap 4 alpha: what's new?
Bootstrap 4 Alpha

Bootstrap, a framework which every Front End Developer knows about. It has become a new requirement in various organizations for Front End Development positions. And why not; it has many things to offer both Developers and Organizations.

But now as @twbs team has announced the Twitter Bootstrap 4 alpha, there are many things that can be hoped about. And like previous upgrade from v2 to v3; where many things were simplified, same has been done.

The things that have been dropped are:

  • Panels
  • Thumbnails
  • Wells
  • Justified Navs

And the new things that have been added are:

Component Description
Cards New, more flexible component to replace v3’s panels, thumbnails, and wells.
New navbar Replaces the previous navbar with a new, simpler component.
New progress bars Replaces the old .progress <div> with a real `progress` element.
New table variants
New utility classes

Cards; The Show Stopper:

As the team has stated Cards as replacement for Panels, Wells and Thumbnails; and it proves itself as the replacement of these. And believe; its not just the replacement, its more than that. The current doc page http://v4-alpha.getbootstrap.com/components/card/ demonstrates it very well.

Buttons

Buttons are with an enhancement, buttons with outline. Using class .button-*-outline buttons can be outlined. * is the context here, i.e. success, info, warning, danger etc. Following snap shows an example of that:

Outlined Buttons

The new things in Utility classes are:

Margin Utility

Now there are some classes to remove margins from elements with the help of following classes:

Class Description
.margin-a-0 make all 4 sides margin to 0
.margin-t-0 make margin-top 0
.margin-r-0 make margin-right 0
.margin-b-0 make margin-bottom 0
.margin-l-0 make margin-left 0
.margin-x-0 make margin-left and margin-right 0
.margin-y-0 make margin-top and margin-bottom 0

Table Variants

The table variants have been added like:

  • .table-inverse: Invert the table colors, add this class to thead and only thead colors will be inverted.
  • Contextual Classes: Add contextual classes like table-success, table-danger etc on tr or td to create contextual content
  • .table-reflow: Changes the table’s horizontal stacking to vertical or vice versa.

Scale Units

Now every scaling unit is written in em and rem.

Grid

The grid has 12 columns and the breakpoints have been increased to 5. They are

Class Mid-fixScaleDescription
xs0Extra small screen / phone
sm34emSmall screen / phone
md48emMedium screen / tablet
lg62emLarge screen / desktop
xl75emExtra large screen / wide desktop
Extra small <34emSmall≥34emMedium≥48emLarge ≥62emExtra large≥75em
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)34rem45rem60rem72.25rem
Class prefix.col-xs-.col-sm-.col-md-.col-lg-.col-xl-
# of columns12
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Responsive Utilities

  • hidden-*-up: Hide any element with this class in * and above breakpoints. * is a Class mid-fix previous Grid Section
  • hidden-*-dow: Hide any element with this class in * and below breakpoints. * is a Class mid-fix previous Grid Section
  • No Visible/Show Class: Use hidden--up or hidden--down classes to fulfill this i.e. .hidden-sm-down.hidden-xl-up shows element on md and lg breakpoints

Following Illustration depicts these classes’ use very clearly:

Responsive Utilities with Breakpoints

Some print helper classes are also added:

ClassDescription
.visible-print-blockVisible on print as display: block)
.visible-print-inlineVisible on print as display: inline)
.visible-print-inline-blockVisible on print as display: inline-block)
.hidden-printVisible or browser but hidden on print

Following illustration shows this properly:

Responsive Utilities with Breakpoints

Image Helpers

  • .img-responsive: This will apply width: 100%; height: auto; on the image with this class
  • .center-block: This will center and display as block images with this class

This was an observation of ours on the current documentation of Bootstrap 4, which can be found here: http://v4-alpha.getbootstrap.com/. And it can also be downloaded from here.

Let us know about your views on this.