Add margin between row elements bootstrap

Question

I have 3 different elements in my row class with bootstrap. I wish to create a margin (of 20px for example) between EACH of the elements in the row container. Since the elements are divided into 4 equal spaces of the row container (on the same line), adding a margin class with a margin parameter of 20px pushes the other elements to the next line (whereas I want to keep them all in the same line).

My current code

<div class="row">
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>About Us</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Contacts</h4>
        </div>
      </a>
      <a style="display:block" href="#">
        <div class="col-sm-4 margin">
          <span class="glyphicon glyphicon-envelope"></span>
          <h4>Upcoming Events</h4>
        </div>
      </a>
    </div>

How about adding a padding to .col-sm-4, and set .col-sm-4 to box-sizing: border-box;. See this example: jsfiddle.net/pe0w20kd Is this what you want? — Roy
– Roy, Commented Apr 2, 2016 at 18:38
If I had a padding and the box-sizing to the margin, I can see that the containers are still side by side (I've added a border around the elements which is how I can see). — Adam
– Adam, Commented Apr 2, 2016 at 19:04

Nutshell · Accepted Answer · 2016-04-02 18:44:18Z

1

I've changed the structure to a more proper one I think. And I use padding on h4 element.

See this fiddle

    <div class="row">          
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>

        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
        <div class="col-sm-4">
          <h4 class="margin">
            <a style="display:block" href="#">
              <span class="glyphicon glyphicon-envelope"></span>
                About Us
            </a>
          </h4>
        </div>
    </div>

answered Apr 2, 2016 at 18:44

Nutshell

8,5251 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Adam Over a year ago

Thanks for the answer. This is indeed what I want. I've tweaked it a little bit as well to include a border around each element block.

Nutshell Over a year ago

You're welcome. I think it's better to not overload bootstrap classes by adding fixes on it and preferable to change elements in it :)

Adam Over a year ago

I agree. Best to keep the code nice, clean and simple!

Sachin · Accepted Answer · 2016-04-02 19:27:58Z

1

Created a fiddle to make things clear .
https://fiddle.jshell.net/q1je1kct/
Is this you wanted
Added
display:inline-block;

Update
https://fiddle.jshell.net/q1je1kct/4/

If you don't want the elements jumping to newline , take a look into this
https://fiddle.jshell.net/q1je1kct/5/
Created using flex concept.

new Update as suggested
https://fiddle.jshell.net/q1je1kct/8/

edited Apr 2, 2016 at 19:27

answered Apr 2, 2016 at 18:39

Sachin

2,7831 gold badge21 silver badges36 bronze badges

2 Comments

Adam Over a year ago

Thanks for your answer. However, with your latest update, even I hover over the elements, I can still see that they are side by side (in terms of clicking on the links). I'd like to have a gap between the elements, as in if I hover over the space in between, it wouldn't show me the hand link (i.e the way the cursor changes to a hand when you hover over a link). So even though visually there is a gap, the elements are still not spaced out.

Adam Over a year ago

I've tried your code and it works the way I've wanted it to with just a few modifications. I've accepted the other answer simply because it seems a "cleaner" way to represent the code. Thank you for your help.

Collectives™ on Stack Overflow

Add margin between row elements bootstrap

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related