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>
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 multiple form components in a row, however I got some wired behaviors. Here is what I am trying to achieve:
As you could see, I would like to have the set mark up checkbox, label, amount markup input (number) and markup type (select) in the same line, and here is what I have tried:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div id="price_selection_page" class="border">
<form class="mt-3 p-2 d-flex">
<div class="input-group d-flex w-25">
<input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="input-group d-flex">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
But this is what I got when I tried to render it in the browser:
As you could see, the checkbox and the label are in the same line, but the number input is on a new line, and the select box is also on a new line instead of showing up in the same line as with the number input field.
I am using bootstrap 5 and I would really appreciate some help please!
Try use "d-flex" to flex out the content into one row and remove some of your unnecessary tags.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
<div class="input-group d-flex w-25">
<input class="form-check-input me-3" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="input-group d-flex">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</form>
Try with:
<form class="mt-3 p-2">
<div class="form-row">
<div class="col">
<input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="col input-group">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</div>
</form>
Look at https://getbootstrap.com/docs/4.0/components/forms/ for further information.
Edit
<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="container">
<form class="mt-3 p-2">
<div class="form-row row">
<div class="col-3">
<input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
<label class="form-check-label" for="set-mark-up-check">Set Markup</label>
</div>
<div class="col-6">
<div class="input-group">
<div class="input-group-prepend">
<input class="form-input" type="number" value="" id="mark-up-amount-input">
</div>
<select id="mark-up-select" class="custom-select">
<option value="percentage">% By Percentage</option>
<option value="amount">% By Amount</option>
</select>
</div>
</div>
</div>
</form>
</div>
</body>
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
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 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