Bootstrap two equal height div inside a div - html

Question

I am new to bootstrap and trying.
I need a pattern as follows
How ca we split the div's vertically with two equal divs ?
In horizondal we can do that by col-md-6.
Thanks in advance

Answer 1

Bootstrap mainly focuses on WIDTH, thus to my knowledge there are
no special classes to make two div's of equal height.
You can do it by specifying height:/* value in px */; in the <div>'s styling !
<div class="container"> /*Grid Layout*/
<div class="row testdiv">/*row cuts of 15px margin of left&right*/
</div>
<div class="row testdiv">
</div>
</div>
Now the CSS :
.testdiv{
height:400px;/*or some other value*/
}
A class selector is used to affect the styling of both div's at the same time !

Answer 2

add two div as follows
<div class="container-fluid mainbg">
<div class="row">
<div class="col-md-12 div1">.col-md-12</div>
</div>
<div class="row">
<div class="col-md-12 div2">.col-md-12</div>
</div>
</div>
Some css code to include
.mainbg{
background:grey;
padding:10px; }
.div1{
background:red; }
.div1, .div2{
height:100px;
line-height:100px;
font-size:50px; }
.div2{
text-align:center;
}

Answer 3

You could use css tables to achieve equal-height rows
Bootply
Markup
<div class="container-fluid">
<div class="row">
<div class="one">DIV1</div>
</div>
<div class="row">
<div class="two">DIV2</div>
</div>
</div>
(Relevant) CSS
.container-fluid
{
height: 200px; /* whatever you need */
display:table;
width:100%;
}
.one,.two
{
display:table-cell;
width:100%;
vertical-align: middle;
}
.row {
display:table-row;
}

Answer 4

Depending on your browser support you could always use CSS3 Flexbox
I did a quick demo here of what you're after.
http://codepen.io/tom-maton/pen/LCbIx
.container {
align-content: stretch;
background-color: gray;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-flow: row wrap;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
height: 350px;
margin: 20px auto;
padding: 15px;
width: 750px;
}
All the flexbox settings are set on the containing element and it does the rest from there on in.
A good article about FlexBox can be found here http://css-tricks.com/snippets/css/a-guide-to-flexbox/