If IE8 is displaying all Bootstrap columns full-width, here’s the fix

I see a lot of reports online that Bootstrap 3 is not correctly displaying on IE 8, for example two side-by-side columns get displayed full-width and stacked (instead of side-by-side).

If you’ve already added the required IE8 patch shown below, be sure you are adding that after the bootstrap.css file is loaded. (If you load it before boostrap.css it will not work.)

<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.3/respond.min.js"></script>
< ![endif]-->

 

Getting Glyphicons to work with static Bootstrap 3 CSS and Rails 3.2

Glyphicons will not work correctly on production Rails apps in the default static Bootstrap 3 installation. The issue is that the compiled (static) Bootstrap CSS file has hardwired location ../fonts for the fonts that will not work with the default Rails asset pipeline. I’ve seen several solutions on the web that involve editing the Bootstrap CSS file, but I dislike that approach since it breaks the next time you install an updated Bootstrap unless you remember to re-make the same edits.

Copy the entire Glyicons /fonts folder to the app/assets/stylesheets folder, e.g., put the fonts in a fonts subdirectory of the stylesheets folder.

Add the following to bootstrap_and_overrides.css

/* Override Bootstrap 3 font locations */ 
@font-face { 
  font-family: 'Glyphicons Halflings'; 
  src: url('/assets/fonts/glyphicons-halflings-regular.eot'); 
  src: url('/assets/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'), 
  url('/assets/fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
  url('/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); 
}