Skip to content

Instantly share code, notes, and snippets.

@amandasaffer
Created July 14, 2016 23:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amandasaffer/2862306d0a509f0add1f9a83ffe899a6 to your computer and use it in GitHub Desktop.
Save amandasaffer/2862306d0a509f0add1f9a83ffe899a6 to your computer and use it in GitHub Desktop.
Overrides the default bootstrap behavior in order to wrap rows and also adds a helper class "col-centered" to center any sized column within a row.
/**
*
* Bootstrap Overrides
*
*/
.col-centered{
float: none;
margin: 0 auto;
}
/* Bootstrap Clearfix */
/* Tablet */
@media (min-width:767px){
/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: none;
}
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: left;
}
}
/* Medium Desktop */
@media (min-width:992px){
/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
}
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: left;
}
}
/* Large Desktop */
@media (min-width:1200px){
/* Column clear fix */
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
}
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1){
clear: left;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment