Skip to content

Instantly share code, notes, and snippets.

Jay Holtslander JayHoltslander

Block or report user

Report or block JayHoltslander

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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 Jan 31, 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
You can’t perform that action at this time.