Skip to content

Instantly share code, notes, and snippets.

@oranblackwell
Created June 17, 2014 15:17
Show Gist options
  • Save oranblackwell/6fc16f3efdef1fee7a67 to your computer and use it in GitHub Desktop.
Save oranblackwell/6fc16f3efdef1fee7a67 to your computer and use it in GitHub Desktop.
Bootstrap 3 Re-usable helper classes
/* Bootstrap 3 Re-usable helper classes
 * Author: Oran Blackwell
============================================================================= */
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; }

.no-vertical-margin { margin-bottom : 0; margin-top : 0; }
.negative-margin-left { margin-left : -15px; padding-left : 15px; }
.negative-margin-right { margin-right : -15px; padding-right : 15px; }

.bottom-buffer { margin-bottom : 20px; }
.top-buffer { margin-top : 20px; }
@media (max-width : 767px) {
	.pull-right-xs { float : right; }
	div[class*="col-"].no-padding-xs { padding : 0; }
	div[class*="col-"].no-padding-left-xs { padding-left : 0; }
	div[class*="col-"].no-padding-right-xs { padding-right : 0; }
	.negative-margin-left-xs { margin-left : -15px; padding-left : 15px; }
	.negative-margin-right-xs { margin-right : -15px; padding-right : 15px; }

}
@media (min-width : 768px) {
	.pull-right-sm { float : right; }
	div[class*="col-"].no-padding-sm { padding : 0; }
	div[class*="col-"].no-padding-left-sm { padding-left : 0; }
	div[class*="col-"].no-padding-right-sm { padding-right : 0; }
	.negative-margin-left-sm { margin-left : -15px; padding-left : 15px; }
	.negative-margin-right-sm { margin-right : -15px; padding-right : 15px; }
}
@media (min-width : 992px) {
	.pull-right-md { float : right; }
	div[class*="col-"].no-padding-md { padding : 0; }
	div[class*="col-"].no-padding-left-md { padding-left : 0; }
	div[class*="col-"].no-padding-right-md { padding-right : 0; }
	.negative-margin-left-md { margin-left : -15px; padding-left : 15px; }
	.negative-margin-right-md { margin-right : -15px; padding-right : 15px; }
}
@media (min-width : 1200px) {
	.pull-right-lg { float : right; }
	div[class*="col-"].no-padding-lg { padding : 0; }
	div[class*="col-"].no-padding-left-lg { padding-left : 0; }
	div[class*="col-"].no-padding-right-lg { padding-right : 0; }
	.negative-margin-left-lg { margin-left : -15px; padding-left : 15px; }
	.negative-margin-right-lg { margin-right : -15px; padding-right : 15px; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment