vertically center row bootstrap 4

Question

vertically center row bootstrap 4

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I needed to center this row in the middle of the page, following the bootstrap documentation, it tells me to put align-items-center along with row, I did, but nothing has changed. my html structure is currently like this:

<!-- linha dos card -->
            <div class="row align-items-center" >
                <!-- Tab cursos conteudo -->
                <div class="tab-content ">
                    <div class="tab-pane active container " id="ingles">
                        <div class="row">
                            <div class="col col-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col col-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                                        <a href="#" class="btn btn-primary">Go somewhere</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane container" id="teenkids">

                    </div>
                    <div class="tab-pane container" id="incompany">

                    </div>
                    <div class="tab-pane container" id="espanhol">

                    </div>
                </div>
            </div>

Is this all inside a container div, some other alternative?

html css twitter-bootstrap

asked by anonymous 15.03.2018 / 23:09

2 answers

0

You can use transform , but you also need to have the body height of the viewport . You can use your own class (I put .align_vertical ).

Run the example below in fullscreen to see the effect:

html, body{
   height: 100%;
}
.align_vertical{
   top: 50%;
   transform: translateY(-50%);
   position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- linha dos card -->
<div class="row align_vertical" >
    <!-- Tab cursos conteudo -->
    <div class="tab-content ">
        <div class="tab-pane active container " id="ingles">
            <div class="row">
                <div class="col col-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col col-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
                <div class="col col-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Card title</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="#" class="btn btn-primary">Go somewhere</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane container" id="teenkids">

        </div>
        <div class="tab-pane container" id="incompany">

        </div>
        <div class="tab-pane container" id="espanhol">

        </div>
    </div>
</div>

15.03.2018 / 23:14

Capture the name of the author of a comment to be answered I can not use the Find () method using EntityFramework

score 1 · Accepted Answer

Igor's explanation may seem silly, but when you see the example you will understand better.

What is happening is that for the Son element to be vertical aligned in the middle of the Father the Father needs a definite height!

The way you did it is right even .ROW is already display:flex by default and the native class align-items-cente means align-items:center which is also right, so you have nothing to correct, you just need to a height defined in% with% Pai, since your Children are already aligned, you just do not realize this because Father does not have .ROW greater than that of children.

For the better, see the example. I put height a height of .ROW which is the total height of ViewPort and see that the items are in the middle of the page! (I've also used the class 100vh to align horizontally)

OBS:

Run on "All Page" to see the result better!

.row.red {
    background-color: red;
    height: 100vh;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />
<div class="container">
    <!-- linha dos card -->
    <div class="row red align-items-center justify-content-center" >
            <!-- Tab cursos conteudo -->
            <div class="tab-content ">
                <div class="tab-pane active container " id="ingles">
                    <div class="row">
                        <div class="col col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                        <div class="col col-4">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Card title</h5>
                                    <p class="card-text">Some quick example text.</p>
                                    <a href="#" class="btn btn-primary">Go somewhere</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane container" id="teenkids">

                </div>
                <div class="tab-pane container" id="incompany">

                </div>
                <div class="tab-pane container" id="espanhol">

                </div>
            </div>
        </div>
</div>

Official Bootstrap Flex Documentation Link 4 link