I have a problem with bootstrap form-horizontal, the problem is that I have a horizontal form with two "form-group col-sm-6" groups.
It looks that there is a blank space after the two groups (please see the blue arrow down).
I need to remove that space so the two form-groups are filling the space.
The code I use is:
<!-- 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">
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading"> <b class="text-capitalize">CIF Profile</b>
<div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div>
</div>
<div class="panel-body">
<div class="form-horizontal col-sm-12" style="background-color:red;">
<div class="form-group col-sm-6" style="background-color:blue;">
<div class="col-sm-6">
<label class="control-label">Customer Id</label>
</div>
<div class="col-sm-6">
<input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly">
</div>
</div>
<div class="form-group col-sm-6" style="background-color:white;">
<div class="col-sm-6">
<label class="control-label">Mnemonic</label>
</div>
<div class="col-md-6">
<input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10">
</div>
</div>
</div>
</div>
</div>
</section>
Bootstrap have a padding 15px by default, just add this css, and delete form-group
.form-horizontal.col-sm-12 {
padding-left: 0px !important;
padding-right: 0px !important;
}
<!-- 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">
<section class="animated fadeInUp">
<div class="panel panel-default col-md-12">
<div class="panel-heading"> <b class="text-capitalize">CIF Profile</b>
<div class="actions pull-right"> <i class="fa fa-chevron-down"></i> </div>
</div>
<div class="panel-body">
<div class="form-horizontal col-sm-12" style="background-color:red;">
<div class="col-sm-6" style="background-color:blue;">
<div class="col-sm-6">
<label class="control-label">Customer Id</label>
</div>
<div class="col-sm-6">
<input id="txtCustomerId" name="txtCustomerId" class="form-control" value="" maxlength="6" readonly="readonly">
</div>
</div>
<div class="col-sm-6" style="background-color:white;">
<div class="col-sm-6">
<label class="control-label">Mnemonic</label>
</div>
<div class="col-md-6">
<input id="txtMnemonic" name="txtMnemonic" class="form-control" placeholder="" value="" maxlength="10">
</div>
</div>
<div>I see the red</div>
</div>
</div>
</div>
</section>
Related
I am using bootstrap 3.3.7 panels. When I click on the icon to slide up the panel everything works fine panel hides and animations are smooth. Please see the following example:
$('.panel-collapse').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
The problem occur once I set the panel height the panel it self does not hides anymore apart from the panel content body which gets slide up. Please see the following:
$('.panel-collapse').on('click', function (e) {
var $this = $(this);
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
}
});
.product-Section-panel
{
min-height: 280px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
The current approach that I did to fix this is to set the height on the panel-body as follows <div class="panel-body product-Section-panel"> but than the animation is not smooth anymore. How can I set panel height while allowing to collapse the panel and animation is smooth.
Try the following:
$('.panel-collapse').on('click', function (e) {
var $this = $(this);
var prodSectionPanel = $this.parents('.product-Section-panel')
var prodSectionPanelHeight = 0;
if (!$this.hasClass('panel-collapsed')) {
$this.parents('.panel').find('.panel-body').slideUp();
$this.addClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-up').addClass('fa-chevron-down');
} else {
$this.parents('.panel').find('.panel-body').slideDown();
$this.removeClass('panel-collapsed');
$this.find('i').removeClass('fa-chevron-down').addClass('fa-chevron-up');
prodSectionPanelHeight = '280px';
}
document.documentElement.style.minHeight = prodSectionPanelHeight;
});
.product-Section-panel {
transition: min-height .4s;
will-change: min-height;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/
font-awesome/5.15.2/css/all.min.css"/>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-6 col-xl-3">
<div class="panel panel-primary form-horizontal product-Section-panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel 1
<a class="pull-right"><span class="panel-collapse"><i class="fa fa-chevron-up"> </i></span></a>
</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
<div class="form-group">
<label class="control-label">Label1</label>
<input type="text">
</div>
</div>
</div>
</div>
</body>
</html>
I have 2 HTML containers, but because I have span elements followed by a text input (I think this is the issue?), I'm unable to get the content in the containers centered how I want. Is there a way to push the margin or padding in on these elements? Or is there a simpler way. In the JSFiddle, they spans are pretty large, but I'd like them to be around the size of the picture below. I'm using bootstrap.
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
JSFIDDLE: https://jsfiddle.net/oy4u1sm9/4/
Idealformatting (without the large span element, of course)
Using <span> tags as labels is not best practice as they are inline elements. Try to always use <label> tags. Here is your code tweaked to match your desired styling. More comments in the fiddle below.
<div class="row mb-5">
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
</div>
<div class="col-sm-6" align="center">
<label class="h3">TITLE</label>
<div class="input-group">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div>
</div>
I made some comments in the code for clarity. Here you go:
https://jsfiddle.net/hmLpdnqa/
You just included wrong bootstrap file. Try this and see your issue resolved or not.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<!-- ROW 1 -->
<div class="row">
<div class="col" align="center">
<h2>TITLE</h2> </div>
<div class="col" align="center">
<h2>TITLE</h2></div>
</div> <!-- ROW 1 -->
<!-- ROW 2 -->
<div class="row">
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text" required>
</div>
<div class="col-sm" align="center">
<input type="text" class="form-control" id="text" placeholder="text">
</div>
</div> <!-- ROW 2 -->
<br>
<div class="container" >
<div class="row">
<div class="col-sm">
<h2>TITLE</h2>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">text</span>
</div>
<input type="text" class="form-control" id='text' readonly>
</div>
</div>
</div>
</div>
I have created a form inside a Panel in bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
When I run it, the panel spans from the far left to the far right. How can I get some spacing on the left and right so that panel boundary can be easily distinguished from the browser boundary.
Just wrap your panel within a container-fluid class
example snippet
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="container-fluid">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
With custom css--
.wrapper {
margin-left: 2%;
margin-right: 2%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<form>
<div class="wrapper">
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</div>
</form>
Just add some margin to the .panel
.panel { margin-left: 10px; margin-right: 10px; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<form>
<div class="panel panel-primary">
<div class="panel-heading">Search</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label2</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label3</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label4</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
</div>
</div>
</form>
I am using a login page in my application. Each time when I am opening the login page through my main navigation page the login page is displayed on the left corner. I am using a bootstrap css. Here is the fiddle ["https://jsfiddle.net/vkcc1c20/"]
<div class="container">
<div class="row">
<div id="login-page-wrapper">
<form name="form" ng-submit="vm.login()" role="form">
<div class="row" ng-show="login_banner_msg">
<div class="col-md-4"> </div>
<div class="col-md-4">
<div class="row">
<div class="col-md-1 col-xs-3">
</div>
<div class="col-md-10 col-xs-6">
<div class="frm-banner frm-banner-red">
{{login_banner_msg}}
</div>
</div>
<div class="col-md-1 col-xs-3">
</div>
</div>
</div>
<div class="col-md-4"> </div>
</div>
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Hi I added a new id cont to center it so it could be :
#cont{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="cont" class="container">
<div class="row">
<div id="login-page-wrapper">
<div ng-controller="mainController">
<div class="col-md-4 login-div">
<div class="panel panel-default">
<div class="panel-heading">
<strong class="">Login</strong>
</div>
<div class="panel-body">
<form id="form-login_v2" ng-submit="vm.login()" class="form-horizontal">
<input type="hidden" name="login" value="yes">
<div class="row">
<div class="clearfix"></div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="email">User ID</label>
<div class="form-group ">
<div class="input-group ">
<div class="input-group-addon"> <i class="glyphicon glyphicon-envelope"></i> </div>
<input class="form-control" id="email"
name="email"
type="text"
data-validation="[EMAIL]" ng-model="userData.userid" tabindex="0">
</div>
</div>
</div>
<div class="col-md-10 col-sm-10 col-xs-12">
<label for="password" style="display:block;">Password <strong class="pull-right">Forgot Password ? </strong></label>
<div class="form-group ">
<div class="input-group col-md-12 col-xs-12 col-sm-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-asterisk"></i></div>
<input class="form-control" id="password"
name="password"
type="password"
data-validation="[NOTEMPTY]" ng-model="userData.password" tabindex="0">
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group " style="margin-bottom:5px;padding-left:126px;">
<button type="submit" class="btn btn-primary custButton" ng-click="login_click()">Login</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
class="col-xs-4 col-xs-offset-4"
will do the trick for you. Add this to your div like this:
<div class="col-xs-4 col-xs-offset-4 login-div">
//remaining structure
</div>
I have the following fiddle which is a cut down sample of a page I am working on utilising bootstrap for the styling.
NOTE: When viewing the fiddle, make sure the Result pane is wide enough to have the first 3 controls on a single row!
The issue that I have is that the 'Free Text Search' row of controls seem to be offset to the right more than I would like. I want the 'Free Text Search' label to be directly under the 'Store Number' label and the same width. Along with that I wand the corresponding input to start at the beginning of the 'Store Number' input and finish at the end of the 'Parent Category' select.
I can't quite see where I have gone wrong with the bootstrap classes.
Here is my html:
<form class="form-horizontal">
<h3 style="padding-left: 20px; padding-bottom: 20px">A pointless title</h3>
<div class="row form-group">
<div class="col-md-4">
<label for="storeNumber" class="col-sm-4 control-label">Store Number</label>
<div class="col-sm-6">
<input id="storeNumber" class="form-control" type="text"
name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="col-md-4">
<label for="actionedTo" class="col-sm-4 control-label">Actioned To</label>
<div class="col-sm-6">
<select id="actionedTo" class="form-control"></select>
</div>
</div>
<div class="col-md-4">
<label for="parentCategory"
class="col-sm-4 control-label">Parent Category</label>
<div class="col-sm-6">
<select id="parentCategory" class="form-control"></select>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-md-12">
<label for="freeTextSearch"
class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text"
name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</form>
Your general structure is counter to your classes. You're structuring for your inputs to position inline but you're using form-horizontal and you're nesting columns.
You don't need any of that markup for this. Just use the form-group class and columns.
See working Snippet.
*The CSS I've added isn't needed to make everything work but I believe it looks better on larger viewports with it.
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</form>
</div>
Alternative Layout for Multiple Controls
#media (min-width: 768px) {
.lg-group {
margin-top: 25px;
}
h3.form-title {
margin-bottom: 40px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header"> <a class="navbar-brand" href="#">Bootstrap 3 Header</a>
</div>
</nav>
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-12">
<h3 class="form-title">A Pointless Title</h3>
</div>
</div>
<form class="myForm">
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="lg-group">
<div class="form-group">
<label for="storeNumber" class="col-sm-2 control-label">Store Number</label>
<div class="col-sm-2">
<input id="storeNumber" class="form-control" type="text" name="storeNumber" placeholder="Store Number" />
</div>
</div>
<div class="form-group">
<label for="actionedTo" class="col-sm-2 control-label">Actioned To</label>
<div class="col-sm-2">
<select id="actionedTo" class="form-control" name="actionedTo"></select>
</div>
</div>
<div class="form-group">
<label for="parentCategory" class="col-sm-2 control-label">Parent Category</label>
<div class="col-sm-2">
<select id="parentCategory" class="form-control" name="parentCategory"></select>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="form-group lg-group">
<label for="requestNumber" class="col-sm-2 control-label">Free Text Search</label>
<div class="col-sm-10">
<input id="freeTextSearch" class="form-control" type="text" name="requestNumber" placeholder="Free Text Search" />
</div>
</div>
</div>
</div>
</form>
</div>