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