Skip to content

Instantly share code, notes, and snippets.

@barbwiredmedia
Last active August 29, 2015 14:01
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 barbwiredmedia/3453f40561c9e75ee263 to your computer and use it in GitHub Desktop.
Save barbwiredmedia/3453f40561c9e75ee263 to your computer and use it in GitHub Desktop.
Bootstrap Responsive column resets. Clear columns without rows. For use within looped content where you can't inject more markup. http://getbootstrap.com/css/#grid
<!--Example #1-->
<?php //Your Loop Start?>
<div class="row your-wrapper">
<div class="col-md-6">
<!--Your stuff with 50% columns-->
</div>
<div class="duel-clear clearfix"></div>
</div>
<?php //Your Loop END?>
<!--Example #2-->
<?php //Your Loop Start?>
<div class="row your-wrapper">
<div class="col-md-3">
<!--Your stuff with 25% columns-->
</div>
<div class="quad-clear clearfix"></div>
</div>
<?php
//Your Loop END?>
/*Hide clear by default*/
.duel-clear,.quad-clear { display:none;}
/*Only show clear when needed. This is on a per column or layout basis */
.your-wrapper div + div.duel-clear:nth-of-type(4n), .your-wrapper div + div.quad-clear:nth-of-type(8n) {display:block;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment