How to vertically align a div within another div when using bootstrap row and columns?

Question

how to vertically middle the left and right divs below when using bootstrap and it should also be responsive?

<div class="test row">
    <div class="wrapper">
        <div class="left col-md-3">
            <label> Label</label>
        </div>
        <div class="right col-md-9">
            <input type="text" value="input" />
        </div>
    </div>
</div>


    .test {
        border: solid 1px;

        .wrapper {
            border: solid 1px brown;
            display: inline-block;
            vertical-align: middle;

            .left {
                border: solid 1px blue;
            }

            .right {
                border: solid 1px red;
            }
        }
    }

I've seen this but it doesn't work with bootstrap row and columns: css vertically align floating divs

This is not `css`, might be `less` or `sass`, but not `css` – Alon Eitan May 04 '17 at 16:44 — Alon Eitan, May 04 '17 at 16:44
^ That's probably why it doesn't work – Adjit May 04 '17 at 16:45 — Adjit, May 04 '17 at 16:45
it's sass yes, that's right. – Dynamic May 04 '17 at 17:35 — Dynamic, May 04 '17 at 17:35

score 0 · Answer 1 · answered May 04 '17 at 17:21

0

.test {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

answered May 04 '17 at 17:21

McHat

830
5
15

flex is not compatible with IE 9.https://www.w3schools.com/cssref/css3_pr_flex.asp – Dynamic May 04 '17 at 17:49
@Dynamic The browsers and versions you want answers to target should be in your question. – BSMP May 04 '17 at 19:29
1

Nobody cares about IE9 – McHat May 04 '17 at 19:46

How to vertically align a div within another div when using bootstrap row and columns?

1 Answers1