Adding a gap between two column divs with the same class side-by-side

Question

I know this was asked many times in SO but I can't find the answer for my question. I used bootstrap with this one and tried to have a two six columns in a row. It works as expected but what I want to achieve is that I wanted to out a gap between them. To see what I mean you can check it here. I don't want to override the bootstrap cols here. I wanted to use only the added class which is survey-extra.

HTML

<div class="container">
 <div class="row visit-redeem text-center">
   <h5>Visit Site To Redeem</h5>
 </div>
  <div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>FROM OUR SPONSORS</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>FREEBIES</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
</div>

CSS

 .survey-extra {
        background: #1e90ff;
        color: #fff;
        padding: 5px;
        border-radius: 10px;
        text-transform: uppercase;
    }
.visit-redeem {
  background: #56a4da;
  margin-top: 5px;
  margin-bottom: 6px;
  color: #fff;
  padding: 5px;
  border-radius: 20px 20px 0 0;
  text-transform: uppercase;
}

I also tried the CSS3 :nth-of-type() Selector but no luck!

I wanted to do this using css only.

Possible duplicate of [How to adjust gutter in Bootstrap 3 grid system?](http://stackoverflow.com/questions/19911763/how-to-adjust-gutter-in-bootstrap-3-grid-system) — Wim Mertens, Jul 29 '16 at 03:36
@WimMertens, thanks for the help but that's not the answer I am looking for. I don't want to override and use the bootstrap cols here. What I wanted here is to only use the added class `survey-extra`. — claudios, Jul 29 '16 at 03:43
ok, have added an answer, hopefully this is what you're after — Wim Mertens, Jul 29 '16 at 04:05

score 0 · Answer 1 · answered Jul 29 '16 at 03:19

0

Try putting survey-extra within col-xs-6 instead. Hope that help

.survey-extra {
    background: #1e90ff;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    text-transform: uppercase;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="survey-extra">
          <h5>FROM OUR SPONSORS</h5>
          <span class="money-extra">$0.00</span>
      </div>
    </div>

    <div class="col-xs-6">
      <div class="survey-extra">
          <h5>FREEBIES</h5>
          <span class="money-extra">$0.00</span>
      </div>
    </div>
  </div>
</div>

answered Jul 29 '16 at 03:19

Kenny Chan

1,232
1
15
20

yeah that solves the problem. But is there any way to only modify using css not the html? – claudios Jul 29 '16 at 03:21
You can't as adding space between two size 6 columns will make them wrap – Mark Perera Jul 29 '16 at 03:23
Unless you want to set your own width – Mark Perera Jul 29 '16 at 03:23

Xetnus · Answer 2 · 2016-07-29T03:39:53.253

0

I was able to put a visual space between the two divs by using CSS to set the width of .survey-extra to a percentage and then giving either one of the divs (using the :nth-of-type() Selector) or both of them margins, like this:

.survey-extra {
    width: 45%;
    margin-right: 5px;
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

Check it out on JSFiddle. Of course you'd have to play around with the width percentage and margins to get exactly what you want.

If you don't want to use margins, you could also keep the width set to a percentage and then use floating, like this:

.survey-extra {
    background: #1e90ff;
    color: #fff;
    width: 45%;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(0) {
  float: left;
}

.survey-extra:nth-of-type(1) {
  float: right;
}

Check it out using floating on fiddle

edited Jul 29 '16 at 03:39

answered Jul 29 '16 at 03:24

Xetnus

353
2
4
13

Sorry, I know this works but look at my updated fiddle the 2nd row and 2nd column must align from the top – claudios Jul 29 '16 at 03:32
I couldn't find your updated fiddle, but I added to my answer. Maybe that'll work for you. – Xetnus Jul 29 '16 at 03:40
Yeah, I found the solution on my problem tho. Thanks for the help – claudios Jul 29 '16 at 03:46

score 0 · Answer 3 · answered Jul 29 '16 at 03:49

I found a solution for my problem and I would like to share it to you for future references. What I did is add nth-of-type(2) and applied css.

CSS:

.survey-extra {
    background: #1e90ff;
    color: #fff;
    padding: 5px;
    border-radius: 10px;
    text-transform: uppercase;
}

.survey-extra:nth-of-type(2) {
  width: 49%;
  float: right;
}

.visit-redeem {
  background: #56a4da;
  margin-top: 5px;
  margin-bottom: 6px;
  color: #fff;
  padding: 5px;
  border-radius: 20px 20px 0 0;
  text-transform: uppercase;
}

HTML:

<div class="container">
  <div class="row visit-redeem text-center">
    <h5>Visit Site To Redeem</h5>
  </div>
  <div class="row">
  <div class="col-xs-6 survey-extra">
    <h5>FROM OUR SPONSORS</h5>
    <span class="money-extra">$0.00</span>
  </div>

  <div class="col-xs-6 survey-extra">
    <h5>FREEBIES</h5>
    <span class="money-extra">$0.00</span>
  </div>
</div>
</div>

fiddle here

Wim Mertens · Answer 4 · 2016-07-29T04:23:27.233

0

.survey-extra {
  display: inline-block;
  float: none;
  margin: 0 2% 2% 0;
  width: 49%;
}

.survey-extra:last-child {
  margin-right: 0;
}

And if you have more than 1 row you can replace last-child with nth-child(2n)

edited Jul 29 '16 at 04:23

answered Jul 29 '16 at 04:05

Wim Mertens

1,780
3
20
31

score 0 · Answer 5 · answered Jul 29 '16 at 04:43

no need to change in css just change html like below:

<div class="container">
    <div class="row visit-redeem text-center">
        <h5>Visit Site To Redeem</h5>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FROM OUR SPONSORS</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="survey-extra">
                <h5>FREEBIES</h5>
                <span class="money-extra">$0.00</span>
            </div>
        </div>
    </div>
</div>

Adding a gap between two column divs with the same class side-by-side

5 Answers5