Put form fields two per line in bootstrap form - html

I am using Twitter Bootstrap (version 3) and in the form, I am trying to put these fields two per line, but i cant figure it out how to do it.. Here you can see it in bootply what i have done..
<div class="col-md-10">
<div class="form-group">
<legend>1st sth</legend>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
</div>


You have to include the rows in a div. <div class="rows">.
<div class="col-md-10">
<div class="form-group">
<legend>1st sth</legend>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
<div class="row">
<div class="col-md-2">
<select class="form-control" id="select">
<option value="1">1</option>
<option value="1">1</option>
<option value="1">1</option>
</select>
</div>
<div class="col-md-3">
<input type="text" class="form-control" id="inputName" placeholder="name">
</div>
</div>
</div>
</div>
bootply demo

Related

Aligning input field with selection field

I'm building a web application using html, java, javascript and css with bootstrap. Here is one section of that application which gives me troubles:
What I'm trying to accomplish here is to move this input field bellow the first row to be just bellow the first selection field. Something like this:
By the way new rows are added dinamically when user clicks on + button. And now here is that section written in html:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<div class="form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>

By default, bootstrap takes 12 columns in one row, and if you try to use more than 12 columns, it automatically places the extra content in next row. Below is the snippet to achieve the result:
<div class="row">
<div class="form-group col-xs-5 formular-element-width-fix">
<label class="control-label formular-element-label" for="element<%=elementNumber%>">Element
<%=elementNumber %>:</label>
<div class="input-group">
<input type="text" class="form-control width100" id="element<%=elementNumber%>" name="element<%=elementNumber%>" placeholder="Enter a label">
</div>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100" onchange="changeValidations(this); showRadioLabels(this)">
<option value="Textbox" selected>Textbox</option>
<option value="Checkbox">Checkbox</option>
<option value="Radio buttons">Radio buttons</option>
</select>
</div>
<div class="form-group col-xs-1 radio-number-hide">
<select class="form-control width100" onchange="changeRadioLabels(this)">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="form-group col-xs-2">
<select class="form-control width100">
<option value="None" selected>None</option>
<option value="Mandatory">Mandatory</option>
<option value="Numeric">Numeric</option>
<option value="Email">Email</option>
<option value="Date">Date</option>
</select>
</div>
<!--here completing 12 columns of first row-->
<div class="col-xs-2 form-group btn-group">
<button class="btn btn-add-element" onclick="addElement()">+</button>
</div>
<!--for next row, leave first 5 columns blank, which correspond to label and
textfield, Added css here-->
<div class="form-group col-xs-5 formular-element-width-fix"> </div>
<div class="form-group col-xs-5 formular-element-width-fix radio-input radio-input-hidden">
<div class="input-group">
<input type="text" class="form-control width100" id="new-element-input" name="new-element-input" placeholder="Enter a label">
</div>
</div>
</div>

Bootstrap Horizontal alignment form

Can anyone advise why im getting this strange alignment issue with bootstrap when horizontally aligning textboxes with a select control :-
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>

Write your columns outside form-group.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename" />
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
</div>
</body>
</html>

Please use one form-group for the entire section.`
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>
`

Form group is supposed to be used if you need to group several form elements together. In this case, it is a good idea for you to group all your form elements into a single form-group.
<div class="row">
<div class="form-group">
<div class="col-xs-12 col-md-2">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Forename" />
</div>
<div class="col-xs-12 col-md-5">
<input type="text" class="form-control" placeholder="Surname" />
</div>
</div>

Define the column outside the form-group class.
<div class="row">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<select class="form-control" required>
<option value="">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Forename">
</div>
</div>
<div class="col-xs-12 col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Surname">
</div>
</div>
</div>

How do I position drop down list on the same line

