I have a form that I want to center on the page. The labels are centered but for some reason, I can't center the input with the form-control class.
It is rendering like this right now...
[EDIT: the display: block; inside form-control is causing the issue. Not sure why, how can I disable it]
#centered {
text-align: center;
}
<div id='centered'>
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>
You can try to change the display property of all form-control inside that div:
#centered .form-control {
display: inline;
}
Use the class mx-auto
/* CSS used here will be applied after bootstrap.css */
#centered {
text-align: center;
width:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id='centered' class="mx-auto">
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>
Related
I am having trouble making the radio button area (input-group-addon) the same size in col-sm-4 and col-sm-6 columns. I looked at some other answers where people used min-width and this solution did not work for me. I would like a uniform width for my radio button controls. Here is a visual example. My first radiobutton (input-group-addon) is wider than the second input-groups imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
here is the fiddle https://jsfiddle.net/DTcHh/20504/
I think you are making a bit of confusion with input-group-addon element.
An input-group-addon should be coded as follows:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Therefore your code should be like:
<div class="input-group">
<span class="input-group-addon"> <!-- don't need radio-width -->
<input type="radio" name="anyDate" value="anyDate">
</span>
<input type="text" class="form-control input-full">
</div>
Fiddle here.
I´m trying to stop/break the form-inline class inside just one div.
I have three input fields.
I´d like the two first one left side, ontop of each other.
And the third on the rigth side of them.
check Fiddle
https://jsfiddle.net/rjc5s1vn/
This is a pretty large form, so i don´t like to remove form-inline from the parent form.
HTML
<form class="form-inline well col-md-10">
<!-- Produkt input-->
<div class="input-group col-md-4 form">
<div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
<input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
<br>
<div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
<input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
</div>
<!-- Adress Textarea -->
<div class="input-group col-md-4">
<div class="input-group-addon"><i class="fa fa-truck"></i></div>
<textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required> </textarea>
</div>
</form>
Try the following: https://jsfiddle.net/rjc5s1vn/3/
I wrapped your inputs and glyphicons pairings into two wrapping <div class="test">:
<form class="form-inline well col-md-10">
<!-- Produkt input-->
<div class="input-group col-md-4 form">
<div class="test">
<div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
<input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
</div>
<br>
<div class="test">
<div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
<input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
</div>
</div>
<!-- Adress Textarea -->
<div class="input-group col-md-4">
<div class="input-group-addon"><i class="fa fa-truck"></i></div>
<textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required></textarea>
</div>
</form>
CSS:
.form-inline > .input-group:first-child > .test {
display: block;
}
.form-inline > .input-group:first-child > .test div, .form-inline > .input-group:first-child > .test input {
display: inline-block;
float: left;
}
I solved it like this:<br>
Notice more nestled <div><br>
<!-- Product input-->
<div class="col-md-4" style="padding-left: 0px">
<div class="input-group input-group-sm col-md-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
<input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control">
</div>
<br>
<div class="input-group input-group-sm col-md-12">
<div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
<input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control" required>
</div>
</div>
I have a solution. You can try by this way. I just used core bootstrap and some css. Have a look on my demo
<form class="form-inline well col-md-10">
<div class="item">
<div class="input-group input-group-sm input_item">
<span class="input-group-addon" id="sizing-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group input-group-sm input_item">
<span class="input-group-addon" id="sizing-addon1">#</span>
<textarea class="form-control" placeholder="Username" aria-describedby="sizing-addon1"></textarea>
</div>
<div class="input-group input-group-sm input_item">
<span class="input-group-addon" id="sizing-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="clearfix">
</div>
</div>
</form>
.form-inline .item .input_item{
width:calc(50% - 7.5px);
margin-bottom:15px;
}
.form-inline .item .input_item textarea{
min-height:75px;
}
.form-inline .item .input_item:first-child{
float:left;
}
.form-inline .item .input_item:nth-child(2){
float:right;
}
.form-inline .item .input_item:last-child{
float:left;
}
Try out this
<form class="form-inline">
<div class="input-group col-md-4 form">
<div class="input-group-addon"><i class="glyphicon glyphicon-wrench"></i></div>
<input id="produkt" name="produkt" type="text" placeholder="Produkt" class="form-control input-sm">
<br></div>
<div class="input-group col-md-4 form">
<div class="input-group-addon"><i class="glyphicon glyphicon-transfer"></i></div>
<input id="objekt_lev_dat" name="objekt_lev_dat" type="text" placeholder="Leverans datum" class="form-control input-sm" required>
</div>
<div class="input-group col-md-4">
<div class="input-group-addon"><i class="fa fa-truck"></i></div>
<textarea class="form-control" id="objekt_mont_adress" name="objekt_mont_adress" rows="3" placeholder="Adress" required></textarea>
</div>
</form>
See Demo
I don't know why, but i couldn't manage to align my labels (Label1 and Label2 here) with the input-group that follows each.
Here's my code :
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="row">
<div class="form-group col-md-6">
<label for="De_:_">Label1 : </label>
<div class="input-group">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
<div class="form-group col-md-6">
<label for="A_:_">Label2 : </label>
<div class="input-group">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
</div>
</div>
</div>
I did a fiddle too.
I inspired me from this http://getbootstrap.com/css/#forms-inline but I must have missed something :/
First you've missed to add an <form> element with class form-inline (or you haven't included it in your question).
Second your content in the .col-md-6 divs - .input-group is with higher width that's why it goes on the next line.
You have two options: you can make the inputs with lesser width or you can use col-* and build the form in a grid.
Here's an example for the second option:
<div class="form-group col-md-6">
<label for="De_:_" class="col-xs-2">Label1 : </label>
<div class="input-group col-xs-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
Demo: http://jsfiddle.net/axa0rz44/2/
This is the default behavior of Lables in HTML.
For inline lables, have a look at Horizontal-form, Bootstrap documentation
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<p style="font-family:monospace; color:red; text-align:center"> see in <b><i>Full Page</i></b> view, use other grid classes for smaller viewport.</p>
<div class="row">
<div class="form-group form-horizontal col-md-6">
<label class="col-md-2 control-label" for="De_:_">Label1 : </label>
<div class="input-group col-md-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateBeginModif" name="DateBeginModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunBeginModif" name="RunBeginModif" placeholder="Run" type="text" value="">
</div>
</div>
<div class="form-group form-horizontal col-md-6">
<label class="col-md-2 control-label" for="A_:_">Label2 : </label>
<div class="input-group col-md-10">
<span class="input-group-addon">Date</span>
<input class="form-control" id="DateEndModif" name="DateEndModif" placeholder="Date" type="text" value="1/1/0001 12:00:00 AM">
<span class="input-group-addon" style="border-left: 0; border-right: 0;">ou Lancement</span>
<input class="form-control" id="RunEndModif" name="RunEndModif" placeholder="Run" type="text" value="">
</div>
</div>
</div>
Ok I've got headache at this point and this thing irritates me. (Hours wasted for this)
For some reason, font awesome icon has bottom margin while bootstrap's glyph seems fine.
Please check http://jsfiddle.net/damjd2sj/
<body>
<div class="container">
<form>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="fa fa-camera-retro form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /container -->
Set line-height for the form input
.form-control-feedback.fa {
color: #3c763d;
line-height: 34px;
}
JSFiddle
The problem was that the .fa line-height: 1 was overriding default .form-control-feedback line-height: 34px
I would like to control the size of my input elements using the class .col-lg-* outlined here on the bootstrap website. However, putting the <span> element inside of a div completely messes it up:
HTML with div:
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<div class="col-lg-10">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
How can I set the width of the input elements so that they are all the same?
I want the left margin of each input element to be flush like so:
This is what it looks like now:
This is my current HTML:
<div class="col-md-6">
<div class="content">
<h2>Income</h2>
<form class="form-income form-horizontal" role="form">
<div class="input-group input-group-lg">
<label for="" class="control-label">Paycheck</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Investments</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<div class="input-group input-group-lg">
<label for="" class="control-label">Other</label>
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Update</button>
</form>
</div>
LIVE EXAMPLE: http://jsfiddle.net/jfXUr/
As per my comment above, try grouping the label and .input-group together with a .form-group container.
<div class="form-group">
<label for="" class="control-label">Paycheck</label>
<div class="input-group input-group-lg">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" id="">
</div>
</div>
Demo here - http://jsfiddle.net/jfXUr/1/