Bootstrap 4 row does not align to middle

Question

I'm trying to get the content in <div class="col-md-2 col-lg-2"> in the middle to align to middle, but to no avail. I know that setting the columns to a size of 2 will not fill the space of the grid system of 12 columns, but I want it to be aligned to the middle regardless.

<div class="row">
    <div class="col-lg-12">
        <h1 class="content-header">Header</h1>
        <div class="row">
           <div class="col-md-2 col-lg-2">
               content
           </div>
           <div class="col-md-2 col-lg-2">
             content
           </div>
        </div>
    </div>

maybe this help u.. set to that row div `display: block;` and `margin: 0 auto;` — liborza, Sep 29 '16 at 16:13
I am not sure what you your question is, but I think `text-align:center;` will set your text in the center of your div. — Max, Sep 29 '16 at 16:36
@M.Arendsen Im looking to get my content aligned to the middle, yes text-xs-center will only set text to middle, but even with align: middle doesnt get my content center in the page hmmmm — Programmer, Sep 30 '16 at 02:28
@Programmer are you trying to get the text in the center, or are you trying to get the div in the center? — Max, Sep 30 '16 at 06:41

score 0 · Answer 1 · edited May 23 '17 at 10:31

Bootstrap 4, like Bootstrap 3, uses offset to move or center entire columns. So in your case use offset-*-4 to move it over 4 cols in the 12 col grid.

<div class="row">
        <div class="col-lg-12 text-xs-center">
            <h1 class="content-header">Header</h1>
            <div class="row">
                <div class="col-md-2 col-lg-2 offset-md-4 offset-lg-4">
                    content
                </div>
                <div class="col-md-2 col-lg-2">
                    content
                </div>
            </div>
        </div>
    </div>

To center inline elements (like text), use: text-center (this was text-center in 3.x)

To center block elements (like DIV) or columns, use: mx-auto (this was center-block in 3.x)

Demo: http://www.codeply.com/go/Wxzbd3a6og

There are also new responsive alignment classes in Bootstrap 4 so you can align differently at various breakpoints.

this doesnt works well for me, i've dynamic content, which means there's unknown
content — Programmer, Oct 01 '16 at 02:23

score 0 · Accepted Answer · answered Oct 01 '16 at 02:24

0

found a css trick that works

.row-centered {
    text-align: center;
}

.col-centered {
    display: inline-block;
    float: none;
    /* reset the text-align */
    text-align: left;
    /* inline-block space fix */
    margin-right: -4px;
}

answered Oct 01 '16 at 02:24

Programmer

307
3
17

Bootstrap 4 row does not align to middle

2 Answers2