100% disk height does not work - bootstrap

Question

I use Bootstrap for the grid, I am having problems with col-6 having a height: 100% to vertically align the 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 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 a minimum height of 100%

Help is much appreciated.

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

Answer 1

You can do it as follows

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

Answer 2

, , , . , .

, div .

EDIT:

:

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

fillme fillmeright fillmeleft.

Answer 3

Give the parent line class ".fillme", ​​remove the col-lg-6 class from this class, and do the following:

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

cheers, k