I am looking to add a search bar with a search button inside for my project, similar to this design: https://i.sstatic.net/7f1IN.png
Below is the HTML code I currently have:
<section id="search-section">
<div class="container-fluid">
<h3 class="text-center pt-4">Search for Courses</h3>
<div class="container-fluid text-center pt-3 outbox">
<div class='row'>
<div class='col'>
<form class='order-1'>
<input type="text" class='form-control d-inline'>
<button class='btn btn-md btn-primary d-inline'>Search</button>
</form>
</div>
</div>
</div>
</div>
</section>
Here is the custom CSS applied:
#search-section form {
border: 1px solid black;
display: inline-block;
width: 900px;
padding-bottom:55px;
border-radius: 5px;
background-color:white;
height:50px;
box-shadow: 3px 4px 4px rgba(0, 0, 0, .13);
}
#search-section input[type='text'] {
width:800px;
height:50px;
border:none;
}
#search-section button {
margin-left:10px;
margin-right:5px;
}
.outbox {
height: 500px;
}
.form-control:active,
.form-control:focus {
border: none;
outline: none;
box-shadow: none;
}
The issue I am facing is that the layout works well on larger screens but becomes unresponsive on smaller devices. I aim to adjust it so that on small screens, the search bar and button stack vertically.