Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to have two-column registration form using bootstrap 3, other pages of my website are fine except the registration page. My input fields and labels scattered all over the screen on the right side because I am using col-md-6 for to divide the page into two. The page looks like this now.
As you can see, the right side is idk, they are scattered. How to fix this side? My code is something like this in both sides:
<div class="container">
<div class="row">
<!-- start code on the left side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> First Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" name="firstname" id="firstname"
placeholder="Firstname" onKeyPress="return ValidateAlpha(event);" onblur="toUpper(this.value, this.id);"/>
</div>
</div>
</div>
<!-- left code ends here -->
<!-- start code on the right side of the page -->
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label"><font color="red"><b>*</b></font> E-mail</label>
<div class="col-sm-5 ">
<input type="text" class="form-control" name="email" id="email" placeholder= "email"
ondrop="return false;" onpaste="return false;" /></span>
</div>
</div>
</div>
<!-- right code ends here -->
</div>
</div>
Look at the codepen I've made for you
http://codepen.io/creativemind1/pen/QNYqqN
Kindly remove the !important from the css and make changes in your style.css
EDIT: You are not suppose to give any classes in label and <div class="col-md-6"> before input as it will automatically align for you.
Try clearfix class in bootstrap.
Codepen example http://codepen.io/smallyin/pen/vGbegv
Related
I am designing my first program with flask/python and using Bootstrap 5 for the front end. I have a modal that has at least 6 form rows, what is the best practices way to line up the form entry boxes so it looks good? Do I put it into 2 columns then put each form line in a separate row? Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected? Before I write/rewrite a bunch of tags and classes maybe someone could give me a brief guide/explanation. Thank you!
When you create a row with bootstrap, it take the original size of your div. Then all col-x will be a sub-division of this row (width)
what is the best practices way to line up the form entry boxes so it looks good?
It entirely depends on you. If you wish to have one label plus input per line(row) then you can do something like that:
<div class="row">
<div class="col-md-6">
<label for="input1">label1</label>
</div>
<div class="col-md-6">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="input2">label2</label>
</div>
<div class="col-md-6">
<input type="text" id="input2">
</div>
</div>
Or
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-12">
<label for="input1">label1</label>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="input2">label2</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-12">
<input type="text" id="input1">
</div>
</div>
<div class="row">
<div class="col-12">
<input type="text" id="input2">
</div>
</div>
</div>
</div>
Does the same result, but you will prefer to use the first solution
Do I put it into 2 columns then put each form line in a separate row?
This is correct
Is it correct to assume that the modal has its own column/row numbers that do not talk to the rest of the html, or is it somehow connected?
This is also correct, the row in you modal is not connected to the rest of the HTML
I guess you have already seen this page, but in case, here is the documentation: https://getbootstrap.com/docs/5.0/layout/grid/
I am new to bootstrap and learning it.I am trying to create an form page like this which i had made in JSP .This is a part of the page.
But when trying with bootstrap , all i could come up was something like this. I would like to know which form / guideness on how to proceed to recreate the content .I tried using plain html . But i couldnt come up with a form like the one i made in JSP
Try something like:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-inline">
<div class="row">
<div class="col-xs-6 form-group">
<label>Label 1</label>
<input class="form-control" type="text" />
</div>
<div class="col-xs-6 form-group">
<label>Label 2</label>
<input class="form-control" type="text" />
</div>
</div>
</form>
Based on:
Bootstrap 3 2-column form layout
I tried to use these data-equalizer on the foundation framework to be able to have the same height for each column and, from that, be able to center vertically a text in this column.
Here is the HTML:
<div class="row" data-equalizer>
<div class="small-2 columns" data-equalizer-watch style="background: #ff0000;">
<span>Monday:</span>
</div>
<div class="small-5 columns" data-equalizer-watch>
<label>Start Time
<input type="text" class="time start ui-timepicker-input" autocomplete="off" alt="{{timestampStart}}">
</label>
</div>
<div class="small-5 columns" data-equalizer-watch>
<label>End Time
<input type="text" class="time end ui-timepicker-input" autocomplete="off" alt="{{timestampEnd}}">
</label>
</div>
I also created a JSFiddle in order that you can see what I meant --> I want that the red background of the "Monday" goes until the end of the row.
Thanks for help.
Working version here: Fiddle
Make sure you include the Foundation equalizer script and initialise Foundation on page load.
$(document).foundation();
I'd like some form fields to be side by side when there's width available on the client, and stacked neatly when there isn't. It's almost working, but not quite "stacked neatly". Here's the markup ...
<div class="form-group">
<div class="col-md-3">
<input type="text" placeholder="State" class="form-control" ng-model="family.state">
</div>
<div class="col-md-4">
<input type="text" placeholder="Zip" class="form-control" ng-model="family.zip">
</div>
<div class="col-md-4">
<div class="checkbox">
<input type="checkbox" ng-model="family.listAddress">List address</input>
</div>
</div>
</div>
Here's the wide result, which is as desired:
But here's the narrow result which is not quite right (because of the missing vertical space):
What does your CSS look like? You can add a class to all of these divs and apply a simple margin: 5px; and that could solve your problem.
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms