I am trying to figure out how to line these two labels and inputs together. Will someone please tell me where I may be going wrong? I just want them to be lined up next to each other.
<div class="row">
<div class="col-lg-12">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-xs-4">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-12">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-1">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-3">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
How do I put the Driver License Number on the same line as sex?
EDIT
Changing it to col-lg-6 puts them on the same line but they still end up looking like this? I am trying to have them not look so awful.
EDIT 2
<div class="row">
<div class="col-lg-5">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-lg-10">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-7">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-2">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-5">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
</div>
How do I remove Driver license number more to the left to make it look better?
You should use col-lg-6 classes instead of col-lg-12 to enable these two elements to take 6-6 column. So they can fit into the very same row.
UPDATE:
<div class="row">
<div class="col-lg-4">
<label for="gender_<cfoutput>#Add#</cfoutput>">Sex:</label>
<div class="form-group">
<div class="col-xs-4">
<cfinclude template="../ddl/gender.cfm">
</div>
</div>
</div>
<div class="col-lg-8">
<label for="driverlicense_<cfoutput>#Add#</cfoutput>" class="labelspace">Driver license number:</label><cfinclude template="../includes/tooltip.cfm">
<div class="form-group">
<div class="col-lg-4">
<cfoutput>
<cfinclude template="../ddl/dlstates.cfm"> <!--- If you need to re-insert into HTML and not use as include, then you have to correct the file location i.e(../../../) --->
</div>
<div class="col-lg-4">
<input type="text" class="form-control input-sm" name="driverlicense_#Add#" id="driverlicense_#Add#" validateat="onSubmit" validate="noblanks" maxlength="50" required="yes" value="#session.checkout.info["driverlicense_" & Add]#" />
</cfoutput>
<span id="result_<cfoutput>#Add#</cfoutput>"></span>
</div>
</div>
</div>
They are both 12 columns wide. Try make them 6, hence half the size.
Related
I have a bootstrap form like the one below.
I want to make the width of that column to be 9 so in the left 3 I can add a button to the top-right of the textarea.
The form HTML is:
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
I have tried using <div class="col-md-9"> and <div class="col-md-3"> but no success.
Any clue?
This should do the trick:
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label>Compose Message</label>
<textarea class="form-control" rows="5" value="" />
</div>
</div>
<div class="col-md-3">
<button class="btn">Button</button>
</div>
</div>
I've just implemented a bootstrap-theme in an empty ASP MVC-project. In the bootstrap there is an email-form. I want to activate the "send"-button and make it send an e-mail to me. I've seen different kind of sollutions when I've read about it:
Just use:
<a href="mailto:EMAILADDRESS">
or
form method="post" action="mailto:youremail#youremail.com" >
<input type="submit" value="Send Email" />
</form>
Or the more complicated way, to use jQuery and write things in both the model and controller.
So my question is: Why should I use the (to me) more complicated way?
Here is the code that came with the bootstrap:
<!-- Contact Section -->
#*<section id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Contact Me</h2>
<hr class="star-primary">
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!-- To configure the contact form email address, go to mail/contact_me.php and update the email address in the PHP file on line 19. -->
<!-- The form should work on most web servers, but if the form is not working you may need to configure your web server differently. -->
<form name="sentMessage" id="contactForm" novalidate>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" class="btn btn-success btn-lg">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>*#
<!-- Footer -->
Assuming you plan to add more to your email-sending app in the future, you should prefer the seemingly complicated way because in the long run, it will actually make things simpler. This complicated way is based on a concept called 'Separation of Concerns'.
In short, breaking your code into a model and controller is more complicated if you only want a button that sends you an email. But as your program grows in complexity and you add more to it, this technique will make it easier to reuse or update particular aspects of your program.
Is there any way to place the labels closer together to the controls using horizontal forms with the below code?
I've been experimenting with "pull-left", "pull-right", "nopadding" on different controls, but just can't seem to move them together more closely.
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<div class="row">
<div class="form-group nopadding">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id">
</div>
</div>
<div class="form-group nopadding">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password">
</div>
</div>
<div class="form-group nopadding">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30">
</div>
</div>
</div>
</div>
I think this is what you want.
FIDDLE
You can reduce the space between the labels and the inputs by adding a negative margin to the labels.
CSS:
label {
margin-right: -20px;
}
HTML:
<div class="page-header">
<h1>sample</h1>
</div>
<div class="container nopadding">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="recordId" class="col-sm-2 control-label">Record Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="recordId" placeholder="Record Id"></input>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">Id</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="id" placeholder="Password"></input>
</div>
</div>
<div class="form-group">
<label for="familyName" class="col-sm-2 control-label">Family Name</label>
<div class="col-sm-2">
<input type="text" class="form-control" id="familyName" placeholder="Family Name" maxlength="30"></input>
</div>
</div>
</form>
</div>
Also, not sure why you had a div with class row on there. Should be a form tag. I've adjusted that in the HTML for my answer and Fiddle.
The width of the label is determined by the col-sm-2 classes attached to them. You could modify this to be col-sm-1 instead, but this could cause problems on smaller devices.
Though bootstrap recommends doing the horizontal forms similarly to the way you do them (see here), I don't feel like this approach allows for much flexibility in spacing.
Personally, I'd change the form to behave like this. Because you're declaring the widths yourself in the CSS, you can customize spacing as you wish. This may not collapse down well, but if you wish you can write further CSS to handle low-resolutions.
I am a newbie to Zurb Foundation and I am trying to align the input elements (second div with class="large-9 columns")inline.
But they are being stacked one over the other inspite of using the class="columns".
How can i get them arranged inline?
http://jsfiddle.net/Sbt75/432/
Case 1:
<div class="row">
<div class="large-3 columns">
Prefix:
</div>
<div class="large-9 columns">
<label>
<input type="radio" name="PrefixTab" value="Mr.">Mr.</label>
<label>
<input type="radio" name="PrefixTab" value="Mrs.">
Mrs.</label>
<label>
<input type="radio" name="PrefixTab" value="Ms.">
Ms.</label>
</div>
</div>
Case 2:
<div class="row">
<div class="large-3 columns">
<label for="BirthMonthTab" ">* Birth Date:</label>
</div>
<div class="large-9 columns">
<input type="text" id="BirthMonthTab" name="BirthMonthTab" maxlength="2" />/
<input type="text" id="BirthDayTab" name="BirthDayTab" maxlength="2" />/
<input type="text" id="BirthYearTab" name="BirthYearTab" maxlength="4" />
(mm/dd/yyyy)
</div>
</div>
For case 1 you could change the radio buttons against a <select> field. But for both cases, you may also try something like:
<div class="row">
<div class="large-3 columns">
<label class="inline right" for="BirthMonthTab">* Birth Date:</label>
</div>
<div class="large-3 columns">
<input type="text" id="BirthMonthTab" placeholder="dd" name="BirthMonthTab" maxlength="2" />
</div>
<div class="large-3 columns">
<input type="text" id="BirthDayTab" placeholder="mm" name="BirthDayTab" maxlength="2" />
</div>
<div class="large-3 columns">
<input type="text" id="BirthYearTab" placeholder="yyyy" name="BirthYearTab" maxlength="4" />
</div>
</div>
Here is a demo with your jsFiddle: http://jsfiddle.net/Sbt75/433/ (Remember to make the preview area bigger, or the columns will be stacked)
I'm using Twitter Bootstrap which has been mostly painless. However, I just ran into the following problem when using inline checkboxes in a modal popup:
The first row of the checkboxes are not aligned correctly.
Note that if I remove the inline property, this continues:
The offending code is as follows:
<div class="modal-body">
<form class="form-horizontal">
<div class="row-fluid">
<div class="span4">
<h4 style="display:inline !important;">Client: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">Start Date: </h4>
</div>
<div class="span4">
<h4 style="display:inline !important;">End Date: </h4>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4 style="display:inline !important;">Industry: </h4> TBA
</div>
</div>
<br />
<div class="row-fluid">
<h4>Role: </h4>
<label class="checkbox inline">
<input type="checkbox" value="2"> .NET Developer
</label>
<label class="checkbox inline">
<input type="checkbox" value="1"> Business Analyst
</label>
<label class="checkbox inline">
<input type="checkbox" value="14"> Change Manager
</label>
*SNIP*
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Scope of Work (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
<br />
<div class="row-fluid">
<div class="span12">
<h4>Deliverables (max. 150 words): </h4>
<textarea class="bdBox" rows="3"></textarea>
</div>
</div>
</form>
</div>
Shortened for brevity.
Does anyone have any ideas on this, or should I take it to the Bootstrap issue list?
Figured this out.
There are two lines in the bootstrap.css file:
.radio.inline,.checkbox.inline{display:inline-block;padding-top:5px;margin-bottom:0;vertical-align:middle;}
.radio.inline+.radio.inline,.checkbox.inline+.checkbox.inline{margin-left:10px;}
The bottom line only applies the margin-left to checkboxes other than the first, meaning the first was not pushed across messing up the line.
If I move margin-left:10px into the first checkbox selector everything lines up. Mac's CSS was perfect for lining my checkboxes up too:
Here is something that I have tried and I suppose that is what you wanted
http://jsfiddle.net/xgKP4/