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>
Related
I have this .cshtml page where I am just adding in a functionality. Based on a radio button selection the cards should collapse. So basically if Existing user selected then collapseone opens, if New user selected collapsetwo opens. I even want to see how can i align both the cards horizontally. Let me add snippets & images.
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked>
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
Some snaps:
current output:
Expected output:
Collapsing based on the radio button selection. Thanks for your help !!
You can try to add <div class="col-sm-6"> separately outside card1 and card2 so that you can align both the cards horizontally.And you can use js to open collapses.Here is a demo:
html:
<div class="login-box align-content-center">
<div class="login-logo">
<b>Registration</b>
</div>
<div class="card" style="width: 600px">
<div class="card-body login-card-body">
<p class="login-box-msg"></p>
<div class="card-header">
<h3 class="card-title">Select User Type</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group clearfix">
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary1" name="r1" checked onchange="show(this)">
<label for="radioPrimary1">
Existing User
</label>
</div>
<div class="icheck-primary d-inline">
<input type="radio" id="radioPrimary2" name="r1" onchange="show(this)">
<label for="radioPrimary2">
New User
</label>
</div>
</div>
</div>
</div>
</div>
<form action="~/Home/Index" method="post">
<section class="content">
<div class="row">
<div class="col-sm-6">
<div class="card card-primary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Existing Company</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse show" id="collapse1">
<div class="form-group">
<label for="inputCompanyList">Company List</label>
<select id="inputCompanyList" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Company1</option>
<option>Company2</option>
<option>Company3</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
</div>
<!-- /.card-body -->
</div>
</div>
<div class="col-sm-6">
<!-- /.card -->
<div class="card card-secondary" id="collapsetwo">
<div class="card-header">
<h3 class="card-title">Register</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body collapse" id="collapse2">
<div class="form-group">
<label for="inputName">Company Name</label>
<input type="text" id="inputName" class="form-control">
</div>
<div class="form-group">
<label for="inputDescription">Zip</label>
<input type="text" id="inputZip" class="form-control">
</div>
<div class="form-group">
<label for="inputCountry">Country</label>
<select id="inputCountry" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>India</option>
<option>Malaysia</option>
<option>Germany</option>
</select>
</div>
<div class="form-group">
<label for="inputCity">City</label>
<select id="inputCity" class="form-control custom-select">
<option selected disabled>Select one</option>
<option>Bangalore</option>
<option>Delhi</option>
<option>Mumbai</option>
</select>
</div>
<button type="submit" class="btn btn-primary btn-block">Search</button>
</div>
<!-- /.card-body -->
</div>
</div>
</div>
</section>
</form>
</div>
</div>
<!--Register Card-->
</div>
js:
<script>
function show(radio) {
if ($(radio).is(':checked')) {
if ($(radio).attr("id") == "radioPrimary1") {
$("#collapse1").addClass("show");
$("#collapse2").removeClass("show");
} else {
$("#collapse1").removeClass("show");
$("#collapse2").addClass("show");
}
}
}
</script>
result:
As title,
I tried to create a block of inputs, where each input will be just next to each other, table-like-style as in the image below.
The code for above is
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 padding-sides-none">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 padding-sides-none">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 padding-sides-none">
<input class="form-control"></input>
</div>
</div>
</div>
Select is using bootstrap-select while datepicker uses bootstrap-datetimepicker, and using Bootstrap 3.3.0.
Problem is the input border, which looks thicker when each input is on each other's side. The border side which touches the other inputs is somewhat thicker.
I want the touching sides of each input to be in border-collapse style, just like the border-collapse for table, where each border side will have the same thickness, but i just can't seem to get it done properly.
How can i achieve this?
i resolved your problem
please check below code
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.formSection .nopadding {padding: 0;}
.formSection .form-control {border-radius: 0;}
.formSection select.form-control {border-bottom: 0;border-right: 0;}
.formSection .col-xs-3 input.form-control {border-bottom: 0;}
.formSection .input-group-addon {min-width: 36px;border-right: 0; border-radius: 0;}
.formSection .input-group {display: flex;}
</style>
<div class="formSection">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker">
</select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<select class="form-control selectpicker"></select>
</div>
<div class="col-xs-3 nopadding">
<input class="form-control" />
</div>
</div>
<div class="col-xs-12 padding-sides-none">
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date- format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2 nopadding">
<div class='input-group date' style="width:100%;">
<input type='text' class="form-control" data-date-format="DD.MM.YYYY" style="width:100%;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6 nopadding">
<input class="form-control"></input>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
With few minor modifications to your code and with some css you can get the expected result, please check the working example below:
note: select-box appearance is set to none to clear the default ui provided by browser.
.row.compact-row {
margin-right: 0;
margin-left: 0;
}
.row.compact-row > [class^="col-"],
.row.compact-row > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
margin: -1px 0 0 -1px;
}
.compact-row .input-group-addon {
border-radius: 0;
}
.compact-row .form-control {
border-radius: 0;
appearance: none;
-webkit-appearance: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br/><br/>
<div class="container">
<div class="row compact-row">
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<select class="form-control selectpicker">
<option value="">Option 1</option>
<option value="">Option 2</option>
</select>
</div>
<div class="col-xs-3">
<input class="form-control" />
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date- format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-2">
<div class="input-group date">
<input type="text" class="form-control" data-date-format="DD.MM.YYYY" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="col-xs-6">
<input class="form-control" type="text" />
</div>
</div>
</div>
I want to design bootstrap form menu, but if I used view on tablet, the menu is not responsive. Please check the attached pictures below:
My code:
<fieldset>
<div class="form-group">
<div class="col-sm-offset-0 col-sm-12">
<div class="form-group input-group">
<!-- nested form-group acting like row -->
<div class="col-sm-2 ">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-6 -->
<div class="col-sm-5">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-6 -->
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-4 -->
<div class="col-sm-2">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" />
</div>
</div>
<!-- /col-sm-2 -->
<div class="col-sm-1">
<button type="submit" class="btn btn-danger btn-block">Add</button>
</div>
</div>
<!-- /nested form-group acting like row -->
</div>
<!-- /col-sm-offset-3 col-sm-9 -->
</div>
<!-- /form-group -->
</fieldset>
And, here is the link of jsfiddle
You can add col-xs-12 to each grid.
Check answer in JSFiddle: http://jsfiddle.net/1vjLcjow/1/
You are using
<div class="form-group">
<div class="col-sm-offset-0 col-sm-12">
<div class="form-group input-group">
<div class="col-sm-2 ">
By the last line your defining the Bootstrap cell on tablet-View
try to use
<div class="col-md-2 col-sm-12">
Now it will use the full parent size with the default bootstrap padding
Use Bootstrap Grid system
put your input elements inside Bootstrap Grid
if you want to learn about bootstrap grid
here is the link
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Just an example
try like this
1st use Bootstrap CDN bootstrap#4.0.0-beta (latest version )
Forms
Examples and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
you can learn it
https://getbootstrap.com/docs/4.0/components/forms/#form-controls
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
I'm using bootstrap from getbootstrap.com. I want to have a space between the SAVE and CLEAR button. I also want them to align center to be proportioned on the textboxes. How can I achieve that?
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<input class="btn-primary btn-lg col-sm-4" type="submit" value="Save">
<input type="reset" class="btn-default btn-lg col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
</form>
may be you are looking for this class="text-center" will do a trick, and some CSS for spacing
.btn-spacing
{
margin-right: 5px;
margin-bottom: 5px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="form-group">
<label for="trucktype" class="col-sm-2">Truck Type</label>
<div class="col-sm-4">
<select id="trucktype" name="trucktype" class="form-control" tabindex="2">
<option value="volvo">Service Wheels</option>
<option value="saab">Boom Truck</option>
<option value="mercedes">Crane Truck</option>
<option value="audi">Pole Trailer Truck</option>
</select>
</div>
</div>
<div class="form-group">
<label for="truckloadcapacity" class="col-sm-2">Truck load capacity</label>
<div class="col-sm-4"><input type="text" name="truckloadcapacity" id="truckloadcapacity" class="form-control" tabindex="3"></div>
</div>
<div class="form-group">
<label for="truckdesc" class="col-sm-2">Truck Description:</label>
<div class="col-sm-4"><textarea class="form-control" rows="3" id="truckdesc" tabindex="4"></textarea></div>
</div>
<div class="form-group">
<label for="truckphoto" class="col-sm-2">Truck Photo</label>
<div class="col-sm-4"><input type="file" name="file" id="truckphoto" class="form-control" tabindex="5"></div>
</div>
<!-- BUTTONS start -->
<div class="row">
<div class="col-sm-4">
<div class="form-group btn-block text-center">
<input class="btn-primary btn-lg col-sm-4 btn-spacing " type="submit" value="Save">
<input type="reset" class="btn-default btn-lg btn-spacing col-sm-4" name="clear" value="Clear">
</div>
</div>
</div>
<!-- BUTTONS end -->
For the last form-group class rename it to form-group1 and in the CSS put this. .form-group {text-align:center;}. Also, if you want space between those two buttons, do this. .btn-primary btn-lg col-sm-4 {margin:10px;}
here is an example. jsFiddle
To add space between clear and submit button you can add below CSS.
.form-group .btn-primary {
margin-right:10px;
}
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