I want to place my drop down list elements side by side on the same line.
So far it looks like this :
screenshot
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>TITLE</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<h4 class="form-header">Personal details</h4>
<div class="details-form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="details-form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
<div class="details-form-section">
<input id="phone" name="phone" type="number" placeholder="Your phone number" min="10"required>
</div>
<div class="details-form-section">
<select id="type" name="type">
<option value=""> - tell us what you need - </option>
<option value="Quote">Quote</option>
<option value="Sample request">Sample request</option>
<option value="Customization">Customization</option>
<option value="Support">Support</option>
</select>
</div>
<h4 class="form-header">Personal details</h4>
<div class="quote-form-section">
<select id="type" name="type">
<option value="">type</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></div>
<div class="quote-form-section">
<select id="type" name="type">
<option value="">Quantity</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select></div>
<div class="quote-form-section">
<select id="type" name="type">
<option value="">size</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="custom-form-section"><h4>test</h4>
Please upload a screenshot .
<input type="file" name="fileupload" value="fileupload" id="fileupload">
</div>
<div class="custom-form-section"><h4>Details</h4>
Please provide more information below.
<textarea id="message" class="removetext" name="message" cols="50" rows="3" placeholder="Details ..."></textarea>
</div>
<br>
<input type="submit" name="_submit" class="btn" value="Submit!">
</form>
</div>
Here's the code http://jsfiddle.net/zbfw3yzL/ , This here is also another issue I would like to get fixed - jsfiddle.net/6ky3dw6s/

Find quote-form-section in your css and change it as below:
.quote-form-section {
margin: 15px 0 0 0;
display: inline-block;
float: left;
width: 30%
}

How to control size of select tag in bootstrap

I have a form which has two text boxes in the top followed by two select tags below them . Below is the code. How can I modify the width for the select tags so that they align with the text boxes above.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div> </form>
<br>
<form class="form-inline">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</form>

Wrap them with Bootstrap's Grid System
Something along the lines of this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="Title">Title</label>
<input type="text" class="form-control" name='p_Title' value='' ng-model="reports.title" class='requiredAttribute' placeholder="Title">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="sr-only" for="subTitle">Sub Title</label>
<input type="text" class="form-control" name='p_SubTitle' value='' ng-model="reports.subtitle" class='requiredAttribute' placeholder="Sub Title">
</div>
</div>
</div>
</form>
<br>
<form class="form-inline">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<select class="form-control" name="category">
<option value=""></option>
<option value="0">select1</option>
<option value="1">select2</option>
<option value="2">select3</option>
</select>
</div>
</div>
</form>

how to have multiple inputs on left side of row and one on the right in foundation 5

How do I move the City, State and Zipcode inputs up where they should be? I have been messing around with the rows and the end, pull, push and offset classes but i guess i haven't found the right combination. Any help will be great. Thanks!
My Modal HTML:
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
<div id="customerModal" class="reveal-modal" data-reveal>
<h3>Customers</h3>
<form>
<div class="row">
<div class="large-6 columns">
<label>Business Name
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Name
<input type="text" placeholder="Enter Contact Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Business Phone
<input type="email" placeholder="Enter Business Phone Number" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Phone
<input type="text" placeholder="Enter Contact Phone Number" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Address 1
<input type="text" placeholder="Enter Address" />
</label>
</div>
<div class="large-6 columns">
<label>Contact Email
<input type="text" placeholder="Enter Contact Email" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Address 2
<input type="text" placeholder="Enter Address" />
</label>
</div>
<div class="large-6 columns">
<label>Notes
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns end">
<label>City
<input type="text" placeholder="Enter City" />
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>State
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="large-6 columns">
<label>Zipcode
<input type="text" placeholder="Enter zipcode">
</label>
</div>
</div>
<input type="submit" class="add-btn button right small" value="Add">
<a class="close-reveal-modal">×</a><!--Close Button-->
</form>
</div><!--Modal-->

One solution would be to create giant columns. So the entire left side is one column and the entire right side is one column.
(Heads up don't blindly copy and paste, I removed some fields to save time.)
To elaborate a little you are creating a dynamically sized row for both "notes" and "address". You need to split them up into different containers so they don't share the same height. I find I need to visualize this every once and awhile and to do so you can open your page in chrome and right click and go to inspect element, then when you highlight over the code you can see what rows and columns contain what elements with nifty little colored boxes.
<a class="side-nav-btn button small" href="#" data-reveal-id="customerModal">Customers</a>
<div id="customerModal" class="reveal-modal" data-reveal>
<h3>Customers</h3>
<form>
<div class="row">
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Business Name
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>City
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>State
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Zip
<input type="text" placeholder="Enter Business Name" />
</label>
</div>
</div>
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-12 columns">
<label>Contact Name
<input type="text" placeholder="Enter Contact Name" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Notes
<textarea placeholder="Enter Optional Notes" rows="10"></textarea>
</label>
</div>
</div>
</div>
</div>
</form>
</div>