To skip the Bootstrap introduction, click here.

What is Bootstrap?

Bootstrap has been a widely-used front-end component library for years. Previously, it was known as Twitter Blueprint. Besides that, it is also known for its modular component, responsive design, and mobile first approach. It's easy-to-use characteristic and its modern appearance have earned itself a lot of users. At the same time, it's even the second most starred repository in GitHub. For these reasons, Bootstrap is almost fundamental for front-end developers.


Getting Better And Better

Since it's an open source and free project, there are lots of contributors striving to make it better. For this reason, Bootstrap has been improving continuously to fit the needs of community throughout the years.

As a result, the first alpha version of Bootstrap 4 was released on August 19, 2015, while the beta version was released on 10 August 2017. Presently, Bootstrap 4 has made quite some breaking changes along with its release.

Testing the codes

Sooner or later, you might want to test out some of the codes in the article. Don't you worry, there is a free tool available online that you can use to ease your works - Bootstrap 4 Editorcreated by IT Wonders Web. All you need to do is just copy the codes in this article to the editor then you can have the result instantly. Furthermore, you can even add some other custom styles to suit your needs.

New Changes

1. No more Glyphicons!?

Yes, you heard it right. After all, there isn't any font folder in BOOTSTRAP 4 directories. If you want it, go get it yourself. Pretty good parenting from Bootstrap 4, eh?

Probably many of you would have questions towards this removal of Glyphicons, but it has its reason. First, some people never use them. Secondly, some people use other variations of fonts. Since the fonts are in the Bootstrap 3 by default, it makes the file size bigger. Besides this, THERE are still many reasons.

Presently, here are some options of the icons you can consider if you want to use icons:

  1. Glyphicons
  2. Octicons
  3. Font Awesome
  4. Iconic
  5. Entypo

2. Support or not?

Bootstrap 4 now only supports browser IE10+ and IOS 7+. For sites needing either of those, use v3. Besides that, they added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.

More importantly, the team has dropped support for Bower since Beta 2 as they've already deprecated the package manager. Alternatively, you can consider Yarn or NPM. See here for details.

Units 3.

First, global font-size has been increased to 16px from 14px. Secondly, to take advantage of newer CSS support, pixels have been swapped for rems and ems to make responsive typography and component sizing even easier. The em and rem units are practical in creating a perfectly scalable layout. (eg: Viewport = the browser window size. If the viewport is 50cm wide, 1vw = 0.5cm)

em = Relative to the font-size of the element (2em means 2 times the size of the current font) rem = Relative to font-size of the root

Even though the primary CSS unit is now using rem, pixels are still used for media queries and grid behavior as device viewports are not affected by type size.

4. Sass or Less?

Bootstrap 4 has switched from Less to Sass for their source CSS files. Consequently, it compiles faster thanks to Libsass. This also means that there is no more dedicated theme stylesheet like what they did back when using Less. Instead, you can enable the built-in theme to add gradients, shadows, and others. For instance, changing the variables $enable-gradients: true.

// Options
// Quickly modify global styling by enabling or disabling optional features.

$enable-caret:              true !default;
$enable-rounded:            true !default;
$enable-shadows:            false !default;
$enable-gradients:          false !default;
$enable-transitions:        true !default;
$enable-hover-media-query:  false !default;
$enable-grid-classes:       true !default;
$enable-print-styles:       true !default;

At the same time, try to avoid modifying Bootstrap's core files for the best practice. For example, below is the preferable way to change your configuration. (By creating a custom SCSS)

├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

5. Finally, a card!

As one of the most common components of the internet, card is finally available in Bootstrap 4. Basically, it is a flexible and extensible content container, with powerful display options. Wells, thumbnails, and panels have been replaced by the cards, since the cards can do whatever they did in a better way.

Card Example Card Example

<div class="card">
  <div class="card-header">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>

Once again, you can copy it into the Bootstrap 4 Editor to try it out.

6. Are you flexible?

In brief, this means a move away from floats and more across the components.

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. --Bootstrap Documentation

Bootstrap 4's release is largely tied with the flexbox. It is powerful as it can easily make design flexible responsive layout structure without having to use floats or positioning. It was designed as a one-dimensional model instead of two-dimensional like Grid. It offers space distribution between items in an interface and powerful alignment capabilities.

<div class="d-flex justify-content-center mt-3">
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>
    <div class="p-2">Flex item</div>

        border:1px teal solid;
Flex Example

Also, Bootstrap 4 has rewritten these components with flexbox:

  • button groups
  • list groups
  • modal
  • navs
  • navbar
  • pagination
  • card

7. Grid has a new family member

Let's welcome our new member xl. Bootstrap 4 now has xs, sm, md, lg, and xl. Therefore, every tier has been bumped up one level. (eg: .col-md-6 in v3 is now .col-lg-6 in v4)

Grid system has also been moved to flexbox. Besides that, due to the new member xl joining the family, xs grid classes do not required the infix to more appropriately represent that they start applying styles at min-width: 0. (eg: instead of .col-xs-6, use .col-6)

// 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) { ... }

8. Did you reboot?

Still remember that every time you called the customer service, and they asked you "Did you try to reboot your device?" Well, rebooting can indeed solve a lot of issues, and here's how Bootstrap do it.

What Bootstrap's Reboot do is to normalize HTML elements, manually forked from Normalize.css to remove styles targeting irrelevant browsers while applying new styles. Selectors appearing in this file(_reboot.scss) only use elements—there are no classes here. This way Reboot can isolate Bootstrap's reset styles from their component styles for a more modular approach.

For example, they reboot some table styles for a simpler baseline and later provide .table, .table-bordered, and more.

// Tables

table {
  border-collapse: collapse; // Prevent double borders

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
  caption-side: bottom;

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;

9. Class name changes

There are lots of class name has been changed. Bootstrap 4 has removed some of them, while renaming many of them. I've compiled them from the documentation.

Have a look for yourself, if you're interested.

Click MeBootstrap 4 Changes Blog Tables

Bootstrap v5

What!? You're just starting out to try Bootstrap 4? There's already a Bootstrap v5!

Fake Bootstrap GitHub

Well.. Just kidding.

Real Bootstrap GitHub Original

The end

That's all for this article. Did you try our Bootstrap 4 Editor? Have you learned the changes of Bootstrap 4? These are the changes that I think is important. If you want more detail about it, feel free to dig into the official documentation. Also, if you have any questions, feel free to leave the comment below. It's my first time writing blog. Any suggestions are welcome!

Posted in web design on Jan 19, 2018

Leave a comment or suggestion below

0 Comment

Leave a Comment

Your Email address will not be published. Required fields are marked *

About IT Wonders:

IT Wonders is a web agency based in Johor Bahru (JB), Malaysia and Singapore. We provide responsive and custom websites unique to your needs. If you have any inquiries about your website, do not hesitate to contact us.