My checkbox is currently aligned like this -
I want to move it to the marked/pointed location below -
I'm using Bootstrap 4. Following is my HTML -
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="director">Director</label>
<div class="col-md-8">
<input class="form-control" type="text" id="director" name="director" placeholder="Director">
</div>
</div>
<div class="row form-group form-check">
<div class="col">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
<div class="row form-group">
<label class="col-md-1 col-form-label" for="year">Year</label>
<div class="col-md-8">
<input class="form-control" type="text" id="year" name="year" placeholder="Year">
</div>
</div>
As simple as
<div class="row form-group">
<div class="col-md-11 offset-md-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="released" name="released">
<label class="form-check-label" for="released">Released</label>
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/L1krytub/4/
IMO, I kind of think col-md-1 is not wide enough for your labels though.
Related
I am creating a form that is wrapped inside a card in bootstrap. It worked fine on my pc. However, my page is unresponsive when it comes to small screens because of it. What is wrong?
The code is too long to paste here but here is the code where the card is:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group row">
<label class="col-form-label col-xs-12 col-sm-2" for="tables">Number of Guests</label>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables1" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables2" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables3" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables4" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables5" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables6" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
<div class="form-group row">
<label for="time" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-12 col-md-5">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
'''
P.S. I have no CSS related to it yet.
Your problem is position row and col-*. Then I changed radio button name for same name=tables because if a different name can't changed a pill.
Here an example:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="row row-content justify-content-center">
<div class="col-xs-12 col-sm-8 ">
<div class="card ">
<h3 class="card-header badge-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form>
<div class="form-group">
<div class="row">
<div class="col-md-3 col-lg-3">
<label class="col-form-label" for="tables">Number of Guests</label>
</div>
<div class="col-md-6">
<div class="form-check form-check-inline col-xs-2">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables1">
<label for="tables1" class="fom-check-label">1</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables2">
<label for="tables2" class="fom-check-label">2</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables3">
<label for="tables3" class="fom-check-label">3</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables4">
<label for="tables4" class="fom-check-label col-xs-2">4</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables5">
<label for="tables5" class="fom-check-label">5</label>
</div>
<div class="form-check form-check-inline">
<input class="radio-inline form-check-input" type="radio" name="tables" id="tables6">
<label for="tables6" class="fom-check-label">6</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label for="time" class="col-form-label">Date and Time</label>
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
<div class="col-6 col-md-4">
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
I am using bootstrap 4 for styling purposes, for that reason. I am stuck in an alignment problem, that is I want my buttons to be parallel to the date and time fields above them.
The Blue cross in the image shows that my buttons are currently starting from there, which I don't want.
The Redline indicates that from here my buttons and all fields should start, I have tried out many combinations of offsets and flexbox from bootstrap griding, but I am unable to resolve this problem.
Attached is the code:
<form>
<div class="form-group row">
<label for="Number of Guests" class="col-md-2 col-form-label">Number of Guests</label>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">1</label>
</div>
<!-- Material inline 2 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">2</label>
</div>
<!-- Material inline 3 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">3</label>
</div>
<!-- Material inline 4 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline1" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline1">4</label>
</div>
<!-- Material inline 5 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline2" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline2">5</label>
</div>
<!-- Material inline 6 -->
<div class="form-check form-check-inline">
<input type="radio" class="form-check-input" id="materialInline3" name="inlineMaterialRadiosExample">
<label class="form-check-label" for="materialInline3">6</label>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="section" class="col-12 col-md-2 col-form-label">Section</label>
<div class="form-group row ">
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</div>
<div class="row col-md-10">
<label for="dateandtime" class="col-12 col-md-2 col-form-label">Date and Time</label>
<div class="col-6 col-md-3">
<input type="date" class="form-control" id="date" placeholder="Date">
</div>
<div class="col-6 col-md-3">
<input type="time" class="form-control" id="time" placeholder="Time">
</div>
</div>
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
I can only suggest you read this page.
https://getbootstrap.com/docs/4.0/layout/grid/
Bootstrap uses a grid system with 12 columns per row. I can see you are using different classes together which are not meant to be mixed.
For starters, your buttons are mixed with cols and rows. This is not how it is meant to be used.
<div class="row col-md-10">
<div class="form-group row">
<div class="offset-md-1 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
</div>
<div class="form-group row">
<div class="offset-md-1 col-md-12">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
I suggest you start with the simpler solution as provided in the link.
A row with 2 columns. See where that gets you.
<div class="row">
<div class="col-sm">
<button type="submit" class="btn btn-secondary">Cancel</button>
</div>
<div class="col-sm">
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
I believe you're looking for a result similar to this, not all the id's and classes may be the same but this snippet is more of an opportunity for you to learn rather than to copy. Please review my code and try to understand the differences between what you had and the example I've provided.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Number of Guests
</label>
</div>
<div class="col-md-10">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">3</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">4</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">5</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" id="materialInline1" />
<label class="form-check-label" for="materialInline1">6</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Section
</label>
</div>
<div class="col-md-10">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-2">
<label>
Date & Time
</label>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-6">
<input id="date" class="form-control" type="date">
</div>
<div class="col-6">
<input id="time" class="form-control" type="time">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<button class="btn btn-secondary" type="submit">
Cancel
</button>
<button class="btn btn-primary" type="submit">
Reserve
</button>
</div>
</div>
</form>
I hope this was helpful, best of luck!
So there's a few things as to why these elements aren't aligning properly:
You should never use .row & .col in the same class, instead you should lay them out like so:
<form>
<div class="row">
<div class="col-md-4">
I am a column on the left (4/12)
</div>
<div class="col-md-10">
I am a column on the right (10/12)
</div>
</div>
</form>
Secondly, I noticed in some places you have a row next to a column. This isn't very good practice. If you want subcolumns, this should be done like so:
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-md-4">
I am inside of a larger column
</div>
<div class="col-md-10">
So am I!
</div>
</div>
</div>
</div>
It may help you to read up a bit more on the Bootstrap 4 grid documentation, which can be found here.
I hope this helps clear a few things up, let me know if you're still a bit stuck.
try this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<form>
<div class="container-fluid">
<div class="row my-4">
<div class="col-md-2">
<label for="Number of Guests" class="col-form-label">Number of Guests</label>
</div>
<div class="col-md-10">
<div class="row">
<!-- Material inline 1 -->
<div class="form-check form-check-inline ml-3">
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio1">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1">1
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio2">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">2
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio3">
<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option2">3
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio4">
<input type="radio" class="form-check-input" id="radio4" name="optradio" value="option1" >4
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">5
</label>
</div>
<div class="form-check-inline mr-4">
<label class="form-check-label" for="radio5">
<input type="radio" class="form-check-input" id="radio5" name="optradio" value="option2">6
</label>
</div>
</div>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="section" class="col-form-label">Section</label>
</div>
<div class="col-md-10">
<div class="form-group ">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
<div class="row my-4">
<div class="col-md-2">
<label for="dateandtime" class="col-form-label">Date and Time</label>
</div>
<div class="col-md-10">
<div class="form-group d-flex">
<input type="date" class="form-control col-md-3" id="date" placeholder="Date">
<input type="time" class="form-control col-md-2 ml-3" id="time" placeholder="Time">
</div>
</div>
</div>
<div class="row my-4">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-secondary">Cancel</button>
<button type="submit" class="btn btn-primary">Reserve</button>
</div>
</div>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
I have the following form code:
<div id="site" class="container-fluid">
<div class="row">
<div class="my-4 offset-3 col-6 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-2 col-form-label">Username</label>
<div class="col-4">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username" />
</div>
</div>
<div class="form-group row">
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-4">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password" />
</div>
</div>
<div class="form-group row">
<div class="col-2"></div>
<div class="col-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want the form to be centered on the page, but instead, it's still further to the left than center as shown by this screenshot:
I thought my math was correct: Bootstrap uses a 12-column grid, so by using a 3-column offset, and a 6-column content area, I'd have essentially two 3-column gutters on each side. And by specifying the form rows to add up to 6-columns (2-column labels and 4-column inputs), the form would fill the 6-column content area, thereby automatically centering itself. But I'm obviously wrong.
So, what can I do to actually center this thing? And to make it 6 columns wide (because, judging by the screenshot, it isn't)?
The form is horizontally centered, but it's only half the width of it's parent. The issue is...
"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"
Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...
<div class="container-fluid">
<div class="row">
<div class="my-4 offset-4 col-4 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-3 col-form-label">Username</label>
<div class="col-9">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-3 col-form-label">Password</label>
<div class="col-9">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
</div>
</div>
<div class="form-group row">
<div class="col-3"></div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
https://www.codeply.com/go/b4FE5qflxS
Related: Center the content inside a column in Bootstrap 4
You can accomplish this by using col-6 and justify-content-center. All you have to do is setup the elements, rows and columns with bootstrap.
Here is an example of centering the form group:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="site" class="container-fluid">
<div class="row justify-content-center">
<div class="col-6" style="background: #eee;">
<!-- formgroup start -->
<form>
<div action="/some/path" class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="_username" required="required" autocomplete="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="_password" required="required" autocomplete="current-password" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="remember_me" name="_remember_me" value="on" />
<label class="form-check-label" for="remember_me">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" id="_submit" name="_submit">Submit</button>
</form>
<!-- formgroup end -->
</div>
</div>
</div>
Reference these pages on the Bootstrap 4 documentation
https://getbootstrap.com/docs/4.1/layout/grid/
https://getbootstrap.com/docs/4.1/components/forms/
My second week of learning and doing WebDevelopment! I have written this Bootstrap layout and the result is in the picture below.
Note the areas marked as yellow? why is that happening? How can I fix it? I know I can for example play around with margin-left ,etc.. to make it look right but I am still thinking if I define they correctly in bootstrap, it shouldn't have this problem.
Here is the Bootply to see the issue: http://www.bootply.com/zRyxHyhdbM
Here is the generated HTML code:
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-9 form-group">
<input class="col-sm-2" id="AdminPhone" name="AdminPhone" type="text" value="">
<label class="control-label col-sm-1" for="Ext">Ext</label>
<input class="col-sm-2" id="AdminExt" name="AdminExt" type="text" value="">
</div>
</div>
The misalignment is there because, the email input box is col-sm-4. To align bottom inputs we have to fit them with in col-sm-4. You can add margin-left(approx 12px) to align it but it will not be responsive.
Hence, I have changed the markup a little bit to remain responsive--
Link --- http://www.bootply.com/x0fgleMTp2
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4 multi-row">
<span class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></span>
<span class="col-sm-2"><label class="control-label" for="Ext">Ext</label></span>
<span class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></span>
</div>
</div>
Is this what you wanted to achieve? Hope it may help.
<div class="container">
<div class="row">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-inline">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-group pull-right">
<label for="exampleInputEmail3">Ext</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Ext">
</div>
</div>
</div>
</div>
The fiddle
In form I am using group-form, For some field it is not adjusting the space. Please see the image:
In the Image you can see that before contact field there is one space, and contact field is not adjusting the space, why is this happening?
<div class="col-md-6 row" id="addWarehouseForm" ng-show='!showForm'>
<form class="form-horizontal order-form" id="mapForm" name="mapForm">
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Name:*</label>
<div class="col-md-9">
<input type="text" class="form-control" required>
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">From:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
<label class="col-md-3 control-label">To:</label>
<div class="col-md-3 form-group">
<input type="checkbox" >
</div>
</div>
<div class="col-md-6 form-group">
<label class="col-md-3 control-label">Contact Person:</label>
<div class="col-md-9">
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
Maybe col-md-6 is to small and you don't have enough space?