I am building a form with Boostrap 3's form-horizontal and using the grid system col-md-* to keep the labels and inputs aligned. It displays correctly when the browser window is 1200px or more wide, but when less and the media queries kick in, the labels attached to each input overlap the inputs to the left of them, instead of keeping apart or stacking vertically.
See this pen: https://codepen.io/chrisjbird/pen/XgZmZe
How do I stop them overlapping?
Your TextBox Is Overlapping So You can increase the width of textbox and give the margin:12px
input{
margin :12px;
max-width:100%;
}
input{
margin:12px;
max-width:100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<form class="form-horizontal" action="http://mess/cgi-bin/websms/addmsg" target="iframe">
<div class="form-group">
<label class="col-md-1" for="username">username:</label>
<div class="col-md-2">
<input type="text" id="username" name="username">
</div>
<label class="col-md-1" for="password">password:</label>
<div class="col-md-2">
<input type="text" id="password" name="password">
</div>
</div>
<div class="form-group">
<label class="col-md-1" for="app">app:</label>
<div class="col-md-2">
<input type="text" id="app" name="app">
</div>
<label class="col-md-1" for="origin">origin:</label>
<div class="col-md-2">
<input type="text" id="origin" name="origin">
</div>
</div>
<div class="form-group">
<label class="col-md-1" for="sender">sender:</label>
<div class="col-md-2">
<input type="text" id="sender" name="sender">
</div>
<label class="col-md-1" for="depart">depart:</label>
<div class="col-md-2">
<input type="text" id="depart" name="depart">
</div>
</div>
<div class="form-group">
<label class="col-md-1" for="destno">destno:</label>
<div class="col-md-2">
<input type="text" id="destno" name="destno">
</div>
</div>
<div class="form-group">
<label class="col-md-1" for="valperiod">valperiod:</label>
<div class="col-md-2">
<input type="text" id="valperiod" name="valperiod">
</div>
<label class="col-md-1" for="priority">priority:</label>
<div class="col-md-2">
<input type="text" id="priority" name="priority">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-1">
<button type="submit" class="btn">Submit</button>
<input type="checkbox" name="debug">Debug info
</div>
</div>
</form>
</body>
NOTE: REMOVE row form form-group this code
<div class="form-group row">
<label class="col-md-1" for="app">app:</label>
<div class="col-md-2">
<input type="text" id="app" name="app">
</div>
<label class="col-md-1" for="origin">origin:</label>
<div class="col-md-2">
<input type="text" id="origin" name="origin">
</div>
</div>
Your second <div class="form-group"> tag has a row class on it, removed that and it'll stack just like the others.
You also have both Bootstrap 3 and 4 loaded onto that pen, you should remove BS4 as it could cause some issues.
Related
I wanted to create a form using bootstrap.
When tried to create it gave unwanted margin on the right of the input. I have tried to check out the margins in the browsers console. It might be a minor thing but unable to figure it out. I am also attaching a screen shot.
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="tenantForm" class="container">
<center> <h4>Login Form</h4></center>
<hr />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<div>
Remove the class container from <div id="tenantForm" class="container">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-lg-8 col-md-8 col-sm-12">
<div class="panel panel-default">
<div class="panel-body">
<div id="tenantForm">
<center>
<h4>Login Form</h4>
</center>
<hr />
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</div>
Just remove class="container" from <div id="tenantForm" class="container">, live demo here
https://codepen.io/msolimans/pen/KXjGBz
I'm trying to create a form that will appear in a modal window and I have the form looking exactly what I want. Here's my HTML (only showing the first row because I believe the right solution will apply to all my rows)
<div class="container">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-8">
<form action="#" method="post">
<fieldset>
<legend style="width: 80%">Base Information</legend>
<div class='row'>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-5'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-2"> </div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
The problem I'm facing is that I'm currently viewing this using Chrome and when I horizontally resize the browser window to less than 760 pixels, all the form elements are stacked on top of each other.
As you can see there's a lot of spacing to the right I'm trying to get rid of.
Does anyone have any suggestions on how I can eliminate the padding on the right?
col-xs instead of col-sm would help with the breakpoint issue. You also seem to have empty space on the right because you specified two columns of empty space <div class="col-sm-2"> </div>. Bootstrap's grid system is based uon 12 columns per row, so the two column spanning div would be occuping space.
Bootstrap suggests 12 columns. Your layout uses only 9 of them:
<div class="col-sm-1"> </div>
<div class="col-sm-8">
...
</div>
You can use col-sm-10 col-sm-offset-1 instead of col-sm-8, <div class="col-sm-1"> </div> and <div class="col-sm-2"> </div> (offsetting columns):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<form action="#" method="post">
<fieldset>
<legend>Base Information</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="user_firstname">First name</label>
<input class="form-control input-sm" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="user_lastname">Last name</label>
<input class="form-control input-sm" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):
<div class="col-sm-1">
<div class="form-group">
<textarea placeholder="Description" class="form-control" rows="1" required></textarea>
</div>
</div>
<div class="col-sm-1">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
etc.
which results in:
Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.
Does anybody know how I can style this better? All tips are welcome!
You could override the padding on the col-sm-* with a class like this
.inputItem {
padding-left: 2px;
padding-right: 2px;
}
This might be useful.
You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.
#media (min-width: 768px) {
form .form-gutter >[class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
}
form .form-control,
form .input-group-addon {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<div class="container-fluid">
<h1>Form </h1>
<div class="row form-gutter">
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<input placeholder="Contract rental" class="form-control" type="text">
<div class="input-group-addon">€</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</form>
I want to align 2 input groups, one with span 8 & other with 4 next to each other. I used form inline but it doesn't take the intended width.
<div class="form-inline">
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-8" placeholder="Username">
<!-- </div> -->
</div>
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-4" placeholder="Ref No.">
</div>
</div>
try the following css
.form-group{
float:left;
}
After playing around i found this solution:
HTML
<div class="row form-input">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="ref no.">
</div>
</div>
<div class="row form-input">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Monthly Rent">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Deposit">
</div>
</div>
CSS
.form-input, .form-input input{
margin-top: 10px;
}
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!