CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
maudulus
maudulus

Reputation: 11035

Bootstrap Add Space between Columns

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

Upvotes: 0

Views: 683

Answers (4)

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 0

Rob
Rob

Reputation: 118

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%; }

Upvotes: 1

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

you can try this: Demo

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

body {
  background: #BEB7A4;
}

Upvotes: 2

Waldir J. Pereira Junior
Waldir J. Pereira Junior

Reputation: 836

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.

Upvotes: 1

Related Questions