Let’s Talk Bootstrap 4

A detailed guide to upgrading from BS3 to BS4

The following is a wrap-up of the biggest changes and what you might need to know when transitioning your project from BS3 to BS4, and of some things I learned while upgrading the Scrivito Example App. For a quick overview of how we implemented these changes check out our "The Scrivito Example App now Uses Bootstrap 4" article. Breakpoint changes In the new release, they have added a new smaller breakpoint. Providing better support for small screens, confusingly, they did not just add a smaller class or breakpoint name, they added a new XL tier. So the existing viewport ranges go one size down. The effect is that now you can easily differentiate between portrait and landscape mode on mobile screen widths. Bootstrap 3 Bootstrap 4 XS The old BS3 viewport variables such as $screen-sm-min are gone. Instead, you now have to use SASS style mix-ins like @include media-breakpoint-up(md) { ... } for the same use case. If you have used some of the old viewport variables in your project you will have to decide whether to revive these in BS4 (what I did) or use the new BS4 SASS mix-ins. The new grid The Bootstrap 3 grid and all former versions were about floating DIVs – not that easy to learn, but once understood, you were able to rapidly prototype whatever you needed in HTML. The old 12 column grid was customizable using LESS or, later, SASS variables, so you were able to arrange your content easily. But sometimes a blessing is a curse, and we had our first contact with the bad parts of BS3. Solution for an odd number of columns By default, in BS3, you cannot create a layout grid with an odd number of columns of equal width. Sure, you could add some custom layout CSS, but then you have to be sure to take care of the responsive adaptions completely on your own. Bootstrap 4 calls it auto-layout grid. Because the new grid is built by Flexbox, you can use column widths independently of units. It feels like a good table without the headache of non-mobile support. See the Codepen example below, and be sure to adjust the results window size to see how it automatically adjusts. See the Pen Bootstrap 4 - Solution for odd number of columns by A.G. (@agessler) on CodePen. Vertical alignment and equal heights But this is not the main advantage for me – I think what all web designers are looking for is an easy and non-JavaScript-dependent solution for “Equal-height Columns” and “Vertical Centering”. Next to the often-wished-for vertically centered elements, BS4 offers an easy way to have those equal-height boxes. BS4 includes predefined markup for “Equal-height Columns” and “Vertical Centering” use cases. In BS4, “cards” (formerly called “panels”) are in a special group so they become all the same height. This is an option, but if you want to use this in combination with the grid classes, Bootstrap goes a different way. Included in their newest release is a bunch of helper classes. Scroll through the Codepen example below to see them in action. See the Pen Bootstrap 4 - equal height boxes variants by A.G. (@agessler) on CodePen. Reordering columns In BS3, to make columns reorder on mobile, you had to change the whole markup wrapper using special classes like col-push and col-pull. Those days are over! To reorder columns in BS4 we can now use the extended functionality of Flexbox. Here you can set an individual order for each element. BS4 comes with handy responsive ordering classes such as order-md-2. So now you can reorder a row in every viewport range. Scroll through the Codepen below for more information: See the Pen Bootstrap 4 - reorder columns - globally and locally by A.G. (@agessler) on CodePen. Navbar changes The biggest change in BS4 is the switch from display: block to display: flex. With this change, you cannot use floats like float: leftorright for alignment features anymore. Unfortunately, the old navbar-right helper class for positioning navigations to the right is gone as well. Now, with Flexbox, you use different types of margin settings by applying generic helper classes for margins; navbar-right becomes ml-auto. From my point of view, it is not that intuitive for developers, but you will quickly get the hang of it with a deeper knowledge of Flexbox. This is just something you will have to learn and, once you do, it works really well. Next to some changes under the hood, there are some new pre-built features we previously always had to implement by ourselves. For example, with BS4, you can easily use helper classes for adapting the breakpoint when the navigation turns into a hamburger menu. CSS classcollapse widths navbar-expand-smcollapse on xs widths <576px navbar-expand-mdcollapse on sm widths <768px navbar-expand-lgcollapse on sm widths <992px navbar-expand-xlcollapse on lg widths <1200px navbar-expandexpanded on all widths One more change to note is the old <button> element you see when the navbar is collapsed. It comes with one or more <span class="icon-bar"></span> elements. The old style is more easily adaptable when you want to animate the hamburger menu. However, In the new version, there is just one element with a static icon inside making is cleaner. Check https://codepen.io/KPCodes/pen/Ypwrdx for inspiration. Flexbox is your friend, mostly All or most of these cool new features are based on the implementation of Flexbox in Bootstrap 4. If you are working on static HTML files, you can live with all the circumstances. But when you're working with React, most times you have, by default, an unstyled <div> around your design element. With BS3 (based on floating <div> elements), you don't have any issues with one more <div> around your markup. BS4, however, uses the same markup but it is based on Flexbox. If you wrap <div class="col"></div> in an unchanged <div>, your design is broken. Initially, a <div> is display: block – in a Flexbox environment you have to keep an eye on the fact that sometimes a wrapper <div> has to be display: flex. In this case you just have to add a row or d-flex class to your wrapper element – the solution is simple, but not easy to debug when you see it the first time. Final thoughts If you’re left wondering if Bootstrap 4 is good for your project, try to look at the whole thing from a distance. Every new release with breaking changes of a framework people have grown to love is a kind of change nobody ever wants. However, the main advantage of using BS4 is the built-in Flexbox support. You can simply do more with less code. As well, after a bit of a learning curve, you are able to prototype websites faster than ever before. I personally think that some class changes and the official documentation could be more intuitive. But in the end, there are always growing pains with improved tools. After all the critical words about the new release, Bootstrap is still my first choice. Not because of the framework itself – there are other ones I also like, Foundation, Bulma or Milligram, for example. For me, the biggest point is not which is the best framework, but which has the most extensive community support. With BS4 you get this community support as well as lots of resources like Bootsnipp where you can lean back and learn from others. In all, progress is progress, and with a great community, the addition of Flexbox and faster prototyping, I can recommend changing to Bootstrap 4. A small collection of class name changes from BS3 to BS4 Some class changes are cool, some are ok, and some are annoying. The new corresponding classes for hiding elements like hidden-* and visible-* we often used before are now confusing and much too long. Maybe the old ones will come back in a future release of Bootstrap. Bootstrap 3Bootstrap 4 .col-*-offset-*.offset-* .col-*-push-*.order-*-2 .col-*-pull-*.order-*-1 .panel.card .panel-heading.card-header .panel-title.card-title .panel-body.card-body .panel-footer.card-footer .panel-primary.card.bg-primary.text-white .panel-success.card.bg-success.text-white .panel-info.card.text-white.bg-info .panel-warning.card.bg-warning .panel-danger.card.bg-danger.text-white .well.card.card-body .thumbnail.card.card-body .list-inline > li.list-inline-item .dropdown-menu > li.dropdown-item .nav navbar > li.nav-item .nav navbar > li > a.nav-link .navbar-right.ml-auto .navbar-btn.nav-item .navbar-fixed-top.fixed-top .nav-stacked.flex-column .btn-default.btn-secondary .img-responsive.img-fluid Bootstrap 3Bootstrap 4 .img-circle.rounded-circle .img-rounded.rounded .form-horizontal(removed) .radio.form-check .checkbox.form-check .input-lg.form-control-lg .input-sm.form-control-sm .control-label.form-control-label .table-condensed.table-sm .pagination > li.page-item .pagination > li > a.page-link .item.carousel-item .text-help.form-control-feedback .pull-right.float-right .pull-left.float-left .center-block.mx-auto .hidden-xs.d-none.d-sm-block .hidden-sm.d-sm-none.d-md-block .hidden-md.d-md-none.d-lg-block .visible-xs.d-block.d-sm-none .visible-sm.d-block.d-md-none .visible-md.d-block.d-lg-none .visible-lg.d-block.d-xl-none .label.badge .badge.badge.badge-pill Little helpers http://upgrade-bootstrap.bootply.com/ Really helpful – converts BS3 markup to BS4 https://hackerthemes.com/bootstrap-cheatsheet/ Interactive Bootstrap 4 cheat sheet https://cssauthor.com/bootstrap-templates/ 50+ free Bootstrap 4 templates – if you need inspiration or some cool markup solutions

Start developing websites with Scrivito today! Sign-up takes less than 60 seconds. No credit card required.

More great blog posts from Alexander Geßler

  • Choosing a Color Theme in the Scrivito Example App

    As of recently, the Scrivito Example App comes with several color themes. If one of them is perfect for your website based on this app, you can simply use it as is. But you can also change the colors individually to give your site the look and feel you want it to have. Switching the color theme...

  • A Note on Twitter Bootstrap 3

    Twitter tells us in their release notes: Better box model by default. Everything in Bootstrap gets box-sizing: border-box, making for easier sizing options and an enhanced grid system. This sounds so cool. But in real life this could lead to problems with old-fashioned CSS apps. They did not...