I am using bootstrap in my project. The project uses jade as view engine. I have the following code.
extends layout
block content
.container
.row
.col-md-4.col-md-offset-4
.panel.panel-default
.panel-heading
h1.center-text Weather Application
.panel-body
form.form-inline
.form-group
label.sr-only(for="cityname") City name
input.form-control(type="text" placeholder="Enter City Name")
button.btn.btn-primary(type="submit") Add City
I dont know for some reason I am getting the html view as follows.
There is no gutter between the text box and the button. Can anyone tell me the reason for this.
For me, the above Jade compiles to:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<h1 class="center-text">Weather Application</h1>
</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label for="cityname" class="sr-only">City name</label>
<input type="text" placeholder="Enter City Name" class="form-control"/>
</div>
<button type="submit" class="btn btn-primary">Add City</button>
</form>
</div>
</div>
</div>
</div>
</div>
Which ends up looking like this:
Do you have any custom CSS?
The code runs fine for me using bootstrap 3.3.6. There is a gutter. What version are you using?
Please check using the dev tools in your browser to see if another css class is overriding bootstrap's css.
Related
In Bootstrap, container-fluid has some padding, which I want. However, things inside a horizontal form seem to be ignoring the padding and getting pushed all the way to the edges of the container (I've added a border to the container here for illustration):
<div class="container-fluid" style="max-width:900px;border:1px solid black">
<div class="alert alert-danger">Correct, obeys container-fluid padding.</div>
<form class="form form-horizontal">
<div class="form-group alert alert-danger">Too Wide</div>
<div class="form-group panel panel-default">
<div class="panel-heading">Too Wide</div>
<div class="panel-body">Body</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Too far left</button>
</div>
</form>
</div>
A working example is on Bootply.
In that example, the first alert is as intended. Everything else inside the form is too wide.
Now, not shown in the Bootply, but if I add an input to the form:
<div class="form-group">
<label class="control-label col-sm-2" for="field">Label</label>
<div class="col-sm-10">
<input class="form-control" id="field" type="text"/>
</div>
</div>
The input is padded correctly, unlike the alerts and panels, which I don't understand.
How do I get all the things in the form to obey the padding? This is especially important to me because on small screens it pushes everything right to the edge and doesn't look that great.
The only thing I could think of to try was enclosing the form in a plain div, which had no effect.
I also achieved some success by manually setting the padding on the form, but that doesn't feel right, and it also breaks the properly padded input elements. Plus, it's not too robust in that I can't guarantee my hard-coded padding will match the container's usual padding which I have no control over.
//This will sort out your panels and alerts. (.less code)
//Or you could just put a .col-xs-12 on them.
.form-horizontal {
> .panel,
> .alert {
margin: 0 #grid-gutter-width / 2; //(or just 15px if your using bootstrap dist)
}
}
Then for your input groups, just using the col-sm-2 on your labels like you have done above.
And for your form group with the submit button simple put a col-xs-12 on it.
The reason for this is: .form-groups inside .form-horizontal receive margin-left: -15px; (The same as grid-gutter-width).
The intended design is that you use form-horizontal as a substitute for a .row and then use .cols inside. Or implement how you choose to fit your design.
Reference : bootstrap forms horizontal
Do your inputs like this
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
Do your submit button like this
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
You can do your alerts like this if you like
<div class="col-xs-12">
<!-- alert here -->
</div>
I am using Bootstraps grid system to make my input box smaller. However, it seems to conflict with form-control.
HTML:
<form class="col-md-8">
<div class="form-group">
<input type="text" name="input_box" class="form-control col-md-3"/>
</div>
</form>
In Chrome's developer tools, the 25% (for .col-md-3 is automatically crossed out). If I take out .form-control then it works but looks ugly.
How do I use them both? Note that I do not want to change the width in .formcontrol because I have other forms that also use this and will get messed up
How about this
<form>
<div class="col-md-8">
<div class="form-group col-md-3">
<input type="text" name="input_box" class="form-control"/>
</div>
</div>
</form>
I'm pretty new to Bootstrap and CSS, so please excuse the probable immaturity of my question.
Ok, so here goes:
Context:
I'm using bootstrap and the [Grayscale theme] for a simple tool I'm building to help my students use coursera more effectively.
I have the following snippet of code:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-xl-4">
<input type="text" class="from-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
Problems:
The text entered in the textbox is not visible. I made sure text is actually entered in the box (by copy/pasting it to an editor) and I have not changed the default text color.
I can't seem to change the size of the text area. I've used col-xs-1, col-xs-2, and many more variations. It always takes the default size. The only thing that changes is the position of the textbox and button on the page. Do you know why that happens?
I would really appreciate your help! I've looked at some similar questions on the topic, but couldn't figure this out.
Many thanks!
Raf
The class for the textbox should be form-control, not from-control. Change that and try again?
EDIT: There is no such class as col-xl-4 in Bootstrap. Use col-xs-4 or col-lg-4.
#GertV is correct above in sying that you should be using form-control and that col-xl classes do not exist. The reason you cannot see the textarea though is that you have not declared its width.
Try this:
<div>
<form class="form-inline">
<div class="container">
<div class="row">
<div class="col-md-4">
<input type="text" style="width: 300px;" class="form-control" placeholder="Enter the link to your course">
<button type="button" class="btn btn-primary">Download Videos</button>
</div>
</div>
</div>
</form>
</div>
I am using the jquery tab control. I have a form in each of them and I want to submit each form independently. I have been googling and reading about forms and submit but the only way I have found so far is by using jquery. I would prefer to use the submit buttons.
I have used http://foundation.zurb.com/docs/components/section.html tab forms instead of jQuery's and yes I needed a separate submit button for each form so that it only collected the data from the form it was attached to. You want to create a different form within each div of the tab in question. I found Zurb's Foundation easy to use and they give you code so you only have to tweak it a bit. Here's an example of just one tab using Foundation.
<div class="content" data-slug="panel3" data-section-content="">
<form>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline">Your Name</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourName" placeholder="Jane Smith">
</div>
</div>
<div class="row collapse">
<div class="large-2 columns">
<label class="inline"> Your Email</label>
</div>
<div class="large-10 columns">
<input type="text" id="yourEmail" placeholder="jane#smithco.com">
</div>
</div>
<label>What's up?</label>
<textarea rows="4"></textarea>
<button type="submit" class="radius button">Submit</button>
</form>
</div>
Let me know if this does not answer your question properly.
Add a <form> for each of your tabs.
Add a <input type="submit" value="submit" /> inside each form.
Make sure that none of your forms are nested inside each other.
You should be able to submit each tab independently.
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms