7

Olá. Estou aprendendo a usar o bootstrap. Em meus estudos me surgiu uma duvida. Se há como centralizar todo conteudo de uma div. Tenho códigos de exemplo...

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="container">
            <h1>Bootstrap <small>Meu primeiro site</small></h1>
            <p>Usando o bootstrap</p>
        </div>
    <div class="container" id="homer">
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
        <div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <img src="1.png" class="img-responsive">    
        </div>
    </div>
    <div class="container" id="planos">
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
            <p>Lorem Ipsum</p>
        </div>
        <div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
            <h3>Nossos Planos</h3>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
            <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <button class="btn btn-primary">Lorem Ipsum</button>
            </div>
        </div>
    </div>
</div>

No id="planos" tenho tres botões, quero eles um abaixo do outro, dentro da mesma row, até ai blz. Mas queria centralizar na div esses botoes... O texto "Nossos Planos" eu consigo centralizar com "text-align", mas teria uma forma de eu centralizar os botões ou qualquer outro conteudo de uma div?

desde ja grato!

3 Respostas 3

10

Tente usar flex: https://getbootstrap.com/docs/4.0/utilities/flex/

Adicione as classes abaixo:

<div class="row d-flex justify-content-center">

Imagem da página na documentação do Bootstrap 4

imagem da página na documentação do Bootstrap 4

1
  • 1
    Uma dica, a .ROW já é flex, não precisa colocar a classe d-flex nela.
    – hugocsl
    5/02/2019 às 18:14
7

Tente isso

          <div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12"  align="center">
                <button class="btn btn-primary" align="center">Lorem Ipsum</button>
            </div>

3
  • 1
    Adicione o aling="center" onde você quer centralizar, talvez você confundiu e estava escrevendo de forma errada. 22/04/2017 às 18:22
  • Deu certo. Muito obrigado pela ajuda man!
    – Gabriel
    22/04/2017 às 19:04
  • outra dica, quando vc usar o style="background-color:" vc pode adicionar cores com a grade # ou coisas tipo border-radius:25px dentro do style=" " para estilizar os botões sem precisa usar class ou abrir um css 22/04/2017 às 21:04
0

é minha primeira vez respondendo algo aqui😎, tenta o seguinte:

<div class="caixa d-flex align-items-center justify-content-center ">
  <div class="item">Flex item 1</div>
  <div class="item">Flex item 2</div>
  <div class="item">Flex item 3</div>
</div>
<br><br>

A class caixa: .caixa { background: #f5f5f5; height: 200px; }

1
  • Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    1/03/2023 às 22:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .