Bootstrap 4 Beta: Where are all my favourite classes gone?




The experienced front-end developer has certainly noticed that in the latest release of Bootstrap 4 Beta some things have been drastically changed. I also wondered a bit when I noticed how many classes and variables were changed.

We have already been using Bootstrap 4 for some small Landing Pages since it worked quite well. Luckily, however, we have not built any more complex themes or extensions based on them. This would mean a lot of work. Anyone who compiles bootstrap in their own pipeline, may not be pleased about the recent changes. Some variables have been simply removed or renamed, so that many SASS files may need to be customized.

The $brand-primary variable no longer exists

For example, the variable $brand-primary, which has always been the main color of the theme, has been packed into an array and can now be called as follows:

/* OLD method */
.some-element{
    color: $brand-primary;
}

/* NEW method */
.some-element{
    color: theme-color("primary");
}

The push- and pull-classes have been replaced with float and order

For example, if I want to display the left sidebar of a blog in the mobile view after the actual content, I have always used the push and pull classes to change the column order. After I noticed that these are no longer working in the new Bootstrap 4 beta, I found this helpful hint.

The sorting of the columns now works with flex rather than with float, which is one of the most important innovations of the Bootstrap 4 beta.

Here’s an example

/* OLD method */
.page-template-page-sidebar-left{
    #content{
        @extend .container;
        .main{
            @extend .col-sm-8;
            @extend .push-sm-4;
        }
        .sidebar{
            @extend .col-sm-4;
            @extend .pull-sm-8;
        }
    }
}

/* NEW method */
.page-template-page-sidebar-left{
    #content{
        @extend .container;
        .main{
            @extend .col-sm-8;
            @extend .order-1;
            @extend .order-sm-2;
        }
        .sidebar{
            @extend .col-sm-4;
            @extend .order-2;
            @extend .order-sm-1;
        }
    }
}

And with ordinary HTML Code of Bootstrap 4 Beta

/* OLD method */
<div class="row">
    <div class="col-sm-8 push-sm-4">Main</div>
    <div class="col-sm-4 pull-sm-8">Sidebar</div>
</div>

/* NEW method */
<div class="row">
    <div class="col-sm-8 order-sm-2">Main</div>
    <div class="col-sm-4 order-sm-1">Sidebar</div>
</div>

Tooltips and PopOvers: Tether has been replaced by Popper

Do you remember the message “Bootstrap Tooltips need Tether.js”? Well, it looks as if popper.min.js is now the new base for tooltips in Booststrap 4 Beta. We have not tried it yet, but the developers recommend the integration of the scripts on the start page of Bootstrap 4 Beta.

Will they change everything again?

Well, that’s what the developers of Bootstrap 4 Beta say:

„We’re not perfect, but we’ll be doing our best to keep all the classes, features, and docs URLs as they appear now in this release. We can always add more things, but we cannot take away.“

If you can believe that, Bootstrap 4 Beta is now ready for deployment in projects. Happy Bootstrapping!

What major changes did you notice?

Is there something you can not find, either in the code, or in the documentation? Then do not hesitate, leave a note here in the comment area!

Write a comment!

Comment
PHP email validation code snippet copy paste and use | am 29. October 2017 um 21:23

[…] and stable validation of email addresses with PHP. Simply copy the functions to your own project classes and go. The PHP function uses the Validate Filters of PHP. In combination with PHP 7, this is also […]