<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.0/css/bulma.min.css"
/>
</head>
<style>
input, label{
display: block;
}
#drive_access{
margin-left: 270px;
}
#submit{
margin-left: 600px;
}
</style>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="name">Name</label>
<input type="text" placeholder="Enter First Name" id="name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="last_name">Last Name</label>
<input type="text" placeholder="Enter Last Name" id="last_name" class="input is-info"/>
</div>
<div class="column is-narrow">
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" id="email" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="contact_number">Contact number</label>
<input type="tel" placeholder="Enter contact number" id="contact_number" class="input is-info"/>
</div>
<div class="column is-narrow">
<label>Department</label>
<p class="control">
<span class="select is-info">
<select>
<option value=""> Please choose department</option>
<option value="Administration">Administration</option>
<option value="Electronics">Electronics</option>
<option value="IT Department">IT Department</option>
<option value="">Library</option>
<option value="Mechanical">Mechanical</option>
</select>
</span>
</p>
</div>
<div class="column">
<label for="employment_type">Employment type</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Choose employment types</option>
<option value="Contract">Contract</option>
<option value="Internship">Internship</option>
<option value="Permanent">Permanent</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-narrow">
<label for="preferred_username">Preferred username</label>
<input type="text" id="preferred_username" class="input is-narrow is-info" placeholder="Enter preferred username"/>
</div>
<div class="column is-one-fifth">
<label for="starting_date">Starting date</label>
<input type="date" id="starting_date" class="input is-narrow is-info"/>
</div>
<div class="column is-one-fifth">
<label for="ending_date" id="end_date_label">Ending date</label>
<input type="date" id="ending_date" class="input is-info"/>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-two-fifths">
<label for="affiliation">Affiliation</label>
<p>
<span class="select is-info">
<select>
<option value="">Select employee affiliation</option>
<option value="Rookie">Rookie</option>
<option value="Veteran">Veteran</option>
</select>
</span>
</p>
</div>
<div class="column is-two-fifths">
<label for="computation_device">Computation device</label>
<p class="control">
<span class="select is-info">
<select>
<option value="">Select computation device</option>
<option value="Laptop">Laptop</option>
<option value="Desktop">Desktop</option>
</select>
</span>
</p>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-one-fifth">
<label for="mailing_list">Mailing list</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="Enter names of mailing lists user needs to be added on" id="mailing_list"
class="textarea is-info"></textarea>
</p>
</div>
<div class="column is-one-fifth" id="drive_access">
<label for="drive_access">Specify shared drive access</label>
<p class="control">
<textarea rows="4" cols="15" placeholder="specify shared drive access names here"
id="mailing_list" class="textarea is-info" ></textarea>
</p>
</div>
</div>
</div>
<div class="columns">
<div class="column is-pulled-right">
<button class="button is-primary" id="submit">Submit</button>
</div>
</div>
</div>
</section>
My problem is the UI does not respond well when screen changes. For example if the developer tools tab is opened and you stretch it to the left, the elements just float about. The second issue is i would to have the edges of the elements align. I tried looking into Bulma classes to fix this but no luck. Please help
.section{
display: flex;
flex-direction: column;
align-items: center;
}
Related
I'm working on a wire frame and trying to create the HTML based on it. This is the structure I'll be require to build:
This is what I have done so far but the alignment is not correctly rendered. I have used the two column grid approach and then used the form-inline classes, however the label and text boxes are not getting aligned in one row.:
<style>
.body {
padding: 1px 1px 1px 1px;
}
.column {
float: left;
width: 50%;
}
.customLegend {
border: 1px solid #000;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0;
left: 1em;
padding: 0 .5em;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container body">
<fieldset class="customLegend">
<legend>Sources</legend>
<div class="row">
<!-- Left Section -->
<div class="column">
<div class="form-inline">
<div class="form-inline">
<label>Initial Reporter </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">First Name </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Phone Number </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Title </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Address </label>
<textarea class="form-control"> </textarea>
</div>
<div class="form-group">
<label class="lbl">Qualification </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group">
<label class="lbl">Primary Source </label>
<input type="checkbox" class="form-control" />
</div>
<div class="form-group">
<label class="lbl">P I Usage </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
</div>
<!-- Right Section -->
<div class="column">
<div class="form-inline">
<div class="form-group">
<label class="lbl">Ok to Contact? </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
<div class="form-group">
<span class="form-inline">
<label>Last Name </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Email </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Company </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Country </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Zip/Postal </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>City </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>State/Region </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Phone Number 2 </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>FAX </label>
<input type="text" class="form-control" />
</span>
</div>
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Create New Source</button>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Check the Jsfiddle here
You need to replace the column by col-6 and the hierarchy of the bootstrap divs should change to following
<div class="container">
<div class="row">
<!-- Left Section -->
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>
I Have the following bootstrap form broken into groups.
I am trying to add a checkbox but, it doesn't seem to left align correctly.
How can i make the check box left align and under the "Max Amount" ?
and i want to add radio button to the next group.
My Fiddle
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
The problem is in form-control class which has width:100%
Solution
Add another class after form-control class
<input class="form-control auto-width pull-left" id="" name="" class="pull-left" type="checkbox" />
.auto-width {
width: auto;
}
Just try by removing "form-control" class from Checkbox
In this way I normally achieve it...just use column nesting
check the snippet I have nested class="col-sm-2" column inside class="col-sm-6" and added a margin-top
#check {
margin-top: -5px;
}
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body >
<div class="panel panel-primary">
<div class="panel-heading"> Information</div>
<div class="panel-body">
<!---->
<fieldset>
<legend> Borrowing Power</legend>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Desired Amount</label>
<!--<input class="form-control" id="user_password" name="user[password]" size="30" type="password" /> -->
<input name="desiredamount" id="" class="form-control input-normal desiredLoan">
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation" class="">Max Loan Amount</label><br>
<div class='col-sm-2' id="check">
<input class="form-control pull-left" id="" name="" class="pull-left" type="checkbox" />
</div>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
<!---->
</div>
<div class="container-fluid"><!-- Row 2 -->
<!--
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="mobile">Mobile Phone</label>
<input name="mobile" id="mobile" class="form-control input-normal">
<p class="help-block">The users mobile phone number.</p>
</div>
</div>
<div class="col-lg-4" id="userFormColumn2">
<div class="form-group">
<label for="level">User Access Level</label>
<select name="level" id="level" class="form-control input-normal">
<option value="1">1</item>
<option value="2">2</item>
</select>
<p class="help-block">The users system access level.</p>
</div>
</div> --->
<!---->
</div>
</div>
</body>
</html>
Hope this helps!
I have created an html form using bootstrap columns to get the desired layout. It's about where I want it for desktop but it piles together on mobile. I don't believe any of the code I've used is working with bootstrap. Here is the form itself:
<div class="center_div">
<div class="row">
<div class="form-group col-xs-5">
<h3>First Name</h3>
<input name="fName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Last Name</h3>
<input name="lName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Company Name</h3>
<input name="compName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Business Type</h3>
<select class="form-control" style="width: 100%;" name="businessNeeds">
<option value="">Select...</option>
<option value="IntDesign">Interior Designer</option>
<option value="Ecom">E-Commerce Only</option>
<option value="Retail">Retail Store Only</option>
<option value="RetailEcom">Retail and E-Commerce</option>
<option value="Mult">Multiple Locations</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-10">
<div class="input-group input-group-xs">
<h3>Address</h3>
<input class="form-control input-lg" name="address" type="text" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>City</h3>
<input name="city" type="text" />
</div>
<div class="form-group col-xs-2">
<h3>State</h3>
<select name="state">
<option value="">Select...</option>
/*Took out states for space*/
</select>
</div>
<div class="form-group col-xs-3">
<h3>Zip</h3>
<input name="zip" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Phone</h3>
<input name="phone" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Email</h3>
<input id="email" name="uemail" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<h3>Create a Username</h3>
<input name="uname" type="text" />
</div>
<div class="form-group col-xs-3">
<h3>Create a Password</h3>
<input class="form-control" style="width: 100%;" name="pass" type="password" />
</div>
<div class="form-group col-xs-3">
<h3>Confirm Password</h3>
<input class="form-control" style="width: 100%;" name="ConfPass" type="password" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Sales Tax ID</h3>
<input name="taxID" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Upload Tax ID Certificate</h3>
<input name="fileUpload" type="file" />
</div>
</div>
<div class="buttonHolder">
<input type="submit" value="Submit" /></div>
</div>
</form>
The CSS:
.center_div{
padding-left:150px;
position:relative;
width:100%;
margin:0 auto;
}
#media only screen and (max-width: 600px){
.mainForm{
}
.center_div{
width:100%;
margin:0 0 15px 0;
}
.center_div label{
width:100%;
float: none;
margin:0 0 5px 0;
}
.mainForm is a blank div around the form, there is nothing else on the page. I left the CSS pretty barebones but is there a fairly simple way to make this respond better on mobile with bootstrap? Even if all the fields just sat on top of one another.
All your bootstrap rows must be inside a .container div, otherwise they will not work as expected.
In order to stack form elements on smaller screens and have (say) two columns (6 grid columns each, really) on bigger resolutions, you need to apply two classes to your cols.
<div class="form-group col-xs-12 col-sm-6">
Essentially you're telling bootstrap that from the smallest resolution (xs) on the element should span 12 grid columns, while for small resolutions (sm) on the element should span 6 grid columns.
On this codepen I added these classes so you can see the solution at work. Hope it helps.
<html>
<head>
<title>
Mobile form responsvie
</title>
<style>
<style>
.row
{
display: flex;
flex-direction: column;
}
.form-group.col-xs-5 {
margin-left: 30px;
}
.input-inline
{
width:50%;
}
.input-inline
{
width:50%;
}
.center_div {
padding-left: 50px;
padding-right: 50px;
}
#media only screen and (max-width: 720px)
{
.input-inline
{
}
h3{
color:grey;
}
.form-group.col-xs-5
{
margin-left: 0px;
}
.center_div label{
width:100%;
float: none;
margin:0 0 5px 0;
}
.buttonolder input {
margin-left: 18%;
cursor: pointer;
}
</style>
</style>
</head>
<body>
<form>
<div class="center_div">
<div class="row">
<div class="form-group col-xs-5">
<h3>First Name</h3>
<input class="input-inline" name="fName" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Last Name</h3>
<input class="input-inline" name="lName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Company Name</h3>
<input class="input-inline" name="compName" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Business Type</h3>
<select name="businessNeeds">
<option value="">Select...</option>
<option value="IntDesign">Interior Designer</option>
<option value="Ecom">E-Commerce Only</option>
<option value="Retail">Retail Store Only</option>
<option value="RetailEcom">Retail and E-Commerce</option>
<option value="Mult">Multiple Locations</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Address</h3>
<input class="input-inline" class="form-control input-lg" name="address" type="text"/>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>City</h3>
<input class="input-inline" name="city" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>State</h3>
<select name="state">
<option value="">Select...</option>
/*Took out states for space*/
</select>
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Zip</h3>
<input class="input-inline" name="zip" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Phone</h3>
<input class="input-inline" name="phone" type="text" />
</div>
<div class="form-group col-xs-5">
<h3>Email</h3>
<input class="input-inline" id="email" name="uemail" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Create a Username</h3>
<input class="input-inline" name="uname" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Create a Password</h3>
<input class="input-inline" class="form-control" name="pass" type="password" />
</div>
<div class="form-group col-xs-5">
<h3>Confirm Password</h3>
<input class="input-inline" class="form-control"name="ConfPass" type="password" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Sales Tax ID</h3>
<input class="input-inline" name="taxID" type="text" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-5">
<h3>Upload Tax ID Certificate</h3>
<input class="upload-file" name="fileUpload" type="file" />
</div>
</div>
<div class="row">
<div class="buttonolder">
<input class="upload-file" type="submit" value="Submit" style="margin-left: 21%;margin-top: 3%;text-align: center;padding: 8px;padding-left: 27px;padding-right: 27px;cursor: pointer;">
</div>
</div>
</div>
</form>
</body>
</html>
I'm having some trouble with a Twitter Bootstrap form alignment. I have a checkbox that causes the below div's to incorrectly line up with the grid because it's height is only 70px tall when the div next to it is 74px. I could add the CSS to force it to the pixel height needed (see id "test") but I don't want this stay a fixed height when content responds for smaller screens. What would be the best way to fix this?
<div class="container-fluid appointment">
<div class="container">
<div class="row">
<h2 class="text-center">Appointment Request</h2>
<form>
<div class="col-sm-4">
<div class="form-group">
<label for="">Phone Number:</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="col-sm-8">
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="col-sm-7">
<div class="form-group">
<label for="petname">Pet's Name:</label>
<input type="text" class="form-control" id="petname">
</div>
</div>
<div class="col-sm-5" id="test">
<div class="form-group">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="pettype">Pet Type:</label>
<select class="form-control" id="pettype">
<option>Select Pet Type...</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="breed">Breed Type:</label>
<select class="form-control" id="breed">
<option>Select Breed...</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="age">Pet Age:</label>
<select class="form-control" id="age">
<option>Select Pet Age...</option>
<option value="less than 1">Less than 1 year</option>
<option value="1">1 Year</option>
</select>
</div>
</div>
<div class="col-sm-12 text-center">
<div class="form-group">
<button type="submit" class="btn btn-lg">Send Appointment</button>
</div>
</div>
</form>
</div>
</div>
</div>
just add a class "clearfix" for the div containing the checkbox as
<div class="col-sm-5" id="test">
<div class="form-group clearfix">
<label>Is your pet neutered or spayed?</label>
<div class="checkbox">
<label for="neutered"><input type="checkbox" id="neutspay">Neutered/Spayed</label>
</div>
</div>
</div>
I'm trying to do that bootstrap model:
But the alignement isn't working well because there's a dropdown list (It's not all elements of the same type).
This is what I came for:
This is my fiddle:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="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>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label class="col-xs-3 control label">Prefix:</label><br />
<div class="col-xs-5 selectContainer">
<select name="prefix" class="form-control">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<label for="fname">First Name:</label>
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="col-xs-4">
<div class="row">
<div class="form-group">
<label for="lname">Last Name:</label>
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<div class="row">
<label for="suffix">Suffix:</label>
<input type="text" class="form-control" id="suffix" name="suffix">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label for="info">Information:</label>
<textarea class="form-control" rows="4" id="info" name="info"></textarea>
</div>
</div>
</div>
</div>
</body>
</html>
How can I fix this alignment problem?
Try something like this: http://www.bootply.com/TvgQizWRZw
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-6">
<label for="prefix">Prefix</label>
<select name="prefix" class="form-control" id="prefix">
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Ms">Ms</option>
</select>
</div>
<div class="col-md-6">
<label for="tbLastName">Last name</label>
<input type="text" class="form-control" id="tbLastName">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="tbFirstName">First Name</label>
<input type="text" class="form-control" id="tbFirstName">
</div>
<div class="col-md-6">
<label for="tbSuffix">Suffix</label>
<input type="text" class="form-control" id="tbSuffix">
</div>
</div>
</div>
<div class="col-md-4">
<label for="tbInfo">Information</label>
<textarea rows="4" cols="50" class="form-control" id="tbInfo">Test</textarea>
</div>
</div>
</div>