Justify-content-center is not centering content on my bootstrap

Asked

Viewed 2,564 times

1

I have the following code structure

<div id="container" class="container-fluid">
<div class="row align-items-center justify-content-center">
    <div class="col-2">
        <figure id="logomarca">
            <img src="imagens/logomarca.png" alt="logomarca">
        </figure>
        <nav>
            <ul class="nav">
                <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Quem somos</a></li>
                <li class="nav-item"><a class="nav-link" href="#">O que fazemos</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
            </ul>
        </nav>
    </div>
    <div class="col-10">
        <p>dwadwadwa</p>
    </div>
    </div
twitter-bootstrap bootstrap-4 flexbox

1 answer

2


In fact the classes are working yes, as you can see in the image.

inserir a descrição da imagem aqui

Now fixing the code

But only to do what you want you need to put the classes in col-* and not in the .row. Besides, your div class .container-fluid was open without closure...

In col-* you need to declare first that she has display flex with class d-flex, then you align the content inside them with align-items-center and justify-content-center

See the result in the code below:

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

    <div id="container" class="container-fluid">
        <div class="row align-items-center justify-content-center">
            <div class="col-2 d-flex align-items-center justify-content-center">
                <figure id="logomarca">
                    <img src="imagens/logomarca.png" alt="logomarca">
                </figure>
                <nav>
                    <ul class="nav">
                        <li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Quem somos</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">O que fazemos</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
                    </ul>
                </nav>
            </div>
            <div class="col-10 d-flex align-items-center justify-content-center">
                <p>dwadwadwa</p>
            </div>
        </div>
    </div>

Browser other questions tagged twitter-bootstrap bootstrap-4 flexbox

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