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>
First of all i would like to say that i'm a real newbie, learing HTML, CSS and PHP by this website and trail&error.
My problem is as following:
My HTML button won't submit the form to my PHP. I can't really see what im doing wrong. Can anyone help me?
My code is:
<div class="contact-inner">
<form class="contact-form" method="post" action="emailcontact.php">
<div class="col-md-6">
<input type="text" name="naam" class="form-control wow bounceInLeft" placeholder="Uw naam">
</div>
<div class="col-md-6">
<input type="text" name="email" class="form-control wow bounceInLeft" placeholder="Uw emailadres">
</div>
<div class="col-md-12 ">
<textarea name="bericht" class="form-control" cols="30" rows="6" placeholder="Uw bericht"></textarea>
</div>
<div class="btn-container col-md-12 text-center submit">
<button type="submit" name="submit">Verstuur!</button>
</div>
</form>
I hope it not a too stupid mistake.
Thanks in advance for your help!
Gr. Tom
Please do the following to try out if your html's problem or PHP's
If you got an 404 error, you may be writing a wrong location for emailcontact.php
Add following code to the top of emailcontact.php:
<?php
var_dump($_POST);
If you got var_dump the same data as what you've post, it means you program actually works.
change
<button type="submit" name="submit">Verstuur!</button>
to
<input type="submit" name="submit">Verstuur!</input>
add an id to your form ( for example "myform" )
then in your button code :
<button type="submit" name="submit" onclick="document.getElementById("myform").submit()">Verstuur!</button>
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 currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.
How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.
How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.
JS fiddle example
<div class="container ">
<form>
<h3> Format used to look like this in Bootstrap 2 </h3>
<div class="row ">
<label for="return1"><b>Return:</b></label>
<input id="return1" name='return1' class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return1' style='color:blue'> +/- 14 Days</span>
</div>
<br>
<br>
<h3> BootStrap 3 Version </h3>
<div class="row">
<label for="return2"><b>Return:</b></label>
<input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return2' style='color:blue'> +/- 14 Days</span>
</div>
</form>
Update:
I change the code to this which works but having trouble with alignment now. Any ideas?
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
Straight from documentation http://getbootstrap.com/css/#forms-horizontal.
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.
Sample:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<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>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<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>
</form>
I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.
What you need is the .form-inline class. You need to be careful though, with the new .form.inline class you have to specify the width for each control.
Take a look at this
None of these worked for me, had to use .form-control-static class.
http://getbootstrap.com/css/#forms-controls-static
You can do it like this:
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputType" class="col-sm-2 control-label">Label</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="input" placeholder="Input text">
</div>
</div>
</form>
Fiddle
just give mother of div "class="col-lg-12""
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
it will be
<div class="form-group">
<div class="col-lg-12">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
</div>
The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:
.form-control {
display:initial !important;
}
In Bootstrap 4 for Horizontal element you can use .row with .col-*-* classes to specify the width of your labels and controls. see this link.
And if you want to display a series of labels, form controls, and buttons on a single horizontal row you can use .form-inline for more info this link
all please check the updated code as we have to use
form-control-static not only form-control
http://jsfiddle.net/tusharD/58LCQ/34/
thanks with regards
Or you can do this:
<table>
<tr>
<td><b>Return:</b></td>
<td><input id="return1" name='return1'
class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'></td>
</tr>
</table>
I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.
Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.
YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.
"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://stackoverflow.com/a/4278073/1758051]
And this: "
Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://stackoverflow.com/a/4964107/1758051]
I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will not always line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.