center vertically Row bootstrap 4

Asked

Viewed 3,759 times

1

I needed to center this Row in the middle of the page, following the bootstrap documentation, 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>

This is all inside a div container, some other alternative?

html css twitter-bootstrap

2 answers

1


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

What is happening is that for the Son element to be vertically aligned in the Father’s midst the Father needs a definite height!

The way you did it is right to .ROW already is display:flex by default and the native class align-items-cente means align-items:center which is also right, so have nothing to fix, you just need for a set height on .ROW Father, because your Sons are already aligned, you just don’t realize it because the Father doesn’t have a height greater than that of children.

To understand better see the example. I put in the .ROW a height of 100vh which is the total height of Viewport and see that the items were in the middle of the page! (also used the class justify-content-center to align horizontally)

OBS:

Execute in the "Whole page" to see better the result!

.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 4 Flex Documentation Link https://getbootstrap.com/docs/4.0/utilities/flex/

  • Got it, thanks, I changed the whole structure of html because it had more elements than cards, and it was the way I wanted it

  • @It’s nice to meet you. There is a lot of material about Flexbox on the internet, after a look pq is very worthwhile and is already well accepted by Browsers etc. Tmj

0

Can use transform, but it is also necessary that the body be the height of viewport. You can use your own class (I put .align_vertical).

Run the example below in fullscreen to visualize 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>
<script src="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>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.