I trying to make a search bar with bootstrap smth similar to holidaypiratescom search field.
I need to have min width on first and last button, while letting the 3 form fields to flex. If i set the width directly with css(min-width) the button element is sticks outside of the card when i shrink the screen. Have no idea how to do it, any suggestions?
<div class="card">
<div class="search-box d-md-inline-flex">
<!-- col1 -->
<div class="card border-0">
<input class="btn btn-primary" type="text" name="" value="All categories">
</div>
<!-- col2 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
</div>
<!-- col3 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
</div>
<!-- col4 -->
<div class="card border-0">
<input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
</div>
<!-- Submit -->
<div class="card border-0">
<input class="btn btn-primary" type="submit" name="" value="go">
</div>
</div><!--/search-box -->
</div> <!-- /card -->
<div class="card container">
<div class="container">
<div class="search-box d-md-inline-flex">
<!-- col1 -->
<div class="card border-0 p-3">
<input class="btn btn-primary" type="text" name="" value="All categories">
</div>
<!-- col2 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="departure" placeholder="Departure">
</div>
<!-- col3 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="destination" placeholder="Destination">
</div>
<!-- col4 -->
<div class="card border-0 p-3">
<input class="form-control mr-2" type="text" name="type" placeholder="Travel Period">
</div>
<!-- Submit -->
<div class="card border-0 p-3">
<input class="btn btn-primary" type="submit" name="" value="go">
</div>
</div><!--/search-box -->
</div>
</div>
Use the container class to wrap the content. For responsive use lg, md, sm for the classes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.