Posted in Frontend

A first glance at Bootstrap 4

As regular commitments slowly grinds to a halt before the holidays, I found a few hours to fork the new-ish alpha release of bootstrap 4. Overall, this overhaul of the immensely popular framework is a bit of a disappointment. The good news is, there is still time to fix it.

First of all, some nice new features. The grid can be made “flexible”, meaning all columns gets equalized heights, and vertically alignable content. This feature also fills the gap of self breaking rows. You can declare an arbitrary amount of columns in a single row, and no matter the distribution, the columns will clear a new row cleanly (because of the equal height). No need to clear nth-child(x) or dynamically inject rows. The flex-grid looks like a nice and clean implementation, better than a few of the modifications I have hacked together myself over the years. The flex setting is global, and since the columns do not flex in width, you need to declare xs-12 to get the expected full-width in small viewports.

There’s also been an adoption of “-up” and “-down” modifiers on utilities, eg. “visible-lg-down”, which will probably make for some cleaner classnames.

A new breakpoint – “xl” – is included. By default, this is set to 1200px, which seems a bit low to target “wide desktops”. I would probably set it closer to 2000px.

Modals are still positioned fixed, which makes them unsuitable for form-elements due to crappy rendering in mobile safari. But why are you putting forms in modals anyway? Stop it!

And now, for some real disappointments. The description proudly boasts that bootstrap is dropping pixels in favour of rem “where appropriate”. However, out of the box it still sets the font size on the html-element to a fixed pixel size, and declares all breakpoints and container max-widths in pixels, effectively disabling font-size modifications on the client, and persisting a bad pattern of pixel-precision over fluidness. Because the root font size is explicitly set to 16px, using rems forwards means little less than dividing your values by 16 and changing units. I guess it looks slightly more modern in the inspector.


// Pixel value used to responsively scale all typography. Applied to the '<html />' element.
$font-size-root:             16px !default;

$font-size-base:             1rem !default;
$font-size-lg:               1.25rem !default;

The font-size hack is easily reversible, by making the font-size-root: 100%. But the breakpoints have a hard-coded “-1px” in “_breakpoints.scss” that needs to be converted to rem in order to make the framework zoom-safe and responsive.


/*_variables.scss*/
$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
) !default; /* copy to own custom variables file, divide by 16 and change units to rem. remove !default. Also change the values for max container widths*/

/*_breakpoints.scss*/
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
  $next: breakpoint-next($name, $breakpoints);
  @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); /*change to "-0.001rem" or your preferred level of precision.*/
}

Leave a Reply