0

I have closely followed the most popular example of how to add space between columns, but it doesn't work. You can view it in action at

codepen.io

What I've done is put a col-sm-12 inside of a col-sm-4 for each column. According to the most popular answer here this should automatically render some space between the 2 divs.

HTML: 

<div class="row blocks-grid">
  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 item">
    <div class="col-sm-12">
      <img src="http://example.com/1MBVDF4">
      <h2>This is me</h2>
    </div>
  </div>  
</div>

CSS:

body {
  background: #BEB7A4;
}
.blocks-grid {
  max-width:75.0rem; 
  margin:0 auto;
  .item {
    cursor: pointer;
    margin-bottom:1rem;
    position:relative;
    height:34.0rem;
    padding-top:2.5rem;
    background:#FFFFFC;
    &:hover {
      background:#FF0000;
      color:white;
      img {
        display:none;
      }
    }
    h2 {
      font-size:2.0rem;
      margin-top:1rem;
      text-align: center;
    }    
    img {
      max-width: 100%;
      margin:auto;
      display:block;
    }
  }
}

Basically, I would think the result would look like the following photo, but it does not:

enter image description here

Community
  • 1
  • 1
maudulus
  • 10,627
  • 10
  • 78
  • 117

4 Answers4

2

you can try this: Demo

Add your "item" class with "col-sm-12"

body {
  background: #BEB7A4;
}
Pradeep Pansari
  • 1,287
  • 6
  • 10
1

I made some changes on your code.

HTML

Note the subitem class added to col-sm-12 divs.

<div class="row blocks-grid">
  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>

  <div class="col-sm-4 item">
    <div class="col-sm-12 subitem">
      <img src="image_url">
      <h2>This is me</h2>
    </div>
  </div>  
</div>

LESS

body {
  background: #BEB7A4;
}
.blocks-grid {
  max-width:75.0rem; 
  margin:0 auto;
  .item {
    cursor: pointer;
    margin-bottom:1rem;
    position:relative;
    height:34.0rem;
    padding-top:2.5rem;
    .subitem {
      background:#FFFFFC;
      height: 100%;
      padding-top: 50px;
      &:hover {
        background:#FF0000;
        color:white;
        img {
          display:none;
        }
      }
      h2 {
        font-size:2.0rem;
        margin-top:1rem;
        text-align: center;
      }    
      img {
        max-width: 100%;
        margin:auto;
        display:block;
      }
    }    
  }
}

Take a look: http://codepen.io/anon/pen/KgzVRK

Hope it can helps you.

Waldir J. Pereira Junior
  • 826
  • 1
  • 10
  • 17
1

You can actually remove all the extra junk and let bootstrap do it for you... NEVER change margins / widths on the framework. This is all you need....

HTML

<div class="row">
  <div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x250">
    <h2>This is me</h2>
  </div> 
<div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x150">
    <h2>This is me</h2>
</div>  
  <div class="col-xs-6 col-sm-4">
    <img src="http://placehold.it/350x150">
    <h2>This is me</h2>
  </div>  
</div>

CSS

img { width: 100%; }
Rob
  • 108
  • 1
  • 8
0

You may try to move the class item from col-xs-6 to col-sm-12

The snippet:

body {
        background: #BEB7A4;
    }

    .blocks-grid {
        max-width: 75.0rem;
        margin: 0 auto;
    }

    .blocks-grid .item {
        cursor: pointer;
        margin-bottom: 1rem;
        position: relative;
        height: 34.0rem;
        padding-top: 2.5rem;
        background: #FFFFFC;
    }

    .blocks-grid .item:hover {
        background: #FF0000;
        color: white;
    }

    .blocks-grid .item:hover img {
        display: none;
    }

    .blocks-grid .item h2 {
        font-size: 2.0rem;
        margin-top: 1rem;
        text-align: center;
    }

    .blocks-grid .item img {
        max-width: 100%;
        margin: auto;
        display: block;
    }
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
    <style>
        body {
        background: #BEB7A4;
    }

    .blocks-grid {
        max-width: 75.0rem;
        margin: 0 auto;
    }

    .blocks-grid .item {
        cursor: pointer;
        margin-bottom: 1rem;
        position: relative;
        height: 34.0rem;
        padding-top: 2.5rem;
        background: #FFFFFC;
    }

    .blocks-grid .item:hover {
        background: #FF0000;
        color: white;
    }

    .blocks-grid .item:hover img {
        display: none;
    }

    .blocks-grid .item h2 {
        font-size: 2.0rem;
        margin-top: 1rem;
        text-align: center;
    }

    .blocks-grid .item img {
        max-width: 100%;
        margin: auto;
        display: block;
    }
    </style>
</head>
<body>
<div class="row blocks-grid">
    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12  item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12 item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>

    <div class="col-xs-6 col-sm-4">
        <div class="col-sm-12 item">
            <img src="https://www.samhober.com/howtofoldpocketsquares/Flat1.jpg">

            <h2>This is me</h2>
        </div>
    </div>
</div>

</body>
gaetanoM
  • 41,594
  • 6
  • 42
  • 61