Skip to content

Instantly share code, notes, and snippets.

View JayHoltslander's full-sized 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 August 29, 2015 13:57
5 Even Columns in Bootstrap 2 (HTML & CSS)

#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 October 18, 2017 10:55
5 even columns in Bootstrap 3

#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 December 25, 2019 16:58
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.
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 23:07
Bootstrap 3 Page with a full height sidebar
<!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">
@JayHoltslander
JayHoltslander / Animated List Items in Bootstrap 3.html
Created June 2, 2014 20:03
Animated List Items in Bootstrap 3
<!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">
@JayHoltslander
JayHoltslander / Edge to edge Bootstrap columns.html
Last active August 29, 2015 14:06
Edge to edge Bootstrap columns
<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">
@JayHoltslander
JayHoltslander / gist:54f657b0962494ce4dde
Created October 16, 2014 22:17
iOS 8 Web App (Prevent opening in Safari)
<!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 August 29, 2015 14:11
Bootstrap Media Query Testing Snippet
<!-- 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 September 25, 2015 21:04 — forked from magnetikonline/README.md
IE 7/8/9/10/11 Virtual machines from Microsoft - Linux w/VirtualBox installation notes.