CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Adam
Adam

Reputation: 2552

Add margin between row elements bootstrap

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>

Upvotes: 0

Views: 221

Answers (2)

Sachin
Sachin

Reputation: 2765

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/

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

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>

Upvotes: 1

Related Questions