Add a floating div in a popup

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

enter image description here

Any help will be appreciated.

4 answers

  • answered 2018-04-17 05:01 Aryan Twanju

    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;
    }
    

  • answered 2018-04-17 05:01 perumal N

    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

  • answered 2018-04-17 05:01 Vishnu Mishra

    Thanks to @Chilll007

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

    enter image description here

  • answered 2018-04-17 05:01 HTML CSS Hupp Technologies

    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>