I created a html card following this tutorial. Then i added to my page (which uses bootstrap 3.0). However, the text is not wrappering like it does in the tutorial. Does anyone know why this is or how to fix this?
Picture
https://i.stack.imgur.com/cD9dy.png
Html snippet
<div class="row">
<div class="col-lg-2">
<div class="form-group ">
<card [visable]="obj.one" [width]="100" [image]="obj.two" [header]="project.manager?.name" [content]="obj.four"></card>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label ">
Project Name
</label>
<div class="input-group">
<input class="form-control" type="text" [value]="project.name" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Project Number
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Project Creator
</label>
</div>
</div>
<div class="col-lg-3">
<div class="form-group">
<label class="control-label ">
Team
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Team ID
</label>
<div class="input-group">
<input class="form-control" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label ">
Team Manager
</label>
</div>
</div>
<div class="col-lg-3">
<div>
<div class="card" style="width: 100%;">
<div class="container">
<h4><b>Project Details</b></h4>
<p >One team of students collected data from a consumer Internet website with automobile specificatins.The summary slide shows the results of their linear regression analysis on car engine horsepower and average miles per gallon (MPG) ratings</p>
</div>
</div>
</div>
</div>
</div>
css
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
Bootstrap container is conflicting with with "tutorial" container.
Use a special container class for the card...
<div class="col-lg-3">
<div>
<div class="card" style="width: 100%;">
<div class="card-container">
..
</div>
</div>
</div>
</div>
.card-container {
padding: 2px 16px;
}
Related
I need to style a bootstrap 3 form such as there is a border around each form field and label. Something like this -
I am not able to make out how to go about doing this. Here is my attempt to achieve this (Please expand the output so that you see 2 columns in each row) -
https://jsfiddle.net/yy7ddtby/15/
.custom-label {
line-height: 3.3em !important;
}
.label-size {
/*font-size: 10px;*/
line-height: 2.1em;
/*padding-right:0px;
width: 10%;*/
}
.border {
color: #555;
border: 1px solid #ccc;
border-radius: 1px;
padding: 5px;
}
<div class="container-fluid">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="name" class="col-md-4 label-size custom-label border">Name</label>
<div class="col-md-8 border">
<input type="text" id="name" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="gender" class="col-md-4 label-size custom-label border">Gender</label>
<div class="col-md-8 border">
<select id="gender" class="form-control input-field">
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-4 label-size custom-label">Functions</label>
<div class="checkbox col-md-8 label-size">
<label>
<input type="checkbox" id="Func1"> Func1</label>
<label>
<input type="checkbox" id="Func2">Func2</label>
<label>
<input type="checkbox" id="Func3">Func3</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="country" class="col-md-4 label-size custom-label">Country</label>
<div class="col-md-8">
<select id="country" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="options" class="col-md-4 label-size custom-label">Options</label>
<div class="col-md-8">
<select id="options" class="form-control input-field">
<option>Select</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="addr" class="col-md-4 label-size custom-label">ADDR</label>
<div class="col-md-8">
<input type="text" id="addr" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="author" class="col-md-4 label-size custom-label">Author</label>
<div class="col-md-8">
<input type="text" id="author" class="form-control input-field">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="range1" class="col-md-4 label-size custom-label">Range1</label>
<div class="col-md-3">
<input type="text" id="range1" class="form-control input-field">
</div>
<div class="col-md-2">
to
</div>
<div class="col-md-3">
<input type="text" id="range2" class="form-control input-field">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ip" class="col-md-4 label-size custom-label">IP</label>
<div class="col-md-8">
<input type="text" id="ip" class="form-control input-field">
</div>
</div>
</div>
</div>
</form>
</div>
I have tried to style the first row using a custom CSS called border. However, it doesn't look the way I want it to. The border it generates is quite untidy and not the way in the image.
How can I go about achieving the expected UI with borders?
I would actually give the entire row the border, then use left/right borders on the form elements to divide them up.
Here's the basic idea:
.row {
border: 2px solid black;
}
.form-group > label {
border-right: 2px solid black;
}
input {
border-right: 2px solid black;
}
revised demo
I am aware this is very basic but I have been trying so many ways of removing the white space on the right side of my page yet still it's been a little problem for me as a learner. The sign_in and paratext are inline as shown but when I used set the margins and paddings to 0 to remove the white space from the right side of my page, the sign in (which is the login form) moves below the paratext instead of staying inline.
Here you go. Hope this helps you.
body {
margin: 0;
padding: 0;
}
.sign_in {
display: inline-block;
width: 55%;
font-size: 3vw;
margin-left: 30px;
}
.paratext {
display: inline-block;
font-size: 3vw;
width: 35%;
color: #008B8B;
}
<html>
<head>
<title>Example</title>
</head>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure. </p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1 style="color:#008B8B; font-weight: 900; font-size: 40px;" > <b>Sign In </b></h1><br>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me" >
<label >Remember Me </label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<p class="text-right"><span class="forgot-password"><a style=" color:#008B8B;" href="#">Forgot password?</a></span></p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<button class="button" type="submit" style="font-weight: 900; background-color:#008B8B;" ><span>Login </span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<p class="text-right">
<span><a style="color:#008B8B;" href="#">Already a member?</a></span></p>
</div>
</div>
</div>
</form>
</div>
</body>
<html>
I have refactored your code by removing irrelevant row classes and inline styles. You also specified sign_in{width:70%}, but haven't specified what is 100%, so I added body{width:100%}. In addition to that, I commented out certain paddings and margins you can see that in the example below.
body{width: 100%;}
.paratext, h1, a{color:#008B8B;}
h1{
font-weight: 900;
font-size: 40px;
}
.form-group button{
font-weight: 900;
background-color:#008B8B;
}
.sign_in {
width: 70%;
/*margin-right: -30%;*/
}
.paratext {
display: inline-block;
/*padding-top: 250px;*/
font-size: 16px;
word-wrap: break-word;
/*width: 600px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="paratext">
<h1>Get ready to sell Smarter, Better, Faster.</h1>
<p>Dosty CRM is the latest e-customer relationship management system being used currently by tech companies. Easy and Secure.</p>
</div>
<div class="sign_in" id="sign_in">
<form (ngSubmit)="submitForm(l)" #l="ngForm">
<h1>Sign In</h1>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email" placeholder="First Name" [(ngModel)]="login.email" required>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="password" [(ngModel)]="login.password">
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input type="checkbox" value="Remember Me" id="remember_me">
<label>Remember Me</label>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right forgot-password">Forgot password?</p>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="button" type="submit">Login</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<p class="text-right">Already a member?</p>
</div>
</div>
</div>
</form>
</div>
</body>
Try this code example in your project and see if the problem remains. If you still have a problem then you need to update you question with the rest of the codebase you have.
I am entertaining the idea of using bootstrap for all future pages on our internal website. The following image looks and works great on all sized devices.
The issue is that I used one row containing two horizontal labels and inputs for each line. When the bootstrap resizes, the rows are merged. The issue is that the two columns are separate subjects and when the device view port is smaller, the right column should position itself underneath the left column. Instead they merge. Left column item 1 is first and then right column item 1 is second. I need it too be all of left column and then all of right column.
Any direction on this issue would be very helpful.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background-color: #efefef;
text-align: center;
border: 2px solid blue;
}
h1{
margin: auto;
}
.body{
border: 2px solid blue;
margin-top: 10px;
}
.inline{
display: inline-block;
}
.no-margin{
margin: 0px;
}
label{
width: 140px;
margin-right: 5px;
text-align: left;
white-space: nowrap;
}
input{
margin-left: 0px;
margin-top: 10px;
}
.left_margin{
margin-top: 10px;
margin-left: 230px;
}
#media screen and (min-width: 768px){
label{
text-align: right;
}
input{
margin-left: 10px;
margin-top: 10px;
}
}
<div class="col-lg-12 header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-inline" role="form">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 inline">
<label for="input_test" class="control-label inline">Label</label>
<div class="form-group">
<div>
<input class="form-control sm-margin" type="text" id="input_test" placeholder="Bootstrappin">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<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>
The id must be unique.
col-lg-6 col-md-6 col-sm-12 col-xs-12 is equivalent to col-md-6.
Wrap up left and right columns of fields by two <div class="col-md-6"></div> blocks.
I guess you need to use the Horizontal form instead of the Inline form.
Place labels into <div class="form-group"></div> blocks.
Make labels left-floating and use the hidden: overflow; trick to fill all the remaining space by the non-floating block.
Please check the result:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.header{
text-align: center;
border: 2px solid blue;
}
h1.lead {
margin: 0;
padding: 12px;
}
.body{
border: 2px solid blue;
margin-top: 10px;
padding-top: 12px;
}
.form-horizontal .form-group {
margin-left: 0;
margin-right: 0;
}
.form-horizontal .control-label {
display: block;
float: left;
margin-bottom: 0;
margin-right: 20px;
padding-top: 7px;
white-space: nowrap;
}
.form-horizontal .form-control {
width: 100%;
}
.fill-free-space {
overflow: hidden;
}
<div class="header"><h1 class="lead">Test</h1></div>
<div class="body">
<div class="container">
<form class="form-horizontal" role="form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="input_left_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_1" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_2" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_3" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_4" placeholder="Left">
</div>
</div>
<div class="form-group">
<label for="input_left_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_left_5" placeholder="Left">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="input_right_1" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_1" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_2" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_2" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_3" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_3" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_4" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_4" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_5" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_5" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_6" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_6" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_7" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_7" placeholder="Right">
</div>
</div>
<div class="form-group">
<label for="input_right_8" class="control-label">Label</label>
<div class="fill-free-space">
<input class="form-control" type="text" id="input_right_8" placeholder="Right">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<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>
I am trying to set 3 different textfield width according to the wrapping div ( col-sm-3, col-sm-1, col-sm-2 ) , but they area ll the same width ..
<div class="panel row">
<div class="col-sm-5" style="background-color: yellow; padding: 0;">
<div class="form-group form-group-sm">
<label class="control-label col-sm-2">Label</label>
<div class="col-sm-3" style="padding-top: 4px;">
<input type="text" name="dynamic[1][]" value="1">
</div>
</div>
</div>
<div class="col-sm-3" style="background-color: grey; padding: 0">
<div class="form-group form-group-sm">
<label class="control-label col-sm-2">Type</label>
<div class="col-sm-1" style="padding-top: 4px;">
<input type="text" name="dynamic[2][]" value="1">
</div>
</div>
</div>
<div class="col-sm-4" style="background-color: green; padding: 0">
<div class="form-group form-group-sm">
<label class="control-label col-sm-2">Format</label>
<div class="col-sm-2" style="padding-top: 4px;">
<input type="text" name="dynamic[3][]" value="1">
</div>
</div>
</div>
</div>
Is there any simple way to have 2 textfields with these different widths ?
thanks for feedback
You can use bootstrap class form-control to inputs (example here http://www.bootply.com/mdTjf7rYks) or if you don't want to, just simply set width of inputs to 100% (example http://www.bootply.com/EXMQ9OJ7Jy)
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>