Grow your CSS skills. Land your dream job.

Stacking Blocks using Bootstrap

  • # December 5, 2012 at 5:36 am

    Hi,

    I’ve been trying to stack blocks using the Bootstrap, but it looks like it only stacks three / four blocks and as soon as it jumps to a new row they break.

    How i get blocks stacking nice and clean using the bootstrap.

    i want to achieve this effect.

    http://codepen.io/amyth91/pen/wcAzj

    Considering the Outer to be “row-fluid” and each block be “span3″.

    Thanks

    regards

    # December 5, 2012 at 6:57 am

    My guess is that you aren’t splitting each ‘set ‘ of 4 blocks as new rows.

    # December 5, 2012 at 8:18 am

    Been a couple of projects since i used boot strap but if i remember rightly bootstrap’s grid doesn’t behave the way you think it does. the dynamic grid has a basic structure roughly like this.

    One row, a standard block div with a max-width, inside that a number of div’s called columns, these are also block div’s but with a width percentage set to correspond to how many columns, as the window decreases insize (once below the row’s max-width) these column widths actually decrease in pixel size (same percentage though, now just of a narrower row) till some point at which a media query kicks in and column’s regardless of how many columns they represent are set to 100% width and thus stack inline vertically.

    # December 5, 2012 at 8:26 am

    Basically it’s not going to work using Bootstraps Scaffolding Grid System as easily as you might think.

    That’s not to say that you can’t create a simple grid inside your own CSS and use that. You just need to create separate classes to distinguish them from the TBS ones.

    http://codepen.io/joe/pen/yfmrp

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".