how to add input and button in the same line

April 9, 2023

how can I add input and button to be on the same line using bootstrap-5, what I’m trying here it is not working, is there anyway to style it or add some bootstrap-5 markup?

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
 
 
 
 <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <form action="" method="get">
                    <input type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>
            </div>
        </div>
    </div>

>Solution :

Use Bootstrap’s input groups:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <form action="" method="get">
        <div class="input-group">
          <input type="text" class="form-control">
          <button class="btn btn-sm btn-primary" type="submit">Search</button>
        </div>
      </form>
    </div>
  </div>
</div>