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>
Related
I don't know why, but on scrren size 1024 x 768 my choose options from select are sooo big. How can I do this to this options to be width like select?
I would like to do this only on bootstrap 4 and use only classes from bootstrap but I don't know or it is possible and I don't know why this selects are acting like this. On larger screen sizes everything is ok.
How to fix it?
Here is my code:
<div class="row">
<div class="col-sm-6" style="border: 1px solid black">
<span class="font-weight-bold">Data</span>
<form role="form">
<div class="form-group">
<label class="control-label">Choose</label>
<select class="form-control" name="docType">
<option value="paragon">Test1</option>
<option value="complaint">Test2</option>
</select>
</div>
<div class="form-group">
<label for="docNo">Data</label>
<input type="text" class="form-control" id="docNo">
</div>
<div class="form-group">
<label for="docDate">Data</label>
<input type="text" class="form-control" id="docDate">
</div>
</form>
</div>
<div class="col-sm-6">
Test
</div>
</div>
Do you have something in your CSS that is forcing the options to be a static pixel size instead of allowing bootstrap's width to just be auto?
Usually the options tag will not display large options even if you are using bootstrap, but you could try adjusting the width by using the following css code for all form elements in html.
.form-control
{
width:90%;
}
I am having issues centering a form in Bootstrap. I also don't seem to be able to resize the input boxes. I would like to have it centered.
This is what I have:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
And for CSS I started:
#SignUpCreate {
padding-top: 200px;
margin-right: 30px;
margin-left: 30px;
}
you only need to apply some width and make it center with margin: 0 auto
<div class="form-group row" id="signupcreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
below code will center your form
#signupcreate{
width: 60%;
margin: 0 auto;
float: none;
}
You probably want to put it inside a container. Like this:
<div class="container">
<div class="row">
// Your code here
</div>
</div>
Possible duplicate of: Center Form using Twitter Bootstrap
There are a couple ways to solve this but I really recommend to use bootstrap itself to do it.
What I recommend is using offsets. So if you want your form centered just use something like:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4 col-sm-offset-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4 col-sm-offset-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
You can tweak your offsets for xs, sm, md and lg accordingly, make sure to set offset to 0 if you don't want offset in a particular view.
Now for your styles, you are giving css a SignUpCreate id when in fact is SignupCreate, remember css selectors are case sensitive.
Also keep in mind for the future that when using bootstrap you should try as much to stick to the framework and use all its features instead of coding your own CSS, and when you do, a good thing to keep in mind is that CSS uses "points" to know which styles are more relevant, I recommend checking Specifics on CSS Specificity
So let's say you want to style something that has padding right and left, I would avoid using a row or column element to do this and would add a second container div to "respect" bootstrap styles.
I hope this answer is helpful :)
There is also a good answer here: Center a column using Twitter Bootstrap 3
UPDATE:
With boostrap 4.5^ you can center any item using d-flex justify-content-center on the parent, if you also want to align the items vertically (relative to the parent's height) simply add align-items-center.
I am trying to make a textarea with 5 rows and a width defaulted to the width of the container below it, but also allow it to become more narrow if a user is on a small mobile device (e.g. a smart phone). I've been researching and I see that there is debate on whether to use CSS or HTML to alter the size of a textarea. I'm fairly new to web development (started last week), so if you know how to fix my problem could you tell me why you chose the method you did?
<form class="form-inline">
<div class="form-group">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<button type="submit" class="btn btn-primary">Send!</button>
</form>
using form-inline makes the form-group display inline-block.. if you want the form-group to stretch the entire width you can use form-horzontal
or you can just set the display style of the form-group to block
<form class="form-inline">
<div class="form-group" style="display:block">
<textarea class="form-control" rows="5"></textarea>
</div>
</form>
make sure you site.css doesn't have a max-width value for textareas. this is in the default style sheet I believe
input,
select,
textarea {
max-width: 280px;
}
Bootply codes can be seen here => http://www.bootply.com/QpvisrtAJR
I want the input box to be longer, however, the width:100% doesn't work for it.. And I don't want to use width: xxxpx or size=xxx to make it longer because it will be un-responsive in different resolution..
Does anyone have ideas about this?
Your input rule isn't actually being applied. It is not specific enough so is being overwritten by a default bootstrap rule. Try this instead:
.form-inline button.form-control,
#contain_word
{
display: block;
width: 100%;
}
http://www.bootply.com/Qh2VwydnHx
Also you have a an erroneous character in your html where you give the input field an id. Should be:
<input type="email" class="form-control" id="contain_word">
Not:
<input type="email" class="form-control" id="contain_word`">
You can use the calc() method to have the input field 100% in width but still float left to the label.
Updated Bootply: http://www.bootply.com/2K3ZIWsuWy
Calc() is compatible with most browsers except Opera Mini. For Blackberry you still need -webkit.
Check out the compatibility table here: http://caniuse.com/calc
You can add your class with a specified width
or override existing styles, but it is better to create your own style file
http://www.bootply.com/QpvisrtAJR#
div class="row">
<form class="form-inline" role="form">
<div class="form-group col-sm-6 no-padding">
<label for="contain_word`">Containing word(s): </label>
<input class="form-control test" id="contain_word`" type="email">
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Search</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary form-control">Clear</button>
</div>
</form>
</div>
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.