David Young David Young - 14 days ago 7
CSS Question

Bootstrap CSS undesired overlapping elements

I'm typically more of a backend guy, but I find myself working on a project that requires some frontend work. I'm fumbling my way through using bootstrap, and I find myself stuck on the following:

<div id="form" class="col-md-6">
<!-- form goes here -->
</div>
<br /> <!-- multiple br tags do nothing, as long as col-md-6 is used above -->
<div id="image_container">
<image src="myimage.jpg" />
</div>


I want a gap between the end of the form and the top of the image, but
col-md-6
seems to be resulting in there being overlap, and the image-div is vertically larger than it is on the same page with
col-md-6
removed.

Admittedly, CSS has never been my forté, but I'm hoping to address that soon. In the meantime, can someone help me out with this issue?

Answer

Seems you're not using the grid system correctly, you have to use rows and cols to separate your elements in your frontend.

Check this link about Bootstrap Grid System