how to add input and button in the same line - CSS

Bamagujen_Bahaushe
April 8, 2023
193 views
3 votes
4 Answers

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/[email protected]/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>

Tags: bootstrap-5 css

Answers

You can try with splitting them into columns, by adding class row to form and div’s with class col-auto

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

Use Bootstrap’s input groups:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

You can follow this simple code and add here some bootstrap 5 class

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

Flexbox.

.my-flex {
display: flex;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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" class="my-flex">
                    <input type="text" name="search_query" class="form-control">
                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                </form>
            </div>
        </div>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.

how to add input and button in the same line – CSS

Answers