I want this button to be aligned horizontally, i'm using bootstrap.min.js v3.0.0, bootstrap.min.css, application.css.
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group">
<label>Fecha desde</label>
<div class="input-group date datepicker" >
<input class="form-control col-md-12" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-4 col-xs-6 form-group">
<label>Fecha cierre</label>
<div class="input-group date datepicker">
<input class="col-md-12 form-control" type="text" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-4 col-xs-12">
<input type="button" class="btn btn-success" style="alignment-adjust:central;" value="Buscar" onclick="cargarLista();"/>
</div>
I have:
I want:
I really appreciate any help you can provide!
Bootstrap is only a framework to help you get started, there are times that you would need to add or override from it's base code.
This is one of those times.
How to proceed:
you have wrapping the button a <div> add a class to that div called align-bottom.
then, create a file called application.css (if you don't have it yet) in the same place as your CSS files and remember to place that <link> below the bootstrap calls
for example:
<link href="/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="/assets/css/application.css" rel="stylesheet" />
and inside that application.css write the style:
.controls.align-bottom {
line-height: 90px;
}
Note that you could need to change the 90px up or down in order to make it correctly.
demo in JsBin: http://jsbin.com/vajut/2/edit?html,css,output
This is one of the ways... there are others, CSS is a really big and lovely thing!
Looks like you used <legend> on your text inputs.
Easy fix would be to add:
<legend> </legend>
To your button input
Related
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 am fairly new to Bootstrap and I'm trying to make a simple form, all elements of which are in a single line on the screen. My html code for the form looks something like this:
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label>Search by:</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label>Something:</label>
<input class="form-control" type="text">
</div>
</div>
</fieldset>
</form>
By default, the labels for my input fields appear about the input fields. I want them to be on the left side of the input fields. I've googled and checked on here how to implement this, but none of the solutions I found have worked (I tried adding classes to my form and changing their CSS, and tried using bootstrap's form-inline functionality).
Does anyone know how I could make the form look how I want it to look?
You will want to make two modifications to each form group in order to utilize the bootstrap grid system.
not sure which version of BS you are using but for grid it is the same concept: https://v4-alpha.getbootstrap.com/layout/grid/
You will want to use bootstrap grid system to define that the label and input on are the same line. Keep in mind that there are 12 columns in 1 row so items you want to be on the same line must add up to 12.
Add the following classes to your label: "col-lg-2 col-md-2 col-sm-2 control-label"
Wrap your input in a div and add the following classes: "col-lg-10 col-md-10 col-sm-10"
You will notice that between these two elements, the columns add up to 12 so in the bootstrap grid system, they will be on the same line.
(I also wrapped this in a container just for a more tidy display on this post)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<form class="form-horizontal">
<fieldset>
<div class="form-container">
<div class="form-group">
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Search by:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Something:</label>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<input class="form-control" type="text">
</div>
</div>
</div>
</fieldset>
</form>
</div>
When using the has-feedback class to add an icon on a form field and using the bootstrap tooltip, the icon moves up. I get the same behavior with chrome, firefox and ie.
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback">
<input class="form-control" name="foo" placeholder="foo" data-toggle="tooltip" title="Hooray!" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
JS File
$('[data-toggle="tooltip"]').tooltip();
Here the example
Bootply
Does anyone know how to solve this problem? Thank you
The reason for it failing is this Bootstrap selector:
.form-group-lg .form-control+.form-control-feedback {...}
When you hover the field, the tooltip's <div> is inserted immediately after the input, thus breaking the + condition since the icon is no longer immediately following the input. A solution is to move the tooltip on the parent element, so that it doesn't interfere with children styling:
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="form-group form-group-lg has-feedback" data-toggle="tooltip" title="Hooray!">
<input class="form-control" name="foo" placeholder="foo" type="text">
<span class="glyphicon glyphicon-euro form-control-feedback"></span>
</div>
</div>
</div>
Demo: http://www.bootply.com/tohoEsh0cX
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 a row that is split down into various columns and sub-columns. In the proper example there are several more inputs but I've removed them for clarity as they're not needed for this example.
<form id="inputForm" class="form-inline" role="form">
<div class="row">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="col-xs-6">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon">mm</span>
</div>
</div>
<div class="col-xs-2">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</form>
If you look at http://jsfiddle.net/53vu25ad/ you can see the issue as "Primary Packaging" and "Vol: 999 cm3" are not vertically aligned within the row - they're top aligned. Is there something I'm missing here?
(ps: On my form, the "height" label and the input element are on the same line, I have no idea why they're not in this jsfiddle, but it's not relevant to the question - I would still expect to see the two labels either side aligned vertically).
Using bleeding-edge not-yet-released Bootstrap v3.2.1: JS Fiddle
The trick is to use a dummy .form-control-static:
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
<p class="form-control-static"> </p>
</div>
</div>
Well without using experimental bootstrap, the way I got around this was adding a simple custom class that matched the form-control element height of 34px.
By setting the row line-height to the same, it automatically valigns content.
.fixedRow {
line-height: 34px;
}
<div class="row fixedRow">
<div class="col-xs-4">
<label class="control-label">Primary Packaging:</label>
</div>
...
Updated jsfiddle: http://jsfiddle.net/53vu25ad/2/
Please find the updated jsfiddle
You may need to use the .form-group class for .form-inline
<form id="inputForm" class="form-inline" role="form">
<div class="form-group">
<label class="control-label">Primary Packaging:</label>
</div>
<div class="form-group">
<label for="pack1Height" class="control-label">Height:</label>
<div class="input-group">
<input type="text" id="pack1Height" class="form-control small text-right" />
<span class="input-group-addon fw1">mm</span>
</div>
</div>
<div class="form-group">
<label class="control-label">Vol:</label>
<label class="control-label">999</label>
<label class="control-label">cm<sup>3</sup></label>
</div>
</div>
</div>
</form>