I have this very simple code using Bootstrap 3:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
<textarea class="text required form-control" name="campaign[url]" id="campaign_url"></textarea>
</div>
and it appears like this:
Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:
.form-horizontal .form-group {
margin-left: -15px;
margin-right: -15px;
}
Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?
It's happening because you are using form-horizontal which is meant to be used as a row along with col-*'s for layout. From the Bootstrap docs:
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontal to the form (which doesn't have to be a <form>). Doing so changes .form-groups to behave as grid rows, so no need for .row.
So if you simply remove the form-horizontal the negative margin goes away.
http://codeply.com/go/QQnqgfKv9v
I just spend some time getting to understand this negative margin as well.
Turns out that normally you embed a form-horizontal into a container or container-fluid that puts a margin of 15px and the form-groups use -15px.
The real problem is that you are missing some <div class="col-..."> to wrap your label and form controls.
These add some padding left+right and that will display it correctly.
Something like:
<html>
<body>
<main class="container" role="main">
<form class="simple_form form-horizontal">
<div class="form-group text required campaign_url">
<div class="col-md-12">
<label class="text required control-label" for="campaign_url"><abbr title="required">*</abbr> Url</label>
</div>
<div class="col-md-12">
<textarea class="text required form-control col-md-12" name="campaign[url]" id="campaign_url"></textarea>
</div>
</div>
Related
I have the following markup in a form.
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">
States
<img id="clear-selection" src="~/images/delete.png" title="Clear Selection" />
</label>
<select class="form-control"></select>
</div>
</div>
</div>
The control label (States) is followed by an icon. But I would really like the icon to be aligned to the right.
Instead of this:
I want this:
Is there any way to do this within the intended framework of Twitter Bootstrap? I'm not really clear about what sort of Bootstrap styles are considered acceptable within a <label> tag.
You can solve this simply by moving the image above and outside of the label and giving it a class of float-right.
This will float the image to right.
Please look at the following code:
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
This code creates a label and an input box. How to make the input box occupy the entire grid?
How to make the input box occupy the entire grid?
Do you want a two-dimensional text input field?
If so, rather than
<input type="text" />
You might want to use:
<textarea></textarea>
instead.
See:
https://developer.mozilla.org/en/docs/Web/HTML/Element/textarea
http://www.w3schools.com/tags/tag_textarea.asp
Why would you want informational (?) content to be placed in an input field?
The width of the input is constrained to the parent .col-md-6, the class you assigned to the input (.col-md-8) is therefore 8/12 of the md-6 class. Try wrapping it in its own .form-control
Have you tried using CSS properties to set the height and width of the input to 100%?
In a style.css file or <style> element you could do the following
input {
height: 100%,
width: 100%
}
Is this the complete code? Is your code part of a row?
It's always good to put your rows and cols in a container or container-fluid like so:
<div class="container">
<div class="form-group col-md-6">
<label class="col-md-4">Last Seen (Real Time)</label>
<input class="form-control col-md-8" type="text" ng-model="status.lastSeen" ng-readonly="true"/>
</div>
</div>
Basically I have a bunch of rows with a check box and a label taking up 2 column spaces. Some of the labels are longer then others so when you resize the browser or are viewing on a mobile device the columns with longer labels will collapse to a second row and the shorter ones stay beside their check box. It looks like crap.
HTML:
<div class = "row">
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
Is there a way to make it so that if one of them collapses then the whole row does?
Even better would be to have a dynamic font that worked like an image and just grew and shrank taking up a maximum of 100% as necessary to not cause a collapse at all. I could just use images but I have a lot of these these labels and it will take forever to make an image for each.
Bootstrap provides four classes for different screen :
xs for extra small
sm for small
md for medium
lg for large screen
In your following code should work, you can customize as per your screen needs :
<div class = "row">
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Small Label
</div>
</div>
<div class="col-xs-12 col-sm-12 col-lg-2">
<div class="input-group">
<input type="checkbox">
Big Label that collapses first
</div>
</div>
</div>
You can add a custom CSS to your bootstrap style and define some simple CSS rules as you would like to force the style to behave...
CSS Example:
.input-group {
display: inline;
}
I think the right HTML element for this is a list..
although, If you are going to edit the CSS... It's good to know that you can add a custom css file to your project and use a CSS class with your bootstrap style like this:
CSS:
.checkbox-inline {
display: inline;
}
HTML:
<div class="input-group checkbox-inline">
<input type="checkbox">
Small Label
</div>
There are many possible answers...
maybe, you will also find this question useful.
How do I make a simple row with a form-control without getting a horizontal scrollbar?
It seems that whatever I do with bootstrap 3, any "fluid" row that should be 100% is actually going beyond its container which introduces a horizontal scrollbar. How do I stop this and make it fit into its container?
Example:
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<input type="text" required="" class="form-control" placeholder="Enter something" id="foo" name="foo">
</div>
</div>
</div>
jsfiddle: http://jsfiddle.net/qnb3q40g
Your code is working fine with bootstrap 3.2.0
DEMO
.container-fluid .row {
margin-left: 0;
margin-right: 0;
}
For some reason when using container-fluid bootstrap doesn't take into account that it is using a negative margin on rows. So by adding the css above it will fix your issue.
Demo -http://jsfiddle.net/MeycD/537/
You can do it in this way also if you want.
<div class="container">
<div class="row">
<div class="col-xs-5 col-lg-1">
<input type="text" class="form-control input-normal" />
</div>
</div>
</div>
How can I make the labels of the form fields align vertically with the billing address heading?
http://jsfiddle.net/DA9gK/1/
<h4 class="billingAddress">Billing Address</h4>
<div class="control-group">
<label class="control-label" for="inputEmail">Company Name</label>
<div class="controls">
<input type="text" id="inputEmail">
</div>
</div>
Add
.form-horizontal .control-label {
text-align: left;
}
to your CSS part...Is this what you want?
Take a look at the css box model and if you can implement that, your spacing issues should go away. Floats are some else to consider, but... what you would benefit from specifically here... I can't find the link to, so do this:
<div id="head"></div>
<div id="nav"></div>
<div id="wrapper"></div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="footer"></div>
you can share a line between head & nav based on your style, your left form objects go into leftcolumn, right into right, footer holds its own line typically. This relies on absolute positioning of the wrapper and relative positioning of the everything else I believe. Floats work too, but are considered less flexible.
This approach should give you the kind of control over the spacing you need to make your page "fiddler" example look good.