Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
I may be slow to respond.

Jay Holtslander JayHoltslander

💭
I may be slow to respond.
View GitHub Profile
@JayHoltslander
JayHoltslander / 5 even columns in Bootstrap 2.md
Last active Aug 29, 2015
5 Even Columns in Bootstrap 2 (HTML & CSS)
View 5 even columns in Bootstrap 2.md

#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">
@JayHoltslander
JayHoltslander / 5 even columns in Bootstrap 3.md
Last active Oct 18, 2017
5 even columns in Bootstrap 3
View 5 even columns in Bootstrap 3.md

#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">
@JayHoltslander
JayHoltslander / Multi-column CSS
Last active Dec 25, 2019
Split a paragraph into multi columns like a newspaper with this CSS3. Text will automatically fill the columns. You can use this within a single Bootstrap column to simulate multi-column layout without needing to add extra divs for extra columns.
View Multi-column 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 */
@JayHoltslander
JayHoltslander / COMPLETE.html
Created May 4, 2014
Bootstrap 3 Page with a full height sidebar
View COMPLETE.html
<!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">
View Animated List Items in Bootstrap 3.html
<!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">
View Edge to edge Bootstrap columns.html
<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>
View iOS-8-web-app.html
<!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">
@JayHoltslander
JayHoltslander / gist:54f657b0962494ce4dde
Created Oct 16, 2014
iOS 8 Web App (Prevent opening in Safari)
View gist:54f657b0962494ce4dde
<!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">
@JayHoltslander
JayHoltslander / snippet.html
Last active Aug 29, 2015
Bootstrap Media Query Testing Snippet
View snippet.html
<!-- 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>
@JayHoltslander
JayHoltslander / README.md
Created Sep 25, 2015 — forked from magnetikonline/README.md
IE 7/8/9/10/11 Virtual machines from Microsoft - Linux w/VirtualBox installation notes.
View README.md