Adding margin between two div.row in Bootstrap 3 [duplicate] - css

Question

This question already has answers here:
Twitter Bootstrap - add top space between rows
(21 answers)
Closed 1 year ago.
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 <p></p> 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 <p></p>. Please help to suggest a way without using <p></p>.
<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 <p></p>:
After adding <p></p>:

Answer 1

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 <br/> 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>