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>
Related
I am trying to put the select option inside the input box (left-side)
<div class="row">
<div class="col one">
<label class="label">Loan amount</label>
<div class="input-group mb-3">
<select class="form-select btn-primary input-group-text" id="basic-addon1" aria-label="Default select example">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
<input class="form-control loan" type="text" style="direction: rtl;" placeholder="0.00" aria-label="Recipient's username" aria-describedby="basic-addon2">
</div>
<label class="label" for="customRange1">Duration</label>
<div class="range">
<input type="range" class="form-range" id="customRange1" />
</div>
</div>
Here's a screenshot
here is demo code on how to put selection inside input with bootstrap v3.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<select class="form-select btn-primary input-group-text btn btn-default
dropdown-toggle" id="basic-addon1" aria-label="Default select example" data-toggle="dropdown" style="padding: 8px;">
<option selected>USD</option>
<option value="1">ETH</option>
<option value="2">USDC</option>
</select>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
</div><!-- /.row -->
</form>
</div>
</body>
</html>
I am trying to align my bootstrap form horizontally and vertically so that it is in the middle of the screen; however, I can't find any solution to help me.
I tried using these bootstrap classes, but they did not work:
d-flex align-items-center justify-content-center
Here's my form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<title>Login</title>
</head>
<body>
<div class="d-flex align-items-center justify-content-center">
<form>
<div class="mb-3 form-control-sm">
<label for="loginInputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="loginInputEmail" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-control-sm">
<label for="loginInputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="loginInputPassword">
</div>
<div class="mb-3 form-control-sm">
<label for="selectAccountType" class="form-label">Account type</label>
<select class="form-select form-select-sm" id="selectAccountType" aria-label="selectAccountType">
<option selected>Account type</option>
<option value="1">Arbetare</option>
<option value="2">Företag</option>
<option value="3">Admin</option>
</select>
</div>
<div class="mb-3 form-check form-control-sm">
<input type="checkbox" class="form-check-input" id="rememberCheck">
<label class="form-check-label" for="rememberCheck">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
Looks like parent div needs a vertical height, could use 100% of viewport height with vh-100:
<body>
<!-- vh-100 here-->
<div class="d-flex align-items-center justify-content-center vh-100">
<form>
<div class="mb-3 form-control-sm">
<label for="loginInputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="loginInputEmail" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<div class="mb-3 form-control-sm">
<label for="loginInputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="loginInputPassword">
</div>
<div class="mb-3 form-control-sm">
<label for="selectAccountType" class="form-label">Account type</label>
<select class="form-select form-select-sm" id="selectAccountType" aria-label="selectAccountType">
<option selected>Account type</option>
<option value="1">Arbetare</option>
<option value="2">Företag</option>
<option value="3">Admin</option>
</select>
</div>
<div class="mb-3 form-check form-control-sm">
<input type="checkbox" class="form-check-input" id="rememberCheck">
<label class="form-check-label" for="rememberCheck">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
It's doing exactly what is supposed to do. Your parent class: <div class="d-flex align-items-center justify-content-center"> doesn't have an height set. This means that your form will take all of its available space.
If you want to achieve to center it horizontal and vertical, you can set the height of your parent class to: 100vh.
I updated your code: https://codepen.io/Qontrol/pen/xxRqgJG
I have a page which contains several fields and a header imported. The problem is on this page, the header and first field are not visible depending on the screen size. How can I fix the code?
I am not familiar with HTML and CSS. Could you explain me what is the problem? Maybe the problem is in the HTML structure?
This the page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>My page</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div id="test">
<div id="">
<nav class="navbar navbar-light bg-light text-primary">
<div class="row">
<a class="navbar-brand">
<img src="ressources/my_logo.png" width="85" height="50" alt="Logo">
MY HEADER
</a>
</div>
</nav>
</div>
<form method="post" action="requetes/creerUtilisateur.php" role="form" id="formulaireUtiisateur" >
<h4>Créer un nouvel utilisateur :</h4>
<hr>
<input class="form-control" id="identifiant_camion" name="identifiant_camion" type="text" placeholder="Identifiant camion" required>
<hr>
<label for="type_chauffeur">Type de chauffeur</label>
<select class="form-control" id="type_chauffeur" name="type_chauffeur">
<option>Type 1</option>
<option>Type 1</option>
<option>Type 1</option>
</select>
<hr>
<input class="form-control" id="prenom_chauffeur" name="prenom_chauffeur" type="text" placeholder="Prénom" required>
<hr>
<input class="form-control" id="nom_chauffeur" name="nom_chauffeur" type="text" placeholder="Nom" required>
<hr>
<input class="form-control" id="mot_de_passe" name="mot_de_passe" type="password" placeholder="Mot de passe" required>
<hr>
<button class="btn btn-lg btn-primary btn-block" id="creer_utilisateur" type="submit">Créer utilisateur</button>
</form>
<form method="post" action="requetes/creerAnnonce.php" role="form" id="formulaireAnnonce">
<hr>
<h4>Diffuser une annonce aux utilisateurs:</h4>
<hr>
<div class="form-group">
<label for="type_annonce">Type de l'annonce</label>
<select class="form-control type_annonce" id="type_annonce" name="type_annonce">
<option>Type 1</option>
<option>Type 2</option>
</select>
<hr>
<label for="destinataire">Destinataire</label>
<select class="form-control" id="destinataire" name="destinataire">
<option>Chauffeurs 1</option>
<option>Chauffeurs 2</option>
<option>user1</option> </select>
<label for="annonce">Diffuser une annonce aux utilisateurs</label>
<textarea class="form-control" id="annonce" name="annonce" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="creer_annonce" type="submit">Diffuser l'annonce</button>
</form>
</div>
</body>
</html>
I examined the codes. I think it looks like there are problems with the opening and closing tags. No need to use extra row in navbar. Due to its structure, Bootstrap already offers the necessary css adjustments ready. I also recommend you to separate both navbar and form elements. I hope your problem is resolved now. Otherwise I will have to see the css files.
<div id="_navbar">
<nav class="navbar navbar-light bg-light text-primary">
<a class="navbar-brand">
<img src="ressources/my_logo.png" width="85" height="50" alt="Logo">
MY HEADER
</a>
</nav>
</div>
<div id="form-elements">
<form method="post" action="requetes/creerUtilisateur.php" role="form" id="formulaireUtiisateur">
<h4>Créer un nouvel utilisateur :</h4>
<hr>
<input class="form-control" id="identifiant_camion" name="identifiant_camion" type="text"
placeholder="Identifiant camion" required>
<hr>
<label for="type_chauffeur">Type de chauffeur</label>
<select class="form-control" id="type_chauffeur" name="type_chauffeur">
<option>Type 1</option>
<option>Type 1</option>
<option>Type 1</option>
</select>
<hr>
<input class="form-control" id="prenom_chauffeur" name="prenom_chauffeur" type="text" placeholder="Prénom"
required>
<hr>
<input class="form-control" id="nom_chauffeur" name="nom_chauffeur" type="text" placeholder="Nom" required>
<hr>
<input class="form-control" id="mot_de_passe" name="mot_de_passe" type="password" placeholder="Mot de passe"
required>
<hr>
<button class="btn btn-lg btn-primary btn-block" id="creer_utilisateur" type="submit">Créer utilisateur</button>
</form>
<form method="post" action="requetes/creerAnnonce.php" role="form" id="formulaireAnnonce">
<hr>
<h4>Diffuser une annonce aux utilisateurs:</h4>
<hr>
<div class="form-group">
<label for="type_annonce">Type de l'annonce</label>
<select class="form-control type_annonce" id="type_annonce" name="type_annonce">
<option>Type 1</option>
<option>Type 2</option>
</select>
<hr>
<label for="destinataire">Destinataire</label>
<select class="form-control" id="destinataire" name="destinataire">
<option>Chauffeurs 1</option>
<option>Chauffeurs 2</option>
<option>user1</option>
</select>
<label for="annonce">Diffuser une annonce aux utilisateurs</label>
<textarea class="form-control" id="annonce" name="annonce" rows="3"></textarea>
</div>
<button class="btn btn-lg btn-primary btn-block" id="creer_annonce" type="submit">Diffuser l'annonce</button>
</form>
</div>
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 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