Put input at the end of the container with Bootstrap

Asked

Viewed 109 times

2

Good evening, I’m trying to put this input at the end of this bootstrap container, but I can’t at all. I need this search input to be at the end of this 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>

If anyone can help, I’d appreciate it!

html twitter-bootstrap

2 answers

3

You can quietly have only two col-4 within a row. And to put one on each side of the container you can put ml-auto in col of input or put justify-content-between right in the row. See the official Flex documentation on Bootstrap https://getbootstrap.com/docs/4.3/utilities/flex/#Justify-content

Option ml-auto

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

Or with 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, just add the float-right code to your class. Obviously you will need to work the size of your field. I adapted it for you.

Follows: 

<!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>

Browser other questions tagged html twitter-bootstrap

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