I want to make below search box with select box in center of the page and all the field are stick to each other. I tried using margin-left. But i think this is not proper way to do this. please help me to do this to get all are in center with responsive.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 catnames">
<select name="cat" class=" search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 catnames catnames-arrow ">
<select name="cat" class="search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 catquery">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off">
</div>
<div class="col-md-1 catsubmit">
<div class="row">
<i class="fa fa-search"></i>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
You can do by applying some Bootstrap classes
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12">
<form action="#" method="get" id="search_mini_form">
<div class="col-md-1 col-sm-2 form-group col-sm-offset-2 col-md-offset-3 col-xs-12 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-1 col-sm-2 form-group catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-md-4 col-sm-4 form-group col-xs-12 catquery">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" class="form-control" >
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
<div>
</div>
</div>
try to change classes of whole container:
<div class="col-md-12 ">
to:
<div class="col-md-4 col-md-offset-4">
You can also add styles for every element inside, like this:
text-align: center;
margin: 0 auto;
I made a little fiddle to demonstrate how to do this: https://jsfiddle.net/2nhzytu5/
To make the fields float in the center regardless desktop or mobile version, you can use col-offset-xx (Learn more here)
Then, to make them stick together, you should use bootstrap's input-group class. (More info here )
So this would be your base:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<!-- Your fields here -->
</div>
</div>
</form>
Now simply add your fields:
<form class="form-horizontal">
<div class="col-lg-offset-3 col-lg-6">
<div class="input-group">
<select id="yourId" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select id="yourId2" class="selectpicker form-control" title="Please select">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="text" class="form-control" name="snpid" placeholder="Test">
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
</div>
</form>
Avoid using elements here as they cannot be fully styled in WebKit browsers.
Is this what you want ?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<style type="text/css">
</style>
<div class="col-md-12 ">
<div class="row">
<form action="#" method="get" id="search_mini_form">
<div class="col-sm-offset-2 col-sm-2 catnames">
<select name="cat" class="form-control search-categories">
<option>Categories</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option>Hourly</option>
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
</select>
</div>
<div class="col-sm-4 catquery ">
<div class="input-group">
<input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" />
<div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div>
</div>
</div>
<div id="search_autocomplete" class="search-autocomplete"></div>
</form>
</div>
</div>
here is jsbin
Related
I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.
In the code below I would like the three selects to be on the same line as the input-group.
I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="input-group col-xs-4">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
</body>
</html>
Have you tried using a table?
<table>
<tbody>
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</td>
<td>
<select>
<option>Select1</option>
</select>
</td>
<td>
<select>
<option>Select2</option>
</select>
</td>
<td>
<select>
<option>Select3</option>
</select>
</td>
</tr>
</tbody>
</table>
You can try using the row class and not the form group class, tried it with Boostrap 3.
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-6">
<select>
<option>Select1</option>
</select>
<select>
<option>Select2</option>
</select>
<select>
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
https://jsfiddle.net/FJB_ZA/Lmzubdw3/
You need to make changes in your structure to make it fit in one line.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<h1>Form test</h1>
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-2 control-label">First input</label>
<div class="col-xs-10">
<div class="form-group">
<div class="col-xs-3">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some button
</button>
</span>
</div>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select1</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control">
<option>Select3</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 control-label">Second input</label>
<div class="col-xs-10">
<p class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">
some other button
</button>
</span>
</p>
<select>
<option>some other option</option>
</select>
</div>
</div>
</div>
Hey i have a problem with my button location on my site
<form id="filter_view" method="POST"> {% csrf_token %}
<div class="form-row">
<div class="form-group col-md-1">
<label for="select_id">option</label>
<select id="select_id" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-1">
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="form-group col-1 align-bottom">
<button type="submit" class="btn btn-secondary align-bottom">submit</button>
</div>
</div>
</form>
resulting in this site:
Website view
but i want the submit button in the row of my input-box, any ideas?
Use flexbox and align the button to the bottom of the column.
View fullscreen to see or visit this Codepen
.flex-bottom {
display: flex;
align-items: flex-end;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="form-row">
<div class="form-group col-md-1">
<label for="inputState">option</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-1">
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
</div>
<div class="form-group col-1 flex-bottom ">
<button type="submit" class="btn btn-secondary ">submit</button>
</div>
</div>
</form>
You can add "form-inline" class inside form tag and add label without text in last form group.
.form-inline .form-control {
margin-left:5px;
margin-right:5px;
}
.form-inline .btn {
margin-left:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-inline">
<label for="select_id">option</label>
<select id="select_id" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
<label for="inputZip">write</label>
<input type="text" class="form-control" id="inputZip">
<button type="submit" class="btn btn-secondary align-bottom">submit</button>
</form>
</body>
</html>
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.
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>
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>
You simply didn't close select and div.form-group
Also, I would suggest adding col-md-#, where # is a number.
See here for the closed tags: https://jsfiddle.net/8z7cL5x0/
Try wrapping your columns in a div with class "row":
<body>
<div class="container">
<div class = "row">
<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>
</div>
</body>
I have a filter form at the top which looks like this
and like this in the Mobile Layout
This is my code
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
What can I do with this? I would like it if the search box and the 2 buttons come beside it on the same line without being floated to right but the mobile layout is all messed up. Any suggestions are welcome. Thanks!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
UPDATE
Thank you all for your answers. I have upvoted the answers that helped me get what I wanted. However, I ended up doing something of my own.
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="input-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="<?php echo ($this->input->get('search',true)); ?>">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</span>
</div>
</div>
set width:auto;display: inline-block; to input text field
check this fiddle:
https://jsfiddle.net/DTcHh/30416/
Try change to only "col-sm-6" and the class named "pull-right" and add "float-right".
Look at this: https://jsfiddle.net/ceqvpu01/1/
input[type="text"] {
display: inline-block;
width: 100%;
}
#media (min-width: 768px) {
.float-right{
float: right;
}
}
thats because you put the 'col-xs-12' on both form. so each form will takes all of the grid system (12) and the second form will be put below the first because there is no more grid for it. try changing your col-xs-12 to col-xs-6 for both form
Like this? I added col-sm-6 to both, and changed col-xs-12 to col-xs-6
<form class="navbar-form " role="search" id="searchform" method="get" action="">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group ">
Results per page:
<select class="form-control" name="perpage" id="perpage" onchange="this.form.submit()">
<option value="5" selected="">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="form-group pull-right">
<input type="text" class="form-control" name="search" id="search" placeholder="Search Keyword" value="">
<button type="submit" class="btn btn-default">Go</button>
<button type="button" onclick="resetform()" class="btn btn-default">Reset</button>
</div>
</div>
</div>
</form>
I was trying to put required attribute to select. I tried many ways and it doesn't seem to work.
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required="required">
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
You may use the boostrap validator:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/1000hz/bootstrap-validator/master/dist/validator.min.js"></script>
<form data-toggle="validator" role="form">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12">Select Category</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" name="Category" required>
<option value="">Select</option>
<option value="2">Library Staff</option>
<option value="3">Non-Teaching Staff</option>
<option value="4">System Admin</option>
<option value="5">Teaching Staff</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
try;
<select class="form-control" name="Category" required>