Bootstrap vertical align (to all columns) in row with multiple elements

Question

I have created a row using bootstrap row design.

<div class="row">
 <div class="col-xs-3 col-md-3">
<div class="heading">
<h1> Fist column h1 </h1>
</div>
<div class="content">
<p> First column p </p> 
</div>
 </div>
 <div class="col-xs-3 col-md-3">
<p> Second column p </p>
<p> Second column p </p>
<p> Second column p </p>    
 </div>
 <div class="col-xs-3 col-md-3">    
<h1> Third column h1 </h1>
<p> Third column p </p> 
<h1> Third column h1 </h1>
<p> Third column p </p>     
 </div>
 <div class="col-xs-3 col-md-3">
<div class="new-content">
<p> Fourth column p </p>    
</div>  
 </div>

How can i make sure this row is vertically alligned against every column? So no matter how many elements are included in each row - they are always vertically alligned within a row height to other columns (if that helps we can assume the height of row is 70px fixed).

Please find fiddle here: https://jsfiddle.net/nkfdhpo3/

And the visualization image what I want to achieve:

Legin76 · Answer 1 · 2016-02-23T23:53:31.273

1

If I'm understanding this properly. Your issue is that the h1 tags have a 20 pixel margin at the top.

To fix use css to set them to 0.

h1 {
    margin-top: 0;
}

You may want to apply it to all header sizes.

See https://jsfiddle.net/nkfdhpo3/1/

edited Feb 23 '16 at 23:53

answered Feb 23 '16 at 23:50

Legin76

492
3
11

sorry, you got it wrong. What I want to achieve is that: first column all elements have 70px height, second column elements have 50px height, third 40px height, fourth 10 px height. I want the middle of each of the column elements to be on the same line to each other - so they are all vertically alligned. something like http://codepen.io/hashem/pen/zwJaE but not breaking the elements inside same columns (in this example they are placed next to each other) – Robert Androsz Feb 23 '16 at 23:52
1

That was copied from the example you gave. – Legin76 Feb 24 '16 at 00:38
You may want to bare in mind that this will only work on IE10 or later. If you want to do it on older browsers then you will need to use a table layout... See http://www.dummies.com/how-to/content/using-the-div-tag-to-create-tables.html for an example. – Legin76 Feb 24 '16 at 00:43
well, its first time i saw that flex attributes, now i read about it a bit and all seems understandable. thanks again for showing me the right path. – Robert Androsz Feb 24 '16 at 01:31

score 0 · Answer 2 · answered Feb 23 '16 at 23:56

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style type="text/css">
        h1, p {
            height: 70px;
            vertical-align: bottom;
            margin-top: 0;
            margin-bottom: 0;
        }
    </style>

</head>
<body>
    <div class="row">
        <div class="col-xs-3 col-md-3">
            <div>
                <h1> Fist column h1 </h1>
            </div>
            <div>
                <p> First column p </p>
            </div>
        </div>
        <div class="col-xs-3 col-md-3">
            <p> Second column p </p>
            <p> Second column p </p>
            <p> Second column p </p>
        </div>
        <div class="col-xs-3 col-md-3">
            <h1> Third column h1 </h1>
            <p> Third column p </p>
            <h1> Third column h1 </h1>
            <p> Third column p </p>
        </div>
        <div class="col-xs-3 col-md-3">
            <div>
                <p> Fourth column p </p>
            </div>
        </div>
    </div>
</body>
</html>

Yes you can style just the h1 tag. You could get more explicit about which h1 tag you want styled. http://stackoverflow.com/questions/26349987/how-do-i-apply-a-style-to-all-children-of-an-elements — kblau, Feb 23 '16 at 23:59
sorry - does not help to solve the vertical alligmnent between columns. something like: http://codepen.io/hashem/pen/zwJaE - but to not break elements inside columns into row. — Robert Androsz, Feb 23 '16 at 23:59
i have added a image of desirable result so it's more understandable. — Robert Androsz, Feb 24 '16 at 00:04

Bootstrap vertical align (to all columns) in row with multiple elements

2 Answers2