Make a Horizontal Search Form fill Column Space Bootstrap - html

Question

I'm using bootstrap to create a webpage and I've got two rows inside a fluid container. I've created a horizontal search area (form) above the second row. It does not expand to the entire width of the column, and I cannot figure out why or what class I have to apply to get it to expand to the width of the entire column.
Here is my code:
<div class ="container-fluid">
<div class ="row" style ="margin-right: 15%"> <!-- Row for location search -->
<div class="col-sm-4" style="max-width:400px;">
</div>
<div class="col-sm-8"> <!-- For direction search button -->
<form action="" class="form-inline" role="search">
<div class="form-group-stylish">
<button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button>
<input type="text" class="form-control" placeholder="Enter Start Location">
<input type="text" class="form-control" placeholder="Enter Destination">
</div>
</form>
</div>
</div> <!-- End row for location search -->
<div class = "row top-buffer-small" style="margin-right: 15%">
<div class = "col-sm-4" style="max-width:400px;">
<div class ="img" style="border: 5px solid #e83724; border-radius: 20px; height: 100px; background-color: white;">
<h2 class ="text-center" style="margin-top: 5px;">Filter Search Results</h2>
</div>
</div>
<div class="col-sm-8">
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.google.com/maps/embed/v1/directions?origin=Madison+WI
&destination=Milwaukee+WI&key=XXXXXXXX">
</iframe>
</div>
</div>
</div> <!-- End Row for Search filters and map-->
</div> <!-- End container for search filters and map -->
Here is a screenshot of what it currently looks like (as I've omitted my API key) and an arrow drawn to show what I would like to accomplish. I would like the start and end location search boxes to remain the same size, just both expanded the same amount to fill the remainder of the column.
Screenshot of what page currently looks like:
How can I accomplish this? Thanks!

Answer 1

Try to devide button, both input into three columns as col-sm-8 has been defined above:
The value of col-sm- depends on what you need. You can set it free.
<div class="form-group-stylish">
<div class="col-sm-1">
<button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Enter Start Location">
</div>
<div class="col-sm-7">
<input type="text" class="form-control" placeholder="Enter Destination">
</div>

Answer 2

Do two changes.
1. Remove class form-inline from form tag.
Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, it reset to width: auto;. Depending on your layout, additional custom widths may be required.
2. Add row and column to your form structure.
<form action="" role="search">
<div class="form-group-stylish row">
<div class="col-sm-2">
<button class="btn btn-primary" type="submit" style="max-width: 120px;">Search</button>
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter Start Location">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="Enter Destination">
</div>
</div>
</form>
Make sure you add row before using col. Otherwise your code may run, but you are not following BootStrap standards( .container>.row>.col ).