CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
user3196599
user3196599

Reputation:

Div height 100% not working - bootstrap

I am using Bootstrap for a grid system, I am having trouble making a col-6 have a height:100%, in order to vertically align some text inside it.

<div class="row">
    <div class="col-lg-6 col-sm-12 center ">
        <img alt=" " class="img-responsive" src="assets/images/sitewide/mainpageeconomy.jpg">
    </div>
    <div class="col-lg-6 col-sm-12 fillme">
        <p>We also offer a 30 foot Grady White center console. She's more of a hardcore no frills fishing vessel, we normally take her 20 to 40 miles offshore for bottom fishing and trolling for game fish up to 4 anglers.</p>
    </div>
</div>

the fillme class has a height and min height of 100%

Help is much appreciated.

Update - I wrote a blog post about this! definitely a nice piece of code to have handy.

Upvotes: 4

Views: 10992

Answers (3)

Kresimir Pendic
Kresimir Pendic

Reputation: 3614

Give your parent row '.fillme' class, remove from col-lg-6 that class and have it like this:

.fillme{
    display: flex;
    align-items: center;
}

cheers, k

Upvotes: 0

Lochemage
Lochemage

Reputation: 3974

A percentage height or width assigned to an element will only make it a percentage size of its parent element, not the entire browser window. If the parent doesn't have a height or width assigned to it, child elements with a percentage value have no effect.

Make sure the parent div element also contains a height value.

EDIT:

In your case, you can use position magic to achieve the result you want:

CSS:

.row {
  margin-right: -15px;
  margin-left: -15px;
  position: relative;
}

.fillmeright {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
}

.fillmeleft {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
}

Just replace the fillme class with the appropriate fillmeright or fillmeleft.

Upvotes: 1

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You can make it like this

.col-lg-6 {    
    width: 49% !important;
    display: inline-block;
    float: none !important;
    vertical-align: middle;    
}

Upvotes: 0

Related Questions