Twitter Bootstrap Question posted in

Twitter Bootstrap Element doesn't have height

I have the following CSS Code.
My problem is that the DIV with the class inventar doesn’t have a height.
I would prefer if the div has the height from the img_div elements.

<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
   <h1>Inventar<small> Select for sale</small></h1>
   <hr class="akx"/>
   <div class="inventar">
      <div class="col-md-3">
         <div class="img_div" id="25828822">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="29840084">
           <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="17075550">
           <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="21142608">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="23835624">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="17654701">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="13668573">
            <img src="IMG LINK" alt="" class="img-responsive">
      </div>
      <div class="col-md-3">
         <div class="img_div" id="28821423">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="23502203">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="16881637">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="23013673">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
      <div class="col-md-3">
         <div class="img_div" id="14411606">
            <img src="IMG LINK" alt="" class="img-responsive">
         </div>
      </div>
   </div>
</div>
Tags:

2

Answers


  1. 0

    Can you post a jsfiddle with your CSS as well for the HTML you posted.
    Without the CSS we wouldn’t be able to help you.

    Regardless, from your question it looks like the class img_div is floated.
    If you are floating the elements you will need to clear them as well.

    One way to get the height for inventar class is to give it clearfix class

    Cheers

    Login or Signup to reply.
  2. 0

    A common best practice in Bootstrap is to use .row as a parent to the columns, this is due to the floating issue @v.soni mentioned.

    Also by default .row has a min-height 1px, and also negative margins so, you can nest an infinite amount of grids within a column.

    so just add .row inside the .inventar and wrap the columns and everything should be fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search