CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
nCore
nCore

Reputation: 2097

Bootstrap grid issue

So i've been trying to figure out how to make spaces in between each columns of col-sm-4 and couldn't really find a way how to make the spacing. As you can see I there is no spacing in between the columns.

enter image description here

Need something like this: enter image description here 

            <div class="inner_img">
              <img src="img/tablets/phoca_thumb_m_1.png" class="center-block">
            </div>

            <h5>Memorial Code: ...</h5>

            <p>.</p>

          </div>
          <div class="col-sm-4 phocagallery-box-file">
            <img src="img/tablets/phoca_thumb_m_2.png" class="center-block">
            <h5>Memorial Code: ...</h5>

            <p>.</p>
          </div>
          <div class="col-sm-4 phocagallery-box-file">
            <img src="img/tablets/phoca_thumb_m_3.png" class="center-block">
            <h5>Memorial Code: ...</h5>

            <p>.</p>
          </div>

CSS:

.phocagallery-box-file {
  background: #525900;
  display: block;
  padding: 5px;
}

Upvotes: 0

Views: 48

Answers (1)

Xareyo
Xareyo

Reputation: 1377

Adding padding to the box holding the col-md-4 will overwrite Bootstraps' default gutter padding and hence removing the spacing between columns.

The two options are to add padding to an inner element, than where the col-md-4s are placed.

Example:

<div class="col-sm-4 phocagallery-box-file">
    <div class="innner-box">
        <img class="center-block" src="img/tablets/phoca_thumb_m_2.png">

        <h5>Memorial Code: ...</h5>

        <p>.</p>
    </div>
</div>

CSS

.phocagallery-box-file {
  background: #525900;
  display: block;
}

.inner-box {
  padding: 5px;
}

and / or

Play around with borders and adjusting their thickness.

Example fiddle

Upvotes: 2

Related Questions