How can I align the input fields Title and Text so that they are on the same row as the labels? I need the extra div because I'm making a form that need dynamic fields. My problem is that the input boxes appear on the next row no matter what I do.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div> <div class="row">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
Use display: inline-block; on your div
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row">
<div class="two wide column inline">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field inline">
<input type="text" name="title" placeholder="Title">
</div>
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
I used a class inline to show you on your first text input
added a class textrow to the 2 rows containing the input type="text"
and use display:inline-block on them
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.textrow {
display:inline-block;
}
</style>
</head>
<body>
<form method="post" action="http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA" name="formular" class="ui form formular" accept-charset="UTF-8" enctype="multipart/form-data">
<span class="ui two column grid">
<div class="row">
<div class="two wide column">
<div class="field">
<label>Category</label>
</div>
</div>
<div class="column field">
<div class="inline field" id="type_container">
<input type="radio" name="type" value="s">
<label>A</label>
<input type="radio" style="margin-left: 25px;" name="type" value="k">
<label>B</label>
</div>
</div>
</div>
<div style="display: block;" id="category_contents" class="maintext">
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Title</label>
</div>
</div>
<div class="column field">
<input type="text" name="title" placeholder="Title">
</div>
</div>
<div class="row textrow">
<div class="two wide column">
<div class="field">
<label>Text</label>
</div>
</div>
<div class="column field">
<input type="text" name="data" placeholder="Test">
</div>
</div>
</div>
</body>
</html>
Float:left could align them in same row, you could do that either on class .row or assign other class into it and assign float:left;
<div class="row">
........
</div>
Css
.row{
float:left;
padding-right:5px;
}
(or)
<div class="row txt">
........
</div>
Css
.txt{
float:left;
padding-right:5px;
}
Related
I am creating a Login form but I am in trouble while adding logo above the login box. I have two logos and one text between them and I need that inline with responsive behavior.
I am a PHP developer I have no idea about designing.
How can I achieve a layout like the image below?
<style>
.container {
display: flex;
text-align: center;
}
.container>.logo {
flex: 1;
/*grow*/
}
</style>
<body class="login-page">
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You need to use align-items for vertical alignment and justify-content to align horizontally.
DEMO
.container {
display: flex;
align-items: center;
justify-content: center;
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
You can also change the display behavior to be grid, and so, so you define the width in which the images should be displayed down.
.container {
display: grid;
align-items: center;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.container>.logo {
flex-grow: 1;
text-align: center;
}
<!-- Progress Bar -->
<div class="progress-wrap progress">
<div class="progress-bar progress"></div>
</div>
<!-- Header -->
<div class="header-container-wrapper">
<div class="page-center">
<a href="//www.c2perform.com">
<img src="images/C2_Perform_Logo_Colour.svg" id="header-logo" alt="C2Perform" title="C2Perform">
</a>
</div>
</div>
<!-- Body -->
<div class="body-container-wrapper">
<div class="page-center">
<div class="container">
<div class="logo">
<img src="images/ef_logo.png" width="200px" height="auto">
</div>
<div class="logo">
<h4>is now</h4>
</div>
<div class="logo">
<img src="images/C2_Perform_Logo_Colour.jpg" width="200px" height="auto">
</div>
</div>
<!-- Login -->
<div class="login-box-wrapper">
<div class="login-box">
<h3>Log In</h3>
<?php ef_print_notices(); ?>
<!-- Login Form -->
<form role="form" method="post" id="loginForm" class="form lostpass">
<div class="form-group">
<label for="inputEmail3">User Name</label>
<div>
<div>
<input type="text" class="form-control validate[required]" placeholder="Username" name="username" value="" size="30" maxlength="225" id="formfocus">
</div>
</div>
</div>
<div class="form-group">
<label for="inputPassword3">Password</label>
<div>
<div class="input-group">
<input type="password" name="password" size="30" maxlength="25" class="form-control validate[required]" id="inputPassword3" placeholder="Password" autocomplete="off" />
</div>
</div>
</div>
<div class="form-group">
<input type="hidden" name="ef_nonce" value="<?php ef_create_nonce('login_nonce'); ?>" />
<div>
<input type="submit" name="login" value="Login" class="button" />
</div>
</div>
<div class="form-group">
<div>Lost Password?</div>
</div>
</form>
</div>
</div>
</div>
</div>
There I say that, whenever the items can have at least 100px of width, the items can remain inline, but, if the items can't achieve that minimum width, those which can't, are displayed down
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
Now i want to aligned checkbox with input field horizontally. I can't figure out after searching.
Here's an example of how you could do it. I put both input fields in a row, where they occupy half of the row with <div class="col-md-6">.
Here is the code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row align-middle">
<div class="col-md-6">
<input class="form-control" id="reference" name="reference" placeholder="Reference" type="text">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<label class="checkbox-inline">
<input value="" type="checkbox">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required</div>
</div>
</div>
</div>
</div>
</div>
Here is a working example.
https://codepen.io/anon/pen/KBzLOR
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<label for="reference">Reference</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="reference" name="reference" placeholder="Reference">
<div class="input-error form-control-input" style="color: Red; display: none;">Person is required</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="">Option 1</label>
<div class="input-error form-control-input" style="color: Red; display: none;">Demo is required
</div>
</div>
</div>
</div> <!-- ROW CLOSING TAG -->
</div>
</div>
</div>
How to position input form elements with their labels like this but not using table? Labels should be centered above input elements and blocks in row should be centered within outer block.
+----------------------------------------------+
| label1 label2 label3 |
| [..........] [..........] [..........] |
+----------------------------------------------+
There could be 1, 2, 3 or more elements in the same row.
I tried this:
.outer{text-align:center;}
.inner{float:left;}
<form>
<div class="outer">
<div class="inner">
<label for="l1">label1</label><br><input id="l1" name="label1">
</div>
<div class="inner">
<label for="l2">label2</label><br><input id="l2" name="label2">
</div>
<div class="inner">
<label for="l3">label3</label><br><input id="l3" name="label3">
</div>
</div>
</form>
Place them in the same div, and center the text in that div:
.wrapper {
text-align:center;
}
.wrapper * {
text-align:left;
}
.okay {
display:inline-block;
}
.okay p {
text-align:center;
}
<div class="wrapper">
<div class="okay">
<p>text</p>
<input type='text'>
</div>
<div class="okay">
<p>text</p>
<input type='text'>
</div>
<div class="okay">
<p>text</p>
<input type='text'>
</div>
</div>
Its also possible through bootstrap framework also.. which makes responsive
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<form>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label1">label</label>
<input type="text" class="form-control" id="label1" placeholder="labeltext">
</div>
</div>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label2">label</label>
<input type="text" class="form-control" id="label2" placeholder="labeltext">
</div>
</div>
<div class="col-md-4 text-center">
<div class="form-group">
<label for="label2">label</label>
<input type="password" class="form-control" id="label2" placeholder="labeltext">
</div>
</div>
</form>
</body>
</html>
I want my input field "title" to render directly below the radio buttons, but now it is too far to the left. I need the extra div because it is a dynamic form, but I want the grid view. How can I accomplish that?
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"
rel="stylesheet" type="text/css">
<style>
textarea {
height: 600px !important width: 500 px !important
}
.inline {display: inline-block;}
</style>
<title></title>
</head>
<body>
<form accept-charset="UTF-8" action=
"http://127.0.0.1:8080/_ah/upload/ahFkZXZ-bW9udGFvcHJvamVjdHIiCxIVX19CbG9iVXBsb2FkU2Vzc2lvbl9fGICAgICAgLwLDA"
class="ui form formular" enctype="multipart/form-data" id="formular"
method="post" name="formular">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Category</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"></span>
<div class="inline field" id="type_container">
<span class="ui two column grid"><input name="type" type=
"radio" value="s"> <label>A</label> <input name="type"
style="margin-left: 25px;" type="radio" value="k">
<label>B</label></span>
</div><span class="ui two column grid"></span>
</div>
</div>
<div class="maintext" id="category_contents" style="display: block;">
<span class="ui two column grid"></span>
<div class="row">
<span class="ui two column grid"></span>
<div class="two wide column inline">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Title</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field inline">
<span class="ui two column grid"><input name="title"
placeholder="Title" type="text"></span>
</div><span class="ui two column grid"></span>
<div class="two wide column">
<span class="ui two column grid"></span>
<div class="field">
<span class=
"ui two column grid"><label>Text</label></span>
</div><span class="ui two column grid"></span>
</div>
<div class="column field">
<span class="ui two column grid"><input name="data"
placeholder="Test" type="text"></span>
</div><span class="ui two column grid"></span>
</div>
</div>
</form>
</body>
</html>
I want to increase the space between the Title label and the Title input field. How can I do it?
I had checked your HTML form it has some unwanted columns. Now I have updated the form and I created two demos and I used form elements and grid layout for two columns form.
Semantic-UI Basic Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="example">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="field">
<label>First Name</label>
<input type="text" name="first-name" placeholder="First Name">
</div>
<div class="field">
<label>Last Name</label>
<input type="text" name="last-name" placeholder="Last Name">
</div>
<div class="field">
<label>Categories</label>
</div>
<div class="field">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Semantic-UI Two Column Form:
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css" rel="stylesheet"/>
<div class="ui text container">
<h4 class="ui header">Semantic UI Form</h4>
<form class="ui form">
<div class="ui grid">
<div class="four wide column ">
<label>First Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="First Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<label>Last Name</label>
</div>
<div class="twelve wide column">
<input type="text" name="first-name" placeholder="Last Name">
</div>
</div>
<div class="ui grid">
<div class="four wide column ">
<div class="field">
<label>Categories</label>
</div>
</div>
<div class="twelve wide column">
<div class="inline fields">
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency" checked="checked">
<label>A</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>B</label>
</div>
</div>
<div class="field">
<div class="ui radio checkbox">
<input type="radio" name="frequency">
<label>C</label>
</div>
</div>
</div>
</div>
</div>
<button class="ui button" type="submit">Submit</button>
</form>
</div>
Try this with your label
<label style="padding-right:50px">Title</label>
Also you can use table in your design to make your page design more efficient.
I recommend using Bootstrap - it will take you no more than 30 mins to understand and will make your website page/website layout so easy see - http://getbootstrap.com/
Also, means you website will be mobile and tablet friendly.
just add the files to your website -http://getbootstrap.com/getting-started/ (under first heading Bootstrap CDN).
then paste in the relevant form layout you would like (you can tweak these) - http://getbootstrap.com/css/#forms (under css heading)
see the grid layout system - http://getbootstrap.com/css/#grid
See all the things you can do just pasting in the bootstrap code: buttons, icons, etc (all listed under components - http://getbootstrap.com/components/
Re my answer - have made your view using bootstrap as per my steps 1 - 4. Took me 7 mins, not even 10 :-) ..paste the below into an index file to test/see what it looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Category</label>
<div class="col-sm-6">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
</div>
</div>
<div class="form-group">
<label for="inputTitle" class="col-sm-2 control-label">Title</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputTitle" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="inputText" class="col-sm-2 control-label">Text</label>
<div class="col-sm-6">
<textarea class="form-control" rows="3" placeholder="Text" id="inputText"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-6">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Suppose I have the following HTML using Bootstrap to style:
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-sm-3">
<div class='form-group'>
<label>First Name</label>
<input></input>
</div>
<div class='form-group'>
<label>Last Name</label>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
<div class="col-sm-3">
<div class='form-group'>
<input type="checkbox"></input>
</div>
<div class='form-group'>
<input></input>
<input></input>
</div>
</div>
</div>
</div>
</form>
You can see the code here. What I am trying to do is set up a even 3 x 3 matrix with the input(checkbox included) with position (1,1) missing.
In addition to this I want the labels to sit to the left of the text inputs and remain there without shifting to the top of the first set of inputs.
You could do this by setting a minimum width on form-group and using that class consistently across the columns. Because the size needed to keep the label next to the input, you'd also need to adjust the column width; use md instead of sm.
.form-group {
min-width: 20em;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<form class="form-horizontal">
<div class='container'>
<div class="row">
<div class="col-md-3">
<div class='form-group'><br /></div>
<div class='form-group'>
<label>First Name</label>
<input />
</div>
<div class='form-group'>
<label>Last Name</label>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
<div class="col-md-3">
<div class='form-group'>
<input type="checkbox" />
</div>
<div class='form-group'>
<input />
</div>
<div class='form-group'>
<input />
</div>
</div>
</div>
</div>
</form>