CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
focus
focus

Reputation: 171

Bootstrap Minimum Height for a Div

I have a banner in my page. I managing the design with bootstrap. The image with the id ”mybanner” is created dynamically from the code. So there are times that my code may not have at all the image element. I would like to specify a minimum height for the div id ” myhorizontalbanner” so if there is not present at all the image element to display as banner the div id ” myhorizontalbanner” colored with red color.

My code when the image is there

<div class="row">
    <div class="col-12 bg-red-banner">
      <div class="row" id="myhorizontalbanner">
        <img id="mybanner" src="images/mybannerimage.jpg" class="img-fluid" />  <!--This Image 
         element is comming dynamically-->          
      </div>
    </div>
</div>

My code when I dont have image

<div class="row">
  <div class="col-12 bg-red-banner">
      <div class="row" id="myhorizontalbanner">
                  
      </div>
  </div>

Upvotes: 0

Views: 1530

Answers (1)

Chuong Tran
Chuong Tran

Reputation: 360

Have you tried with min-height ?
For example:

#myhorizontalbanner {
  min-height: 150px;
}

Upvotes: 1

Related Questions