If my page uses the Bootstrap class row
, col-md-x
and such to arrange the content, what would be the proper way to create a distance between each div containing a whole element semantically speaking?
I am adding a div with a padding between the divs to simulate the gap, is this a good tactic or is there a better one?
If you were looking to put some space around both those divs as a whole then add padding to the main wrapper as a margin on the second div will collapse onto the wrapper and move the wrapper not the second div. <div style="width:800px; margin:0 auto;[B]padding:20px 0;[/B]"> <div><label etc..
You can add new class to your div elements and remove padding/margin with css. To make it more clear, bootstrap assigns margin-left: -15px and margin-right: -15px for . row selector and padding-left: 15px and padding-right: 15px on all . col-* selectors to get 30px space between all the cols.
Bootstrap 4 has spacing utilities that make adding (or substracting) the space (gutter) between columns easier. Extra CSS isn't necessary. You can adjust margins on the column contents using the margin utils such as ml-0 (margin-left:0), mr-0 (margin-right:0), mx-1 (.
Starting from Bootstrap v4 you can simply add the following to your div
class attribute: mt-2 (margin top 2)
<div class="mt-2 col-md-12"> This will have a two-point top margin! </div>
More examples are given in the docs: Bootstrap v4 docs
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With