Jay Holtslander JayHoltslander

IE 7/8/9/10/11 Virtual machines from Microsoft

Linux installation notes (tested under Ubuntu 14.04LTS/12.04LTS), assuming VirtualBox is already installed on host.

Install notes
Available images

#5 even columns in Bootstrap 3

Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.

The HTML

Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.

<div class="row fivecolumns">

#5 even columns in Bootstrap 2

Bootstrap can easily make 1,2,3,4, or 6 equally sized columns. But what if you want 5? Well the grid doesn't support it out of the box. You have to add a bit of CSS to Bootstrap and add a class to your row.

The HTML

Write your HTML as if you were creating columns to fit a grid width of 10 as opposed to 12. The example below shows 5 columns with a width of 2.

<div class="row-fluid fivecolumns">

	<!-- PASTE THIS SOMEWHERE IN YOUR PAGE TO REFERENCE BREAKPOINTS. -->
	<div style="position:fixed;top:0;left:0;background-color:rgba(0,0,0,0.5);padding:10px;color:#fff;">
	<span class="visible-xs">SIZE XS</span>
	<span class="visible-sm">SIZE SM</span>
	<span class="visible-md">SIZE MD</span>
	<span class="visible-lg">SIZE LG</span>
	</div>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Stay Standalone!</title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="white">
	<meta name="apple-mobile-web-app-title" content="Web App title to override title element name">

	<!doctype html>

	<html>
	<head>
	<!-- Run in full-screen mode. -->
	<meta name="apple-mobile-web-app-capable" content="yes">

	<!-- Make the status bar black with white text. -->
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<div class="container">

	<section class="edge-to-edge">
	<div class="row">
	<div class="col-xs-4">
	<img class="img-responsive" src="http://placehold.it/640x480/777" alt="">
	</div>
	<div class="col-xs-4">
	<img class="img-responsive" src="http://placehold.it/640x480/333" alt="">
	</div>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Animated List Items in Bootstrap</title>

	<!-- Bootstrap -->
	<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

	p.4columns {
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
	-moz-column-count: 4; /* Firefox */
	column-count: 4;
	-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
	-moz-column-gap: 20px; /* Firefox */
	column-gap: 20px;
	column-rule-color: #ccc; /* Optional */
	column-rule-style:solid; /* Optional */
	column-rule-width: 1px; /* Optional */