justify-content-center is not centralizing the contents in my bootstrap

Navigation
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
    
asked by anonymous 28.09.2018 / 03:55

1 answer

1

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

Nowfixingthecode

Butjusttodowhatyouwant,youneedtoputtheclassesincol-*andnot.row.Also,itsdivofclass.container-fluidwasopenwithoutclosing...

In%w/oyouneedtofirstdeclarethatithascol-*withclassdisplayflex,thenyoualigncontentinsidethemwithd-flexandalign-items-center

Seetheresultinthecodebelow:

<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>
  • Official Bootstrap Flex Documentation: link
  • Official Bootstrap Grid documentation: link
28.09.2018 / 04:10
CSS image gallery Pattern Builder Multiple Returns