Question

We’re trying to build a content preview grid in bootstrap – much the same as you can see on medium.com eg: https://medium.com/100-word-stories

We’re currently using this kind of structure with dynamic bootstrap:

<div class="container">
  <div class="row">
    <div class="span4">CONTENT BOX 1</div>
    <div class="span4">CONTENT BOX 2</div>
    <div class="span4">CONTENT BOX 3</div>
  </row>
  <row>
    <div class="span4">CONTENT BOX 4</div>
    <div class="span4">CONTENT BOX 5</div>
    <div class="span4">CONTENT BOX 6</div>
  </row>
</div>

So we thought of using/adapting the bootstrap “well” class in order to get well-framed and padded content containers – something like <div class="span4 well"> – but the css padding/margins of that class breaks the page structure.

Is there a “clean” way to make this happen with bootstrap, or are we better off constructing our own classes from scratch? In which case – what would you guys suggest is the best/cleanest/unhackiest approach?

Thanks in advance!

Answer 1

Are you using last version of the css framework?

<div class="row">
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
</div>
<div class="row">
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
   <div class="span4">
      <div class="well">sdfijoidfisdonsdfiosdnfosdi</div>
   </div>
</div>

This works to me!