#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.
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">
#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.
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">
| 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 */ |
| <!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>Bootstrap Sidebar</title> | |
| <!-- Bootstrap --> | |
| <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> |
| <!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"> |
| <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> | |
| <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"> |
| <!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"> | |
| <!-- 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> |
Linux installation notes (tested under Ubuntu 14.04LTS/12.04LTS), assuming VirtualBox is already installed on host.