Bootstrap - panels with same height and width
I think you want something like this:
Setting separated for ease of reference.
.equal {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
div[class*='col-'] {
flex:1 1 auto;
background: lightblue;
display: flex;
}
.panel {
flex:1 0 100%;
}
Codepen Demo
Bootstrap grid with 3 divs in a row with same height
For Bootstrap 3 versions, you could approach a fixed height for md+ screen devices (width >= 992px) with something like this:
@media(min-width:992px) {
.fixed-md-height { height: 150px; } .h-100 { height: 100%; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container-fluid"> <div class="row fixed-md-height"> <div class="col-md-7 h-100 bg-danger">Test</div> <div class="col-md-2 h-100 bg-primary">Test</div> <div class="col-md-3 h-100 bg-warning">Test</div> </div></div>How can I make Bootstrap columns all the same height?
LATEST SOLUTION (2022)
Solution 4 using Bootstrap 4 or 5
Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.
Demo
<div class="container">
<div class="row ">
<div class="col-md-4" style="background-color: red">
some content
</div>
<div class="col-md-4" style="background-color: yellow">
catz
<img width="100" height="100" src="https://placekitten.com/100/100/">
</div>
<div class="col-md-4" style="background-color: green">
some more content
</div>
</div>
</div>
Solution 1 using negative margins (doesn't break responsiveness)
Demo
.row{
overflow: hidden;
}
[class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
Solution 2 using table
Demo
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.
Demo
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
Equal height panels?
I tweaked it a bit and added the display: flex to the outer container. That seems to do what you are after.
<div class="row">
<div class="row container-fluid" style="display:flex">
<div class="col-md-4">
<!-- Information panel -->
<div class="panel panel-default">
<div class="panel-heading">
<p class="panel-title">Information</p>
</div>
<div class="panel-body">
<h4 id="numVal">Value: 0</h4>
</div>
</div>
<!-- Secondary box -->
<div class="panel panel-default secondPanel">
<div class="panel-heading">
<p class="panel-title">Box2</p>
</div>
<div class="panel-body">
</div>
</div>
</div>
<!-- Main panel -->
<div class="panel panel-default mainPanel col-md-8">
<div class="panel-body">
</div>
</div>
</div>
</div>
Bootstrap's Panels with the same height
May do this only by css. Add row div for panels.
<div class="row equal">
<div class="col-sm-3 col-sm-push-1">
...
</div>
<div class="col-sm-3 col-sm-push-1">
...
</div>
<div class="col-sm-3 col-sm-push-1">
...
</div>
</div>
And add CSS
.equal, .equal > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
Demo in bootply
Can't fit a panel inside a Twitter Bootstrap 3 column grid
You have an extra row added and tables don't work like that. That combined with having new vertical alignment set was forcing the questions panel down. Try this and let me know if it works!
<div class="col-sm-12 col-md-5 col-lg-5 no-float" style="vertical-align:top; padding:0; border: solid red">
<div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black ">
<div class="panel-heading">QUESTIONS</div>
<div class="panel-body">
<div>
<a>
<form style="display: inline-block; ">
<div class="input-group col-md-12">
<input type="text" class=" search-query form-control" placeholder="Recherche une question sur ce contenu">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class=" glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</a>
</div>
<div>
<button type="button" class="btn btn-question">Ask new question</button>
</div>
</div>
</div>
</div>
.container-fluid{ height:100%;}
html,body,.container { height:100%;}.container { display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box;}
/**/
.container-fluid { height:100%; display:table; width: 100%; margin-top: -50px; padding: 50px 0 0 0; /*set left/right padding according to needs*/ box-sizing: border-box;}
.row { height: 100%; display: table-row;}
.row .no-float { display: table-cell; float: none; vertical-align:top;}
<!-- begin snippet: js hide: false console: true babel: false --><div class="container-fluid"> <div class="row"> <div class="col-sm-12 col-md-7 col-lg-7 no-float" style="padding: 0 !important; border: solid blue">
<iframe src="http://exame.abril.com.br/tecnologia/facebook/noticias/facebook-nao-tem-planos-de-voltar-a-china-diz-executivo" style="border: none;"></iframe>
</div> <div class="col-sm-12 col-md-5 col-lg-5 no-float" style=" padding:0; border: solid red"> <div class="panel panel-default" style="height: 100%!important; width: 100%!important; border: solid black "> <div class="panel-heading">QUESTIONS</div> <div class="panel-body"> <div> <a> <form style="display: inline-block; "> <div class="input-group col-md-12"> <input type="text" class=" search-query form-control" placeholder="Recherche une question sur ce contenu" /> <span class="input-group-btn"> <button class="btn btn-default" type="button" > <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </form> </a> </div> <div> <button type="button" class="btn btn-question">Ask new question</button> </div>
</div> </div>
</div></div></div>Bootstrap panels - same outer height and same panel-body height
The problem is that matchHeight runs after the CSS is interpreted by the browser so, panel {height: 100%} is meaningless.
You should run matchHeight() on the panel-body too..
$('.panel-body').matchHeight();
https://jsfiddle.net/rtq64o8d/
Related Topics
How to Display 3 Items Per Row in Flexbox
Why "Overflow: Hidden" Clears a Float
What Does the Double Colon (::) Mean in CSS
Less Mixin a Variable Class Name
How to Include CSS Style When Converting Svg to Png
Bootstrap Change Div Order with Pull-Right, Pull-Left on 3 Columns
First-Child Full-Width in Flexbox
Mysterious Whitespace in Between Bootstrap2 Navbar and Row Underneath
Correct Terms and Words for Sections and Parts of Selectors
Margin-Top Not Working with Clear: Both
How to Align Nav Items to the Right in Bootstrap 5
Build List of Selectors with Less
How to Decrease Image Brightness in CSS
Print Background Colours in Chrome
CSS Selector Involving Pseudo Class First-Child and Dropcap
How to Watch Changes in Whole Directory/Folder Containing Many SASS Files
Can You Target an Element with CSS Only If 2 Classes Are Present