Adding margin between two div.row in Bootstrap 3

Question

I am new to css and bootstrap. I am working on a legacy code which needs to add two row. The first row is a dropdown and a little help button. The second row is another button.

I want to have margin between the two rows using a proper way, i.e. using CSS or Bootstrap related classes etc. I ended up using  between the two div.row but somehow I think it's not the proper way. Below are my code snippets and the screenshots for before and after adding . Please help to suggest a way without using .

<div class="row">
<div class="col-xs-4">
<select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
    <option value="kitchen">Kitchen</option>
    <option value="test01">test01</option>
    <option value="test02">test02</option>
    <option value="test03">test03</option>
</select>
</div>

<div class="col-xs-4">
<a id="manual_help">
    <i class="fa fa-question-circle" aria-hidden="true"></i>
</a>
</div>
    <div class="col-xs-4"></div>
</div>
<!-- This is the part used to create margin -->
<p></p>
<div class="row">
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="add_id" class='btn btn-primary'>
            <i class="fa fa-plus-circle"></i> <span class="add_text">
                Add
            </span>
        </button>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="edit_id" class='btn btn-primary'>
            <i class="fa fa-pencil-alt"></i> <span class="edit_text">
                Edit
            </span>
        </button>
    </div>
    <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
        <button id="delete_id" class='btn btn-danger' style="display:block">
            <i class="fa fa-trash-alt"></i> <span class="delete_text">
                Cancel
            </span>
        </button>
    </div>
</div>

Before adding :

After adding :

gavgrif · Answer 1 · 2021-03-07T05:58:03.517

Just add a margin to the div.row elements. This can be as simple as saying all rows - get a 15px margin bottom with .row {margin-bottom: 15px} - and (change the the desired margin), or you could do .row:not(:last-child){margin-bottom: 15px} to control the spacing at the bottom of the container - or even do it as .row + .row {margin-top: 15px} which gives margin-top to every direct sibling row and prevents the spacing issue at the bottom of the container.

As a general rule -try not to use html elements to control spacing - do it with CSS (and I also include   and <hr/> tags in that advice - they can be resplace with CSS be better control.

I added a parent element with a specific class and then used that class to name-space these rows so as to prevent all rows in your aplication ferom being affected. You could make a utility class and apply the styling for that - for re-use - eg: ".rows-with-margin" or something that makes sense.

Note that I changed the col-xs-12 to col-xs-4 ... nothing to do with the row spacing - just so that it rendered correctly for the small snippet window.

/* alternative 1 - margin bottom on all rows */
.form-select-wrapper .row {
  margin-bottom: 15px
}


/* alternative 2 - margin bottom on all rows within the parent container - except the last one */
.form-select-wrapper.row:not(:last-child){
  margin-bottom: 15px;
}

/* alternative 3 - margin top on direct sibling rows */
.form-select-wrapper .row + .row{
  margin-top: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="form-select-wrapper">
  <div class="row">
    <div class="col-xs-4">
      <select id="selected_id" class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
          <option value="kitchen">Kitchen</option>
          <option value="test01">test01</option>
          <option value="test02">test02</option>
          <option value="test03">test03</option>
      </select>
    </div>
    <div class="col-xs-4">
      <a id="manual_help">
          <i class="fa fa-question-circle" aria-hidden="true"></i>
      </a>
      </div>
    <div class="col-xs-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <button id="add_id" class='btn btn-primary'>
                <i class="fa fa-plus-circle"></i> <span class="add_text">
                    Add
                </span>
            </button>
        </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <button id="edit_id" class='btn btn-primary'>
              <i class="fa fa-pencil-alt"></i> <span class="edit_text">
                  Edit
              </span>
          </button>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <button id="delete_id" class='btn btn-danger' style="display:block">
              <i class="fa fa-trash-alt"></i> <span class="delete_text">
                  Cancel
              </span>
          </button>
      </div>
  </div>
</div>

Adding margin between two div.row in Bootstrap 3

1 Answers1