I am trying to center a form in the center of the page, but everytime I center the col, the contents get pushed to the left side of that col. I want the form to be the full width of the col-md-6 and that col centered in the middle of the page.
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-2">Your Name:</div>
<div class="col-md-4">
<input type="text" name="uname" class="form-control" required="" placeholder="Your Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Email:</div>
<div class="col-md-4">
<input type="email" name="email" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Company:</div>
<div class="col-md-4">
<input type="text" name="company" class="form-control" required="" placeholder="Company Name">
</div>
</div>
<div class="row">
<div class="col-md-2">Your Contact:</div>
<div class="col-md-4">
<input type="email" name="contactemail" class="form-control" required="" placeholder="Email Address">
</div>
</div>
<div class="row">
<div class="col-md-2">Choose file(s):</div>
<div class="col-md-4">
<input name="files" type="file" id="files" multiple="multiple" class="form-control" required="">
</div>
</div>
<div class="row">
<div class="col-md-2">
<h5></h5>
</div>
<div class="col-md-4">
<input id="sbmtBtn" type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</div>
</div>
http://www.bootply.com/OiRABZIff0
Add col-md-offset-3 before col-md-2.
Have a look at the bootply here
Also not that col should be defined within rows and rows should be encapsulated within container, so I modified the html structure a bit as well.
Change your
<div class="col-md-6 col-md-offset-3">
to
<div class="col-md-7 col-md-offset-4">
I have edited. check out this help you.
http://www.bootply.com/QnYcyyIh2V
Related
I am trying to horizontally center the div id="lastrow"
<div class="container">
<div class="row" style="text-align:center">
<div class="col-md-12">Name: <input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company: <input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">Address: <input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City: <input type="text" id="city"> ST: <input type="text" id="stat"> Zip: <input type="text" id="zip1">-<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row" style="text-align:center">
<div class="col-md-12">E-Mail: <input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (<input type="text" id="area">) <input type="text" id="pho1">-<input type="text" id="pho2"> Extension: <input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row" id="lastrow" style="display: block;margin-left: 0;margin-right: auto; text-align:center">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
I am not sure if you need the CSS file as most of it is regarding widths.
Thank you for your time,
Don
If you are using bootstrap-4 call the default class text-center to align the div center. If you want to make the design better refer the bootstrap form.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row text-center">
<div class="col-md-12">Name:
<input type="text" id="name"><span class="vishid"> Name:</span></div>
<div class="col-md-12">Company:
<input type="text" id="comp"><span class="vishid"> Company:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">Address:
<input type="text" id="addr"><span class="vishid"> Address:</span></div>
<div class="col-md-12">City:
<input type="text" id="city"> ST:
<input type="text" id="stat"> Zip:
<input type="text" id="zip1">-
<input type="text" id="zip2"><span class="vishid"> City:</span></div>
</div>
<div class="row text-center">
<div class="col-md-12">E-Mail:
<input type="text" id="emai"><span class="vishid"> E-Mail:</span></div>
<div class="col-md-12">Phone: (
<input type="text" id="area">)
<input type="text" id="pho1">-
<input type="text" id="pho2"> Extension:
<input type="text" id="exte"><span class="vishid"> Phone:</span></div>
</div>
<div class="row text-center" id="lastrow">
<div class="col-md-12">
<div>
Message:
</div>
<div>
<textarea id="mssg"></textarea>
</div>
</div>
<div class="col-md-12">
<div id="recap" class="g-recaptcha" data-sitekey="aewrwgtearhrtjtsryjEFEdUAPN5CrFuM5l_1ZdSu7OH_g"></div>
</div>
</div>
</div>
Try to use bootstrap grid system, which is row and col class,
for example if you want to center the div write your div code between the following code.
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4">
//insert your div code to center
<form>
<div class="form-group row">
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext"
id="staticEmail" value="email#example.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-
label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword"
placeholder="Password">
</div>
</div>
</form>
<!-- a bootstrap col has 12 that's why am divide col by 4 to
center 4+4+4 = 12 -->
</div>
<div class="col-md-4">
</div>
</div>
</div>
//or follow this bootstrap forms layout to get this
https://getbootstrap.com/docs/4.3/components/forms/
I really need some help here. I've been messing with this form all day and I can't get these boxes to show where I need them to. I'll include a picture below of how I want it to look. I've been trying different things with form-inline and form-horizontal but it's just not working.
Any help would be appreciated.
Here's some of what I've been trying:
<form class="form-horizontal">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="First Name">
</div>
<label for="inputValue" class="col-md-3 control-label">Email Address</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Email Address">
</div>
</div>
</div>
</form>
You just need to make sure you're using the correct rows/cols, and don't use form-horizonal along with the grid columns.
<form class="row">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Key</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
http://www.codeply.com/go/e92EivkCaq
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>
I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it. I've read bootstrap documentation, tried to play with "row" class but i dont have the result i want.
Here's a picture of what i'm trying to do, it has to be in 1 form. I've seen a lot of question about this, but no one seems to fit my problem ( people wanted them vertical aligned or within 2 different forms )
If anyone can show me the way to do it, and if possible, some explanation about how to align things using rows, it would be awesome !
Try this ;)
<form class="form-horizontal" role="form">
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
</form>
http://jsfiddle.net/ttyneyq9/
You say 2 columns, but this configuration looks to me like it should be 4 columns. Because the labels should be their own column, and the textboxes should also be their own.
Something like this:
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-6 text-right">Pay by Phone/SMS</div>
</div>
I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it.
Because it's a form, you should really take advantage of Bootstraps .form-control and .form-group classes. Here is a sample fiddle for you to review http://jsfiddle.net/yongchuc/hzktphu6/. Bootstrap reference can be found here as well: http://getbootstrap.com/css/#forms
Shouldn't be too bad. You can do it a couple ways:
1) Split each row up into 4 columns
<div class="row">
<div class="col-md-2"><label for="Username">Username</label></div>
<div class="col-md-4"><input type="text" name="Username" /></div>
<div class="col-md-2"><label for="Membership">Membership></label></div>
<div class="col-md-4"><select name="Membership"></select></div>
</div>
<!-- Add other rows for both columns -->
2) Use nested rows/columns
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Username">Username</label></div>
<div class="col-md-9"><input type="text" name="Username" /></div>
</div>
<!-- Add other rows for first column -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Membership">Username</label></div>
<div class="col-md-9"><select name="Membership"></select></div>
</div>
<!-- Add other rows for the second column -->
</div>
</div>
In Bootstrap, each row consists of 12 columns by default. The column span is specified in the CSS class for each column (e.g. "col-md-3" will span 3 columns on medium sized screens or larger, for smaller screens the labels will go above the input). You'll just have to adjust the column spans to your liking.
For me it will be something like that
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Username</label></div>
<div class="col-md-9"><input type="text" name="Username" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Password</label></div>
<div class="col-md-9"><input type="password" name="Password" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Email</label></div>
<div class="col-md-9"><input type="email" name="Email" class="form-control" /></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Membership</label></div>
<div class="col-md-9"><select name="Membership">----options------</select></div>
</div>
<div class="row">
<div class="col-md-3"><label>Payment</label></div>
<div class="col-md-9"><select name="Payment">----options------</select></div>
</div>
</div>
</div>
and the reason why this is the better solution is because when it's displayed on mobile they will show below each others in the same order as they're written above
<form class="form-horizontal">
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Valet Parking</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Kids menus</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Car Parking</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">High chairs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Internet</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Play areas</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">TVs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Handicap accessible</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Outdoor seating</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Pets</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Smoking areas</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
What is the correct way to style form with bootstrap in the following scenario:
I need to use fieldset (that will be styled later)
I need to divide form into two columns
Each column has label+control, some will have label+control1+control2 etc.
I am new to bootstrap. I have come to the following solution (jsfiddle).
The question is: is this the correct way to do this? Does it not violate the bootstrap semantics?
I do not understand when to use form-group, am I using it correctly?
Should I not include some class="row" here for correct semantics?
HTML:
<div class="container">
... <some content here> ....
<form class="form-horizontal">
<fieldset>
<legend>Portfolio</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label3</label>
<div class="col-xs-8 form-inline">
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control1" />
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
I have seen all Bootstrap form examples, but I do not get how to separate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.
Column separation happens inside container elements.
Each time you have an element you want to do grid inside it, give it class="container" and in it u can use the normal row and column classes.
Also check Bootstrap's out of the box form styles.
Below are the bare bones, add on to it what u need (like text align etc)
<form class="container">
<div class="row">
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
</div>
</form>
I face this problem with bootstrap 4 and I found that whenever we want to divide inside our form into many columns we should use container and row class. because the bootstrap grid take its style from its parent (.container and .row)
see this example :
<main>
<div class="container-fluid mt-3">
<div class="row">
<form method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">Full Name</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">fatherName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">LastName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">salary</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">tax</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<button type="submit">save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</main>
I'am sure it will work!