Add a floating div in a popup

Question

I want to some cards on the bootstrap modal form.

In modal, I want cards in two columns for that I use the class "col-md-5"

.mycard.col-md-5 card contents

But class "col-md-5" add a property Float:left in the cards.

Due to which It will cards were showing outside of the modal popup

Any help will be appreciated.

Answer 1

use class="row" before col

<div class="row">
  <div class="col-md-5">
  </div>
  <div class="col-md-5">
  </div>
  <div class="col-md-5">
  </div>
  <div class="col-md-5">
  </div>
</div>

Answer 2

Thanks to @Chilll007

adding overflow:hidden to the parent div did the job.

Answer 3

Please use clearfix to avoid showing outside of the modal popup

<div class="col-md-5">
</div>
<div class="col-md-5">
</div>
<div class="clearfix"></div>

please use clearfix this will help you

Answer 4

You should clear the floats below the 4 divs. Try this code.

<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="mycard col-md-5">
content
</div>
<div class="clear"></div>

.clear {
clear: both;
}