Datasoft Talk
May 16, 2018

Bootstrap 4

After giving Bootstrap 4 a try, I was very impressed with the new utility classes that version 4 offers. In particular, the spacing classes. I began using Bootstrap 4 in it’s alpha stages. Deciding between versions 3 and 4 can be a big decision, because converting versions after a project has been completed can be a major undertaking. Now that version 4 has been officially released, the decision seems like a no-brainer.

In addition to the utility spacing classes, the display class also brings a lot to the table. You no longer are bound to using css to convert elements to different display types. Using Bootstraps d-inline will convert the element to an inline element, d-block to a block level element, and so on. Without breakpoints, the classes are applied to all elements regardless of screen width, but you can add any breakpoints to these, like other utility classes, such as d-md-inline-block. There’s even a very handy d-none class, to replace previous ‘hidden’ classes in bootstrap 3.

One of the first things you’ll notice when converting a Bootstrap version 3 site to version 4, you’re text flow may seem horribly de-marginalized. If you are like me, you used col-xs- (extra small) column specifiers liberally. Bootstrap 4 removed this class column specification, and it’s now just called col-. This makes sense, since this specifier represents all page widths, but it really breaks sites which have used the explicit col-xs- class. Simply changing those occurrences will put everything back in order.

Bootstrap 4 offers many useful additions over version 3. In particular, it’s utility spacing classes. These generic classes allow you to fine tune the spacing of margins and padding, as well as other elements on your page. The simplicity of the classes makes using them very easy, that you’ll soon become a pro at spacing your page elements in no time. If you were using the alpha versions of Bootstrap 4, you may be used to spacing definitions such as m-r-2, for a right margin of 2 units. That template has been changed, or shortened, in the final release, so the example would now be mr-2.

Another thing to note is that Bootstrap 3 was more forgiving that version 4, with malformed rows and columns. For example, you could place a number of column elements in a parent column class and it would act as though there was a row element between the parent column and the children columns. Bootstrap 4 forces you to explicitly create a parent row element for column elements.

Depending on the complexity of your site, and which of the bootstrap features you use, it may not be extremely difficult to convert your current projects from Bootstrap 3 to version 4. If you use Bootstrap’s navbar classes, you should expect many of the components to break, so you may be in for a little work there. I found it easiest to start from the beginning, and completely writing the navbars from scratch.

There are also some issues with margins, padding, and element flow when converting, but these don’t take a great deal of time to resolve.
Otherwise, you shouldn’t have too much of an issue converting from version 3 to version 4, and the forward compatibility and maintainability may be worth the effort.

Sep 13, 2015

Laravel 5

Welcome to my blog. You may have noticed that I’ve redesigned this site to give the site a more modern look. It’s been over​ five years since the sites had a face lift, so I thought it was time to remedy that. The old site was built on the PHP framework CodeIgniter, but I’ve more … Continue reading Laravel 5

Most Recent Posts

  1. Bootstrap 4
  2. Laravel 5