Alinhe dois divs horizontalmente, lado a lado, no centro da página usando bootstrap css

90

Consulte o código abaixo o que eu tentei

<div class="row">
  <div class="center-block">First Div</div>
  <div class="center-block">Second DIV </div>
</div>

resultado :

First Div
SecondDiv

Saída esperada:

                      First Div        Second Div

Eu quero alinhar os dois divs horizontalmente no centro da página usando o bootstrap css. como posso fazer isso ? Eu não quero usar css simples e conceito flutuante para fazer isso. porque eu preciso fazer uso do CSS do bootstrap para trabalhar em todos os tipos de layouts (ou seja, todos os tamanhos de janela e resoluções) em vez de usar consulta de mídia.

html css twitter-bootstrap SivaRajini
fonte

Respostas:

196

Isso deve resolver o problema:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            ONE
        </div>
        <div class="col-xs-6">
            TWO
        </div>
    </div>
</div>

Leia a seção do sistema de grade dos documentos do Bootstrap para se familiarizar com como funcionam as grades do Bootstrap:

http://getbootstrap.com/css/#grid

Billy Moat
fonte
1
Obrigado. posso saber o que é col-xs-6? A contagem de div id aumentada significa como modificar isso
SivaRajini,
2
col-xs-6 aloca metade da grade de 12 colunas disponível. Se você leu os documentos do Bootstrap que vinculei em minha resposta, tudo deve fazer sentido depois de algumas tentativas e erros de sua parte :-)
Billy Moat
1
Por que xse não md?
alexander,
5
@Alexander - usar xs significa que os dois divs estarão lado a lado em todos os tamanhos de tela, de dispositivos móveis a desktops.
Billy Moat
1
Ok, então xs é para todas as soluções e, por exemplo, lg é apenas para soluções superiores?
alexander
29

Use as classes de bootstrap col-xx-#ecol-xx-offset-#

O que está acontecendo aqui é que sua tela está sendo dividida em 12 colunas. Em col-xx-#, #é o número de colunas que você cobre e compensa é o número de colunas que você deixa.

Pois xx, em um site geral, mdé preferível e se você deseja que seu layout tenha a mesma aparência em um dispositivo móvel, xsé preferível.

Com o que posso fazer de sua exigência,

<div class="row">
  <div class="col-md-4">First Div</div>
  <div class="col-md-8">Second DIV </div>
</div>

Deve fazer o truque.

Ranveer
fonte
7

Solução alternativa do Bootstrap 4 (desta forma, você pode usar divs menores do que col-6 ):

Centro de alinhamento horizontal

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Mais

ErTR
fonte
4 
<div class="container">
    <div class="row">
       <div class="col-xs-6 col-sm-6 col-md-6">
          First Div
       </div>
       <div class="col-xs-6 col-sm-6 col-md-6">
          Second Div
       </div>
   </div>

Isso resolve o problema.

Oluwasayo Babalola
fonte
3

Para alinhar dois divs horizontalmente, você só precisa combinar duas classes de Bootstrap: Veja como:

<div class ="container-fluid">
  <div class ="row">
    <div class ="col-md-6 col-sm-6">
        First Div
    </div>
    <div class ="col-md-6 col-sm-6">
        Second Div
     </div>
  </div>
</div>
Dev Rathi
fonte
0

A resposta fornecida por Ranveer (segunda resposta acima) absolutamente NÃO funciona.

Ele diz para usar col-xx-offset-#, mas não é assim que os offsets são usados.

Se você perdeu tempo tentando usar col-xx-offset-#, como fiz com base na resposta dele, a solução é usar offset-xx-#.

Michael Novello
fonte
0

Alternativa que fiz programação Angular: 

    <div class="form-row">
        <div class="form-group col-md-7">
             Left
        </div>
        <div class="form-group col-md-5">
             Right
        </div>
    </div>
Sarja Klokov
fonte
0

Eu recomendo a grade css sobre o bootstrap se o que você realmente quer é ter mais dados estruturados, por exemplo, uma tabela lado a lado com várias linhas, porque você não precisa adicionar o nome da classe para cada filho:

// css-grid: https://www.w3schools.com/css/tryit.asp?filename=trycss_grid
// https://css-tricks.com/snippets/css/complete-guide-grid/
.grid-container {
  display: grid;
  grid-template-columns: auto auto; // 20vw 40vw for me because I have dt and dd
  padding: 10px;
  text-align: left;
  justify-content: center;
  align-items: center;
}

.grid-container > div {
  padding: 20px;
}


<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css-grid

Yuqiu G.
fonte
0 
Make sure you wrap your "row" inside the class "container" . Also add reference to bootstrap in your html.
Something like this should work:
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
 <body>
     <p>lets learn!</p>
  <div class="container">
          <div class="row">
              <div class="col-lg-6" style="background-color: red;">
                  ONE
              </div>
              <div class="col-lg-2" style="background-color: blue;">
                  TWO
              </div>
              <div class="col-lg-4" style="background-color: green;">
              THREE
           </div>
          </div>
      </div>
 </body>
 </html>
Shijitha
fonte