HTML & CSS
Article

Bootstrap 4 Alpha: Super Smart Features to Win You Over

By Maria Antonietta Perna

After months of anticipation, anxious tweets asking for the disclosure of a release date, and a few scattered scraps of news by Mark Otto and Jacob Thornton, having the effect of intensifying rather than quenching our curiosity, Bootstrap 4 alpha is out.

As a designer, I love crafting my own CSS. However, I confess, I find Bootstrap such a well thought-out and strongly supported front-end framework that I’ve immensely enjoyed using it, both to build my projects and to learn more about writing better, modular CSS.

After the much awaited news, as you can probably guess, I downloaded the source files for Bootstrap 4 and spent some time going back and forth between reading the docs and digging into the code to find out more.

I expect the alpha release of Bootstrap 4 will undergo a number of changes in the coming weeks, even months. The curious among you, can keep an eye on the issues section of the project’s GitHub repository. However, the features I’m going to list here are more like broad coding principles and practices that keep improving on each new release of the framework. That’s why I think it’s likely they’re here to stay. If anything, they can only get better.

Here they are. I hope you find them awesome too!

New Interactive Documentation

The Bootstrap documentation has been exemplary since the framework’s early days. It’s always had the crucial role of being a living document, that is, a tool in sync with the collaborative effort of building the framework and communicating it to others:

Abstracting and documenting components became part of our process for building this one tool and Bootstrap in tandem.
Mark Otto in 2012

Mark himself is quite a fan of great documentation. His Code Guide by @mdo is evidence of his approach to high quality documentation as being part and parcel of outstandingly coded projects.

The documentation for version 4 has been rewritten from scratch using Markdown. Understandably, given the alpha stage of this version at the time of writing, it’s still a work in progress.

The Bootstrap docs …

  • are a pleasure to navigate, both using the traditional sidebar navigation and the brand new search form.
  • structure information in a logical manner; content is never overwhelming or confusing.
  • include instructions and how-tos covering all areas of the framework, from different ways of installing Bootstrap to using each component and dealing with browser quirks.

If you take the time, you’ll soon find a few valuable nuggets scattered throughout various sections of the docs. For instance, dealing with over-sized SVG images that use the .img-responsive class in IE9-10, accessibility best practices, enabling the mq4-hover-shim to fix sticky :hover styles on mobile devices, and much more.

Finally, if you’d like to run the Bootstrap docs locally on your computer, install Jekyll, a great website building tool, and follow these instructions.

Top-notch Modular Architecture

Bootstrap has often been the target of complaints about code bloat, too opinionated CSS styling, and a profuse quantity of components. The good news is: Bootstrap 4 has both simplified and further modularized its structure.

To begin with, some components have been eliminated altogether: the Glyphicons icon library is not bundled with the framework any more; panels, wells, and thumbnails are replaced by the Cards component. Also, all CSS reset/normalize code and basic styling are now dealt with in a single brand new module called Reboot.

Further, more than ever before, using Bootstrap now feels like assembling and arranging Lego blocks in different ways. Here are some examples to clarify what I mean.

Opt-in Modules

You can quickly control the application of complex CSS features by toggling the value of a Boolean SCSS variable. Grab your copy of the Bootstrap 4 alpha release source files, open _variables.scss in a code editor, and find the following snippet (at about line 46):

$enable-flex:               false !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        false !default;

Toggling the value of one of the above variables from true to false or vice versa, and compiling the code, will enable or disable the corresponding CSS property in your project.

Let’s have a go at turning a traditional Bootstrap grid into a cool Flexbox-powered grid.

Here’s the HTML for a regular Bootstrap three-column grid:

<section class="container">
  <div class="row">

    <article class="col-md-4 col-sm-6">
      <header>
        <h1>Col 1</h1>
      </header>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </article>

    <article class="col-md-4 col-sm-6">

      <!-- Same code as above -->

    </article>

    <article class="col-md-4 col-sm-6">

      <!-- Same code as above -->

    </article>

  </div><!-- .row -->
</section><!-- .container -->

This is what it looks like in the browser:

Display of Bootstrap regular three-column grid

Look into the source code using the developer tools of your browser of choice. The CSS rules corresponding to the .row class should look like the image below:

CSS code of grid .row class

Next, set the $enable-flex variable to true, compile and refresh the browser. Although the browser display is the same as before, the CSS is different. The .row class turns its element into a flex container with the flex-wrap property set to wrap. This ensures that child elements exceeding the container’s width wrap to the next row.

Bootstrap flex element

Ready-made Light-weight Versions

Besides bootstrap.scss, which includes the entire framework, you’ll also find the following files: bootstrap-flex.scss, bootstrap-grid.scss, and bootstrap-reboot.scss.

Each of these files includes only selected portions of Bootstrap. If you don’t need the full-blown framework in your project, this is a great head-start: just compile one of the light-weight options and you’re good to go.

Corresponding cut-down compiled packages will be made available for download from the Bootstrap 4 docs page.

Reusable Components

You can skin and modify components by mixing and matching a few classes. For instance, the brand new Cards component is a great example of this versatility in action.

Here’s all the HTML you need for the simplest instance of this component:

<div class="card">
  <div class="card-block">
    <p class="card-text">Just some text.</p>
  </div>
</div>

Below is how the code looks in the browser in a three-column layout:

Basic Cards component

This flexible component easily adapts to a variety of content types. Here’s an instance that includes an image, text, links, and a list:

<div class="card">
  <img class="card-img-top" src="http://lorempixel.com/290/200/abstract/8" alt="">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">
      The Cards component nicely fits an image on top, 
      some text, a list, and a couple of links.
    </p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link<</a>
  </div>
</div>

And below is the result in the browser in a three-column layout:

More complex Cards component

You can also arrange cards in touching equal width and height columns by wrapping them in a .card-group container:

<div class="card-group">
  <div class="card">
    <!-- card code here -->
  </div>
  <div class="card">
    <!-- card code here -->
  </div>
  <div class="card">
    <!-- card code here -->
  </div>
</div>

Cards Group Component

Alternatively, you can group Cards having equal width and height columns with margins, using .card-deck-wrapper and .card-deck as follows:

<div class="card-deck-wrapper">
  <div class="card-deck">
    <div class="card">
      <!-- card code here -->
    </div>
    <div class="card">
      <!-- card code here -->
    </div>
    <div class="card">
      <!-- card code here -->
    </div>
  </div>
</div>

Cards Deck Component

Another cool thing you can do with Cards is build a Masonry-like layout. Just wrap the cards in a container with the .card-columns class and leave the rest to Bootstrap.

<div class="card-columns">
  <div class="card">
    <!-- card code here -->
  </div>
</div>

Cards Masonry Layout

To dive into the details of the Masonry-like Cards layout, as well as exploring further what you can do with Cards, check out the Cards docs.

Here I’ve offered only a few examples of Bootstrap’s modular architecture. I think these suffice to show how flexibility and extensibility are built into the framework as a whole, which makes it fun and convenient to use.

Easier Scaling Across Screen Sizes

Since version 3, Bootstrap has introduced a mobile-first approach to web design, i.e., start developing for smaller screens first and progressively add or adjust features as you target larger screens.

Version 4 makes further improvements towards adaptive web design by taking the following steps.

The Move to rem

Bootstrap 4 replaces most instances where the absolute unit of measurement in px was applied in the earlier version with relative rem and, for media queries, em units. The goal is to have all elements on a web page harmoniously scale with the screen size.

Let’s have a look at how Bootstrap sets the global font-size. Start by opening _reboot.scss in a code editor and find the following snippet (about line 60):

html {
  // Sets a specific default `font-size` for user with `rem` type scales.
  font-size: $font-size-root;
  /* etc... */
}

body {
  // Make the `body` use the `font-size-root`
  font-size: $font-size-base;
  /* etc... */
}

If you dig into _variables.scss, you’ll see that $font-size-root is set to 16px and $font-size-base is set to 1rem. This means that dividing any measurement in px by 16, you’ll come up with the corresponding rem measurement, e.g., to get the corresponding rem measurement for 40px, perform this operation: 40 / 16 = 2.5.

Most importantly, this means it’s easier to build web pages where all elements proportionally scale up or down with the screen size without messing up your beautiful design.

Here Comes the Extra-large Breakpoint

The introduction of the new extra large breakpoint for the grid system further helps building layouts that scale well across different screen sizes.

This breakpoint is applied using the .col-xl- class and is triggered on screen sizes from 75em upwards.

Global Margins Reset and Utility Spacer Classes

Forcing consistent spacing between elements in a design is something most front-end developers, including myself, obsess over. It’s a demanding task and the plethora of screen resolutions available doesn’t make the job easier.

To help us keep both vertical and horizontal spacing between elements under tight control, Bootstrap 4 resets margin-top to 0 while keeping a consistent margin-bottom value on all elements.

Further, the framework offers an impressive number of utility classes to make it easier for us to adjust margins and padding at a more granular level across varying screen sizes.

Conclusion

At the dawn of the Bootstrap 4 alpha release, I’ve introduced three broad features that in my view make this front-end framework really stand out:

  • Great documentation
  • Mega Lego type architecture
  • Easier scaling across devices

Did you notice I didn’t mention Bootstrap’s move from Less to Sass? Or the rewrite of all JavaScript plugins in ECMAScript 6?

I consider these to be more like indications of Bootstrap staying current and taking advantage of the latest tools, rather than features integral to the framework itself. But perhaps you disagree with me.

Have you looked at Bootstrap 4? What are your favorite features? Let us know in the comments!

  • tkapler

    i was suprised with e.g. (for sm / xs)

    @media (min-width: 34em) { … }

    @media (max-width: 33.9em) { … }

    i wonder, what would happen for any width between 33.9 to 34 em (the same for other breakpoints). Or this cannot happen?

    • Dylan

      xs for smart watches and small ass phones?

  • http://careersreport.com velvet.cain@aol.com

    I will show excellent internet job opportunity… three-five hrs of work /a day… Payment at the end of each week… Bonuses…Payment of 6-9 thousand dollars /a month… Merely several hrs of spare time, desktop or laptop, most basic knowing of web and$ dependable internet connection is what is needed…Get more information by visiting my page

  • http://careersreport.com Venus Crews

    I will show excellent internet job opportunity… three-five hrs of work /a day… Payment at the end of each week… Bonuses…Payment of 6-9 thousand dollars /a month… Merely several hrs of spare time, desktop or laptop, most basic knowing of web and! dependable internet connection is what is needed…Get more information by visiting my page

  • Lee Marsden

    Bootstrap should be used for prototyping and nothing more, I am seeing bootstrap being used more and more to build professional sites as people believe it offers a lot and will greatly speed up development time. If you are building a custom, professional site, bootstrap is not a good solution, sure take grids, utilities as these are abstractions and don’t give you styles that you will just overwrite. Just take the extra initial time to create a good structure and base which will pay off in the end.

    • Dylan

      Bootstrap an other HTML/CSS/JS frameworks are great for applications with heavy complex functionality because it provides great, user-intuitive elements and makes integration super easy. With sass you can easily customize it without reinventing the wheel and wasting a bunch of time, its named appropriately your a “bootstrapping” your front end. You can of course go completely custom and it will look great, but can potentially take much longer to accomplish if you didn’t just customize and strip a framework. I am excited for BS4, it will definitely receive a much needed revamp and be able to compete with other more appealing frameworks like Foundation or Semantic-UI.

  • Keith Penderis

    starting just be a lot like semantic-ui , the card component the most similar but semantic is still much stronger than bootstrap, and not as slow as foundation.

    • Dylan

      Semantic is pretty buggy tho, and a lot more difficult to integrate with other frameworks like AngularJS or Meteor. I love the styling and decided to dive in and go for it on my last major project, I ended up switching to bootstrap when it was almost completed because of performance issues and bugs I could not get around, set me back like 2-3 weeks. Looks great but no quite ready for large production projects yet.

  • http://careersreport.com Rachel Delacruz

    Follow success of many^ who are making profit monthly by doing an online job… Learn more on my~profile

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.