twitter-bootstrap


Inline form elements within non-inline form in Bootstrap 3?


Is it possible to have certain form elements within a Bootstrap form be inline, while the rest are not?
In my form, I want to make everything take up the full 6 columns, except city, state, and ZIP should occupy a single line. See code below:
<form id="main-form" role="form">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="bill-name">Name</label>
<input type="text" class="form-control" id="bill-name"
placeholder="Full name">
</div>
<div class="form-group">
<label for="bill-company">Company</label>
<input type="text" class="form-control" id="bill-company"
placeholder="Company name">
</div>
<div class="form-group">
<label for="bill-address1">Address</label>
<input type="text" class="form-control" id="bill-address1"
placeholder="Street address">
</div>
<div class="form-group">
<label for="bill-address2">Address 2</label>
<input type="text" class="form-control" id="bill-address2"
placeholder="Suite, building number, etc.">
</div>
<div class="form-group">
<label for="bill-city">City</label>
<input type="text" class="form-control" id="bill-city"
placeholder="City">
</div>
<div class="form-group">
<label for="bill-state">State</label>
<input type="text" class="form-control" id="bill-state"
placeholder="State">
</div>
</div>
</div>
</form>
That's the beauty of the nestable grid. The result isn't truly inline, but I think it's more effective.
<div class="row">
<div class="form-group col-sm-6">
<label for="bill-city">City</label>
<input type="text" class="form-control" id="bill-city" placeholder="City">
</div>
<div class="form-group col-sm-6">
<label for="bill-state">State</label>
<input type="text" class="form-control" id="bill-state" placeholder="State">
</div>
</div>
Fiddle
Note that this only applies to sm and above screen widths. You could change the class to col-xs-6 to go all the way down with it.

Related Links

Inline form vertical spacing issue
Embedded video shows a totally other video
Customizing spree e-commerce view
bower install bootstrap-saas giving ENOTFOUND error
Bootstrap button not working in Internet Explorer
Hide Bootsrap modal in mobile
Bootstrap Datetimepicker issue occured
Combine 2 streams
Bootstrap 3 affix offset-bottom behaviour
How can I remove the prev and next button in datatable bootstrap pagination if there's only one or two pages?
How can I highlight table cells that have been edited and those that are updated as a result?
Working with meteor wizard steps?
icon-youtube didn't work in bootstrap
Bootstrap 2.2.2 button dropdown toggle instantly closes on iOS
How to trim white spaces in bootstrap validator?
Does Bootstrap tooltip support track:mouse or similar function?

Categories

HOME
stata
domain-driven-design
wifi
display
gap-system
mifare
datetimepicker
angularjs-directive
atlassian-fisheye
cdn
clip-path
oms
gcloud
cakephp-2.0
luis
greensock
openam
android-actionbar
caldav
webgl-earth
xna
klipfolio
hololens
aws-iot
advertising
aspxgridview
ckeditor4.x
priority-queue
deployment-descriptor
adobe-captivate
typeclass
custom-fields
pypy
jql
jcr
ilog
webspeech-api
restler
zimbra
powerbi-embedded
asp.net-webhooks
lighting
outlook-2010
cowboy
file-conversion
electron-packager
uitextview
superclass
wufoo
grails-2.0
synchronized
yank
openidm
visio-2010
px4
sharpdevelop
openpgp.js
robotc
blackberry-webworks
optional-parameters
django-celery
jde
phpdesigner
treelist
clique
datamodel
apache2-module
fadein
sqldataadapter
askbot
cascading
dynamics-nav
wiql
ios8-share-extension
windows-kernel
taverna
notice
page-flipping
jad
shunting-yard
system.io.packaging
apache-pivot
conditional-comments
gnip
dirname
indic
azure-worker-roles
time-frequency
step
php-amqplib
qmainwindow
pageload
netbiscuits
bash4
optimistic-concurrency
project-files
mscorlib
wdm
execjs
netbeans7.0
mass-emails
lgpl
xcdatamodel
datadude
qlibrary

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile