CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Scipion
Scipion

Reputation: 11888

Bootstrap: Propagate container height/width

I have the following html :

<div class="container-fluid" style="height: 80px;">
  <div class="row">
    <div class="component">
       ...
    </div>
  </div>
</div>

how can I have my component having the same height as my container ? I could set height: inherit; on both the row and the component but I was wondering if there was any other way.

Upvotes: 2

Views: 80

Answers (2)

Daniel Hernandez
Daniel Hernandez

Reputation: 229

You can also use Flexbox. I added border color to make the boundaries visible.

<div class="container-fluid">
  <div class="row">
    <div class="component">
      ...
    </div>
  </div>
</div>


.container-fluid {
  height: 80px;
  border: 1px solid black;
}
.row {
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.component {
  border: 1px solid red;
}

https://jsfiddle.net/m655owr8/5/

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362780

You could use the same CSS class on all three..

<div class="container-fluid equal">
  <div class="row equal">
    <div class="component equal">
       ...
    </div>
  </div>
</div>

.equal {
   height: 80px;
}

http://bootply.com/IkDJD4cf5G

Upvotes: 2

Related Questions