Skip to content

Instantly share code, notes, and snippets.

@oranblackwell
Last active August 29, 2015 14:01
Show Gist options
  • Save oranblackwell/fb6c83266194c204c962 to your computer and use it in GitHub Desktop.
Save oranblackwell/fb6c83266194c204c962 to your computer and use it in GitHub Desktop.

Row and Column Paddings

div[class*="col-"].no-padding { padding : 0; }
div[class*="col-"].no-padding-left { padding-left : 0; }
div[class*="col-"].no-padding-right { padding-right : 0; }
.top-buffer { margin-top : 20px; }

Pull-Right Breakpoints

@media (min-width : 768px) {
	.pull-right-sm {
		float : right;
	}
}
@media (min-width : 992px) {
	.pull-right-md {
		float : right;
	}
}
@media (min-width : 1200px) {
	.pull-right-lg {
		float : right;
	}
}

Equal Height Columns & Alignments

/* Added support for full height inner containers (.block-*-height) (eg. full height bg-color but adhering to gutters on the  cols etc.)  Original: http://www.minimit.com/ */
/* vertical alignment styles */
.col-top {
	vertical-align : top;
}
.col-middle {
	vertical-align : middle;
}
.col-bottom {
	vertical-align : bottom;
}

/* columns of same height styles */
.container-xs-height {
	display       : table;
	padding-left  : 0px;
	padding-right : 0px;
}
.row-xs-height {
	display : table-row;
}
.col-xs-height {
	display : table-cell;
	float   : none;
	height  : 100%;
}
.block-sm-height {
	display : table;
	height  : 100%;
}
@media (min-width : 768px) {
	.container-sm-height {
		display       : table;
		padding-left  : 0px;
		padding-right : 0px;
	}
	.row-sm-height {
		display : table-row;
	}
	.col-sm-height {
		display : table-cell;
		float   : none;
		height  : 100%;
	}
	.block-sm-height {
		display : table;
		height  : 100%;
	}
}
@media (min-width : 992px) {
	.container-md-height {
		display       : table;
		padding-left  : 0px;
		padding-right : 0px;
	}
	.row-md-height {
		display : table-row;
	}
	.col-md-height {
		display : table-cell;
		float   : none;
		height  : 100%;
	}
	.block-md-height {
		display : table;
		height  : 100%;
	}
}
@media (min-width : 1200px) {
	.container-lg-height {
		display       : table;
		padding-left  : 0px;
		padding-right : 0px;
	}
	.row-lg-height {
		display : table-row;
	}
	.col-lg-height {
		display : table-cell;
		float   : none;
		height  : 100%;
	}
	.block-lg-height {
		display : table;
		height  : 100%;
	}
}
/* End of Reusable helper classes*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment