dabadaba dabadaba - 2 months ago 15
CSS Question

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?

Answer

Adding a padding between the divs to simulate a gap might be a hack, but why not use something Bootstrap provides. It's called offsets. But again, you can define a class in your custom.css (you shouldn't edit the core stylesheet anyway) file and add something like .gap. However, .col-md-offset-* does the job most of the times for me, allowing me to precisely leave a gap between the divs.

As for vertical spacing, unfortunately, there isn't anything set built-in like that in Bootstrap 3, so you will have to invent your own custom class to do that. I'd usually do something like .top-buffer { margin-top:20px; }. This does the trick, and obviously, it doesn't have to be 20px, it can be anything you like.

Comments