I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I suppose it's wrong to nest a col-md-x immediately inside a col-md-x in Bootstrap 3. Am I right?
I have following at the moment:
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<input class="col-md-4" value="something" />
<div class="col-md-8">Something here</div>
</div>
In this case, the input border starts at the very beginning of the row. It doesn't have any padding on the outside of it.
I would like the input to show 15px away from the row border. The way I know of how to achieve this is to put this input inside a col-md-x. However, could this cause any issues?
From the bootstrap docs:
To nest your content with the default grid, add a new .row and set of
.col-sm-* columns within an existing .col-sm-* column.
So as long as you are nesting within child rows, you are gonna be fine. Another option would be custom css rules and ids for your nested structure to achieve the desired padding or margin.
UPDATE
To refer to your comment, since this is about validation states: let me add that bootstrap already offers great validation-highlighting. See this quick sample. The bootstrap docs on forms offer great documentation on this topic. As for the padding: I like to put most of my "not-inline" forms into a .well, which shows the user, where action is required and allows a consistent styling of forms...
var resetSec = function(){
$('#sth-form-section').removeClass('has-error');
$('#sth-form-section').removeClass('has-warning');
$('#sth-form-section').removeClass('has-success');
$('#helpBlock-sth').addClass('sr-only');
$('#helpBlock-sth').html('');
};
$('#invalid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-error');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Oh snap! Better think about this one more time!');
});
$('#valid').click(function(){
resetSec();
$('#sth-form-section').addClass('has-success');
$('#helpBlock-sth').removeClass('sr-only');
$('#helpBlock-sth').html('Well done! I think your input was the best so far!');
});
$('#reset').click(function(){
resetSec();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="well">
<form class="form-horizontal" role="form">
<div id="sth-form-section" class="form-group">
<label for="something" class="col-lg-2 control-label">Something:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="something" placeholder="Something here">
<span id="helpBlock-sth" class="help-block sr-only"></span>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
<button class="btn btn-primary" id="reset">Reset</button>
<button class="btn btn-danger" id="invalid">Invalid</button>
<button class="btn btn-success" id="valid">Valid</button>
Ah, just write the markup a little differently, like so:
<div class="row">
<div class="col-md-4">
<input class="form-control" value="something" />
</div>
<div class="col-md-8">
<p class="form-control-static">Something here</p>
</div>
</div>
The problem was putting the col-md-4 class on the input.
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/
I searched a lot and FOUND a few references on STACK but I am posting this anyways (it is a "duplicate" question but the accepted answer doesn't seem to work in any of my cases)
STACK LINK:
bootstrap: align input with button
I can't seem to display a button inline with form-control element (input text),,
I have three versions of the same thing
Fiddle: http://jsfiddle.net/7Cu9w/9/
<div class="form-inline col-xs-4">
<label class="control-label">New Tag: </label>
<input class="form-control"/>
<button type="button" class="btn btn-primary">Add</button>
</div>
<br/><br/>
<div class="form-horizontal col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
<br/><br/>
<div class="input-append col-xs-4">
<label class="control-label">New Tag: </label>
<input name="search" id="search" class="form-control"/>
<button class="btn">button</button>
</div>
I found a variety of similar ideas and answers but no matter what I do, they do not work..
My fiddle:
http://jsfiddle.net/7Cu9w/9/
Can someone please help me with this?
You can use Bootstrap's column properties to specify the layout you would like WITHIN YOUR .form-inline, like so:
JSFiddle.
If that's the property you would like all your input/button pairs to have, I would recommend using an &:extend() and a specific .input-button class in your LESS, but that's how you would go about solving this problem.
Update again: I am closing this question by selecting the top answer to keep people from adding answers without really understanding the question. In reality there is no way to do it with the build in functionality without using grid or adding extra css. Grids do not work well if you are dealing with help-block elements that need to go beyond a short input for example but they are 'build-in'. If that is an issue I recommend using extra css classes which you can find in the BS3 discussion here. Now that BS4 is out it is possible to use the included sizing styles to manage this so this is not going to be relevant for much longer. Thanks all for good input on this popular SO question.
Update: This question remains open because it is about built-in functionality in BS to manage input width without resorting to grid (sometimes they have to be managed independently). I already use custom classes to manage this so this is not a how-to on basic css. The task is in BS feature discussion list and has yet to be addressed.
Original Question:
Anyone figure out a way to manage input width on BS 3? I'm currently using some custom classes to add that functionality but I may have missed some non documented options.
Current docs say to use .col-lg-x but that clearly doesn't work as it can only be applied to the container div which then causes all kinds of layout/float issues.
Here's a fiddle. Weird is that on the fiddle I can't even get the form-group to resize.
http://jsfiddle.net/tX3ae/
<form role="form" class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
What you want to do is certainly achievable.
What you want is to wrap each 'group' in a row, not the whole form with just one row. Here:
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<form role="form">
<div class="row">
<div class="form-group col-lg-1">
<label for="code">Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="row">
<div class="form-group col-lg-1 ">
<label for="code">Email</label>
<input type="text" class="form-control input-normal" />
</div>
</div>
<div class="row">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>
</div>
The NEW jsfiddle I made:
NEW jsfiddle
Note that in the new fiddle, I've also added 'col-xs-5' so you can see it in smaller screens too - removing them makes no difference. But keep in mind in your original classes, you are only using 'col-lg-1'. That means if the screen width is smaller than the 'lg' media query size, then the default block behaviour is used. Basically by only applying 'col-lg-1', the logic you're employing is:
IF SCREEN WIDTH < 'lg' (1200px by default)
USE DEFAULT BLOCK BEHAVIOUR (width=100%)
ELSE
APPLY 'col-lg-1' (~95px)
See Bootstrap 3 grid system for more info. I hope I was clear otherwise let me know and I'd elaborate.
In Bootstrap 3
You can simply create a custom style:
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
}
Then add it to form controls like so:
<div class="controls">
<select id="expirymonth" class="form-control form-control-inline">
<option value="01">01 - January</option>
<option value="02">02 - February</option>
<option value="03">03 - March</option>
<option value="12">12 - December</option>
</select>
<select id="expiryyear" class="form-control form-control-inline">
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
</select>
</div>
This way you don't have to put extra markup for layout in your HTML.
ASP.net MVC go to Content- Site.css and remove or comment this line:
input,
select,
textarea {
/*max-width: 280px;*/
}
I think you need to wrap the inputs inside a col-lg-4, and then inside the form-group and it all gets contained in a form-horizontal..
<form class="form form-horizontal">
<div class="form-group">
<div class="col-md-3">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="email">
</div>
</div>
...
</form>
Demo on Bootply - http://bootply.com/78156
EDIT: From the Bootstrap 3 docs..
Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.
So another option is to set a specific width using CSS:
.form-control {
width:100px;
}
Or, apply the col-sm-* to the `form-group'.
Current docs say to use .col-xs-x , no lg.
Then I try in fiddle and it's seem to work :
http://jsfiddle.net/tX3ae/225/
to keep the layout maybe you can change where you put the class "row" like this :
<div class="container">
<h1>My form</h1>
<p>How to make these input fields small and retain the layout.</p>
<div class="row">
<form role="form" class="col-xs-3">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" >
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
http://jsfiddle.net/tX3ae/226/
<div class="form-group col-lg-4">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
Add the class to the form.group to constraint the inputs
If you are using the Master.Site template in Visual Studio 15, the base project has "Site.css" which OVERRIDES the width of form-control fields.
I could not get the width of my text boxes to get any wider than about 300px wide. I tried EVERYTHING and nothing worked. I found that there is a setting in Site.css which was causing the problem.
Get rid of this and you can get control over your field widths.
/* Set widths on the form inputs since otherwise they're 100% wide */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="select"] {
max-width: 280px;
}
I know this is an old thread, but I experienced the same issue with an inline form, and none of the options above solved the issue. So I fixed my inline form like so:-
<form class="form-inline" action="" method="post" accept-charset="UTF-8">
<div class="row">
<div class="form-group col-xs-7" style="padding-right: 0;">
<label class="sr-only" for="term">Search</label>
<input type="text" class="form-control" style="width: 100% !important;" name="term" id="term" placeholder="Search..." autocomplete="off">
<span class="help-block">0 results</span>
</div>
<div class="form-group col-xs-2">
<button type="submit" name="search" class="btn btn-success" id="search">Search</button>
</div>
</div>
</form>
That was my solution. Bit hacky hack, but did the job for an inline form.
You can add the style attribute or you can add a definition for the input tag in a css file.
Option 1: adding the style attribute
<input type="text" class="form-control" id="ex1" style="width: 100px;">
Option 2: definition in css
input{
width: 100px
}
You can change the 100px in auto
I hope I could help.
In Bootstrap 3
All textual < input >, < textarea >, and < select > elements with .form-control are set to width: 100%; by default.
http://getbootstrap.com/css/#forms-example
It seems, in some cases, we have to set manually the max width we want for the inputs.
Anyway, your example works. Just check it with a large screen, so you can see the name and email fields are getting the 2/12 of the with (col-lg-1 + col-lg-1 and you have 12 columns). But if you have a smaller screen (just resize your browser), the inputs will expand until the end of the row.
You don't have to give up simple css :)
.short { max-width: 300px; }
<input type="text" class="form-control short" id="...">
If you're looking to simply reduce or increase the width of Bootstrap's input elements to your liking, I would use max-width in the CSS.
Here is a very simple example I created:
<form style="max-width:500px">
<div class="form-group">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email Address">
</div>
<div class="form-group">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
I've set the whole form's maximum width to 500px. This way you won't need to use any of Bootstrap's grid system and it will also keep the form responsive.
I'm also struggled with the same problem, and this is my solution.
HTML source
<div class="input_width">
<input type="text" class="form-control input-lg" placeholder="sample">
</div>
Cover input code with another div class
CSS source
.input_width{
width: 450px;
}
give any width or margin setting on covered div class.
Bootstrap's input width is always default as 100%, so width is follow that covered width.
This is not the best way, but easiest and only solution that I solved the problem.
Hope this helped.
I do not know why everyone has seem to overlook the site.css file in the Content folder. Look at line 22 in this file and you will see the settings for input to be controlled. It would appear that your site is not referencing this style sheet.
I added this:
input, select, textarea { max-width: 280px;}
to your fiddle and it works just fine.
You should never ever update bootstrap.css or bootstrap.min.css. Doing so will set you up to fail when bootstrap gets updated. That is why the site.css file is included. This is where you can make changes to site that will still give you the responsive design you are looking for.
Here is the fiddle with it working
Add and define terms for the style="" to the input field, that's the easiest way to go about it:
Example:
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email" style="width:200px;">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" style="width:200px">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Bootstrap uses the class 'form-input' for controlling the attributes of 'input fields'. Simply, add your own 'form-input' class with the desired width, border, text size, etc in your css file or head section.
(or else, directly add the size='5' inline code in input attributes in the body section.)
<script async src="//jsfiddle.net/tX3ae/embed/"></script>
Bootstrap 3 I achieved a nice responsive form layout using the following:
<div class="row">
<div class="form-group col-sm-4">
<label for=""> Date</label>
<input type="date" class="form-control" id="date" name="date" placeholder=" date">
</div>
<div class="form-group col-sm-4">
<label for="hours">Hours</label>
<input type="" class="form-control" id="hours" name="hours" placeholder="Total hours">
</div>
</div>