2

Boa noite, estou tentando colocar esse input no final desse container com bootstrap, mas não consigo de jeito nenhum. Eu preciso que esse input de search fique no final dessa row.

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-4">
        <h1>Teste</h1>
      </div>
      <div class="col-4">
          <input type="search" placeholder="Buscar nome..." class="form-control">
      </div>
    </div>

  </div>

</body>
</html>

Se alguém puder ajudar, agradeço!

2 Respostas 2

3

Vc pode tranquilamente tem apenas duas col-4 dentro de uma row. E para colocar uma de cada lado do container vc pode colocar ml-auto na col do input ou colocar justify-content-between direto na row. Consulte a documentação oficial do Flex no Bootstrap https://getbootstrap.com/docs/4.3/utilities/flex/#justify-content

Opção ml-auto

<div class="col-4 ml-auto">
    <input type="search" placeholder="Buscar nome..." class="form-control ">
</div>

Ou com class="row justify-content-between"

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<div class="container">
    <div class="row justify-content-between">
        <div class="col-4">
            <h1>Teste</h1>
        </div>
        <div class="col-4">
            <input type="search" placeholder="Buscar nome..." class="form-control ">
        </div>
    </div>

</div>

0

Julio, apenas acrescente o código float-right em sua class. Obviamente vc precisará trabalhar o tamanho do seu campo. Adaptei pra vc.

Segue:

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
  <div class="container">
<div class="row">
  <div class="col-4">
    <h1>Teste</h1>
  </div>
  <div class="col-8">
      <input type="search" placeholder="Buscar nome..." class="form-control float-right" style="width:200px;">
  </div>
</div>

  </div>

</body>
</html>

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 .