Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap: adding gaps between divs

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?

like image 894
dabadaba Avatar asked Jan 02 '14 18:01

dabadaba


People also ask

How do you make a gap between divs?

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..

How can I remove space between two div tags in bootstrap?

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.

How do you put a space between two columns in bootstrap 4?

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 (.


1 Answers

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

like image 143
tonysepia Avatar answered Sep 28 '22 02:09

tonysepia