Bootstrap 3 quick fix for older Firefox versions

I recently worked on a site and used Bootstrap v3 as the framework for my grid system. As I got far into the project, the requirement for Firefox versions crept downward to version 27. My carefully constructed columns started to crumble in this version of Firefox. After a little research, it turned out that the CSS box-sizing rule for Bootstrap had dropped the ‘-moz’ prefixes. Here’s what Bootstrap had in it:

* {
  box-sizing: border-box; }

*:before,
*:after {
  box-sizing: border-box; }

To add support for the older Firefox builds, I left the official Bootstrap file alone but added the following to the beginning of my own style.css.


* {
  -moz-box-sizing: border-box; }

*:before,
*:after {
  -moz-box-sizing: border-box; }

Presto, change-o. My site looked just fine. Whew.

 

Comments on this post.

Thanks you John for this great Article!!! It’s really a great quick fix for my websites’s css :) I’m applying it now

By Angel on Mar 11 2015

Thank you very much for your post! It really helped!

By Bob on May 22 2015

Thank you very much for this post. It helped me a lot.

By Rafael on Jan 08 2016

Leave Your Comment:

name:

email:

location:

url:

your comment:

Remember my personal information

Notify me of follow-up comments?