user3670236 user3670236 - 1 year ago 74
CSS Question

HTML Bootstrap search bar

I'm trying to make a search bar for an ebay-type website, but for some reason, the submit button takes the column size of the previous asset, and also goes directly under this asset.
enter image description here

CODE



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>
<div class="container">
<form class="form">

<!-- SEARCH -->
<div class="form-group">
<div class="col-sm-6 form-group NoPadding">
<input type="text" class="form-control">
</div>

<!-- CATEGORIES -->
<div class="col-sm-2 form-group NoPadding">
<select name="Categories" class="form-control">
<option value="0">All Categories</option>
<option value="1">Electronics</option>
<option value="2">Food</option>
<option value="3">Furniture</option>
</div>

<!-- BUTTON -->
<div class="col-sm-1 form-group NoPadding">
<input type="submit" class="form-control">
</div>

</form>
</div>
</body>




Omi Omi
Answer Source

You forgot to close <select>. You can reduce border-radius of input to get it more closer like ebay.

.NoPadding{
padding:0 !important;
}

input,select{
border-radius:1px !important
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body>
	<div class="container">
		<form class="form">
			
			<!-- SEARCH -->
			<div class="form-group">
			<div class="col-sm-6 form-group NoPadding"> 
					<input type="text" class="form-control">
			</div>
			
			<!-- CATEGORIES -->
			<div class="col-sm-3 form-group NoPadding"> 
				<select name="Categories" class="form-control">
					<option value="0">All Categories</option>
					<option value="1">Electronics</option>
					<option value="2">Food</option>
					<option value="3">Furniture</option>
          </select>
			</div>
			
			<!-- BUTTON -->
			<div class="col-sm-2 frm-group "> 
				<input type="submit" class="form-control btn-primary">
			</div>
			
	    	</form>
	     </div> 
    </body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download