I am trying to center everything in a form, with the labels and the values in input fields. This works, except when using the input-group-append class in Bootstrap. The input field and the appended button is treated as one and the entire thing is centered. How can I center just the input field?
It looks like this:
My code:
<div class="col-lg-12 text-center">
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="firstname">Name</label>
<input name="firstname" class="form-control" style="text-align:center"type="text" value="john">
</div>
</div>
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="email">E-mail</label>
<div class="input-group">
<input name="email" type="text" class="form-control" style="text-align:center" value="info#domain.com">
<span class="input-group-append numspan">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
</div>
</div>
Related
I am trying to do something like this. http://www.lolnexus.com/
I am trying to build the search module but cannot get my form to vertically stack. How can I go about this better using bootstrap. I am trying to build the part where it says enter summoner name and under that the radio buttons but I cant seem to figure how to get that alignment at least the vertical alignment. Custom styling can come later.
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-6 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-6 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
Did you try changing column width of form-groups to 12 columns?
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-12 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-12 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<form class="form" role="form" method="post">
<div class="form-group">
<input type="search" class="form-control" size="100" id="mySearch" placeholder="Search for Summoner Name" />
</div>
<div class="form-group form-inline">
<div class="radio">
<label>
<input type="radio" name="region" id="NA" value="NA" />
NA
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="region" id="EUW" value="EUW">
EUW
</label>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>
There are lots of different classes you can use. I recommend you study bootstrap better to understand it. My example is for a form that spans the width of the container. Below the search input are the radio buttons. Below them is the search button. Bootstrap, by default is a 12 column layout. You were specifying 6 columns in width which placed the elements next to one another instead of vertically. You can just add the form-inline class to the form-group divs to make those particular elements inline. The form-control class makes the control span the width of its container.
Not sure what you trying to do, but if you are trying to have input and the button in one row and the radio buttons underneath, just put both form-groups in a separate row as well and also add col-md-offset-3 so it will be in the middle.
I have a row with three inputs, two of the inputs have labels to their left. What is happening is the label is being displayed on top of the input box rather than to the side, like so:
Here is what I am trying to achieve:
<div class="row">
<div data-bind="foreach: items" class="padding-left-lg">
<div class="col-sm-4">
<input type="text" data-bind="value: Description,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
<div class="col-sm-4">
<label class="control-label">
Quantity: <input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</label>
</div>
<div class="col-sm-1">
<input type="text" data-bind="value: Units,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
</div>
I would try something like this:
<form class="row form-horizontal">
<div class="col-sm-5">
<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>
<div class="col-sm-5">
<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>
<div class="col-sm-2">
<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>
</div>
</form>
Here is the fiddle I made https://jsfiddle.net/g3e8yjyg/.
What is different from the default Bootstrap example? You treat your form as a row or a set of rows, and each formgroup becomes a cell, where you will only vary the value of the size. This will allow you to put many fields in a single row.
<form class="row">
<!--Columns -->
<div class="col-lg-*">
<!--Your form group in here -->
<div class="form-group">
<!--The elements of you formgroup treated as col divs-->
<label for="inputPassword3" class="col-lg-*">Your label</label>
<div class="col-lg-*">
<input name="my-input">
</div>
</div>
</div>
<!--Columns -->
<div class="col-lg-*">
...
</div>
</form>
Add the form-inline class to your form, add the form-group class to the containing div, and move the input tag out of your label tag:
<form class="form-inline">
<div class="form-group col-sm-4">
<label class="control-label">Quantity:</label>
<input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/
So I'm working in bootstrap for the first time and I'm making a form, like so:
<div class="input-group col-xs-2">
<label>Voornaam:</label>
<input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
<label>Achternaam:</label>
<input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
<label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
<div>
<div class="form-inline">
<div class="form-group col-xs-9">
<input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
</div>
<div class="form-group col-xs-3">
<input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
</div>
</div>
</div>
</div>
Now, I've got a problem with the indentation of the "form-inline" part. For some reason, it's more indented than the other parts of the form.
image of result: http://puu.sh/g874J/2579b314e4.png
Any idea why this is the case and how I can make it so that the indentation is the same for every part of the form?
Your col-xs-X class adds an extra padding to div.
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/