I have an HTML page in which I have different input fields, some with a unit and some without one.
When I add an input-group-addon class to the span, the width of the whole input gets totally messed up.
My question is, what can I do so that my input "Field 1" is aligned with the other two, both on the left and on the right ?
I tried adding a margin-left: 15px; on the field 1, but unfortunately, this gives this ouput, which is not looking great.
I am using Bootstrap for the fields. Thanks.
Here is the code for the HTML:
.inputUnite {
margin-left: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
<div class="composant">
<div class="form-group row">
<div class="col-md-12">
<div class="control-label">
<label for="input_A2B"><span class="symbol-required">*</span><span>Field 1</span></label>
</div>
</div>
<div class="col-md-6 input-group">
<input class="form-control inputUnite" aria-invalid="false" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">
<span class="input-group-addon" id="unit_A2B">cm</span>
</div>
</div>
</div>
</div>
<div>
<div class="composant">
<div class="form-group row">
<div class="col-md-12">
<div class="control-label">
<label for="input_T5ZA2"><span class="symbol-required">*</span><span>Field 2</span></label>
</div>
</div>
<div class="col-md-6">
<input class="form-control" aria-invalid="false" required="required" data-format="alphanumerique" maxlength="2" id="input_T5ZA2" name="T5ZA2.value" value="" data-spinnertabindex="null" tabindex="null">
</div>
</div>
</div>
</div>
<div>
<div class="composant">
<div class="form-group row has-error">
<div class="col-md-12">
<div class="control-label">
<label for="textarea_A3D"><span class="symbol-required">*</span><span>Field 3</span></label>
</div>
</div>
<div class="col-md-6">
<textarea class="form-control has-error" aria-invalid="true" required="required" data-format="alphabetique" maxlength="558" id="textarea_A3D" name="A3D.value" data-spinnertabindex="null" tabindex="null"></textarea>
<p class="letter-count" aria-live="polite"><span>558</span> caractères restants</p>
</div>
</div>
</div>
</div>
Adding another class inside the div col-md-6 was the reason it messed up.
So what I did was to separate the code in two different , as follows:
<div>
<div class="composant">
<div class="form-group row has-error">
<div class="col-md-12">
<div class="control-label">
<label for="input_A2B">
<!-- caractère obligatoire -->
<span class="symbol-required">*</span>
<span>Field 1</span>
</label>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input class="form-control" aria-invalid="true" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">
<span class="input-group-addon" id="unité_A2B">cm</span>
</div>
</div>
</div>
</div>
</div>
If all you wont is to margin 15px to the left, move the class inputUnite (the one you defined), from the form-control div to the parent div, the input-group.
That will apply the changes to the all input group, the input and the 'cm' span.
For that style to apply only on the input-group, you need to wrap the col-md-6 div with a row div' and seperate the all the outher input fileds to another row div.
In the code below I added a second input field so we could see the relative position, each input is in is own row div.
<div>
<div class="composant">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="control-label">
<label for="input_A2B">
<span class="symbol-required">*</span>
<span>Field 1</span>
</label>
</div>
</div>
<div class="col-md-6 inputUnite input-group">
<input class="form-control" aria-invalid="false" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value"
value="" data-spinnertabindex="null" tabindex="null">
<span class="input-group-addon" id="unit_A2B">cm</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="control-label">
<label for="input_A2C">
<span class="symbol-required">*</span>
<span>Field 2</span>
</label>
</div>
</div>
<div class="col-md-6">
<input class="form-control" id="input_A2C" aria-invalid="false" required="required" data-format="numeric">
</div>
</div>
</div>
</div>
codepen
Just remove your input-group from the .col-md-6 and make an another div inside .col-md-6 with class input-group for better understanding of code.
Also use .container or .container-fluid class outside of .row...
No need to use .inputUnite class here...
Stack Snippet
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
<div class="composant">
<div class="form-group row">
<div class="col-md-12">
<div class="control-label">
<label for="input_A2B"><span class="symbol-required">*</span><span>Field 1</span></label>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<input class="form-control inputUnite" aria-invalid="false" required="required" data-format="numeric" maxlength="6" id="input_A2B" name="a2b.value" value="" data-spinnertabindex="null" tabindex="null">
<span class="input-group-addon" id="unit_A2B">cm</span>
</div>
</div>
</div>
</div>
<div class="composant">
<div class="form-group row">
<div class="col-md-12">
<div class="control-label">
<label for="input_T5ZA2"><span class="symbol-required">*</span><span>Field 2</span></label>
</div>
</div>
<div class="col-md-6">
<input class="form-control" aria-invalid="false" required="required" data-format="alphanumerique" maxlength="2" id="input_T5ZA2" name="T5ZA2.value" value="" data-spinnertabindex="null" tabindex="null">
</div>
</div>
</div>
<div class="composant">
<div class="form-group row has-error">
<div class="col-md-12">
<div class="control-label">
<label for="textarea_A3D"><span class="symbol-required">*</span><span>Field 3</span></label>
</div>
</div>
<div class="col-md-6">
<textarea class="form-control has-error" aria-invalid="true" required="required" data-format="alphabetique" maxlength="558" id="textarea_A3D" name="A3D.value" data-spinnertabindex="null" tabindex="null"></textarea>
<p class="letter-count" aria-live="polite"><span>558</span> caractères restants</p>
</div>
</div>
</div>
</div>
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'm creating a form on my event management system website to allow you to create events. The page is using Bootstrap on the Admin-LTE template.
I have split part of the form into two columns. On the right column is a section to enter the number of spaces on the event and on the left is a section to enter the start and end date and time of the event. I wrote the HTML code for the right side first and am now trying to do the left side, however for some reason the space between the bootstrap rows on the page has changed despite the only different between each side is changing the check box to a number input (I will eventually add a datepicker drop down to this, however the same issue occurred when I tried it previously) and a few others changes in the naming of inputs.
Any suggestions to fix it would be very appreciated!
<div class="box box-primary">
<div class="box-body">
<div class="input-group">
<span class="input-group-addon">Event Title</span>
<input type="text" class="form-control" placeholder="Event Title" id="txtEventTitle">
</div>
<br>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-lg-4">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
</div>
</div>
</div>
</div>
I've switched the way my rows and columns are organised, so that each side is assigned into a row before the left or right columns and therefore the height of the checkboxes will also affect the left side of the page. I then decided to re-order them so it made a bit more sense.
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Date</span>
<input type="number" class="form-control" placeholder="Start Date" id="dteEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">Start Time</span>
<input type="number" class="form-control" placeholder="Start Time" id="timeEStart">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Date</span>
<input type="number" class="form-control" placeholder="End Date" id="dteEEnd">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon">End Time</span>
<input type="number" class="form-control" placeholder="End Time" id="timeEEnd">
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Male Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEMaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEMaleS">Unlimited Spaces</label></div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon">Female Spaces</span>
<input type="number" class="form-control" placeholder="Event Title" id="numEFemaleS">
</div>
</div>
<div class="col-md-2">
<div class="checkbox"><label><input type="checkbox" id="cbxEFemaleS">Unlimited Spaces</label></div>
</div>
</div>
I have problem with responsive design. So i have components:
Here is code:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
The problem is when i change size of window - i have this ugly destroyed design:
How i can fix it? (only bootstrap if it's possible)
UPDATE
Using advices i've add pull-left to all columns and everything is okay.
But when i little bit ensmall size there are result:
Bit of a guess right now, not sure if you want the form items to reflow or not. What is the expected result? Should each input be on it's own row (i.e. 4 rows of inputs)? Or should the two inputs per row be maintained at all sizes?
Here is an answer to place each input on their own row at the breakpoint.
Remove .pull-left from the first column in each row.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
Here is a solution for maintaining two inputs per row. You need to use a different column class. Currently you're using the medium -md- class. Here I have used the extra small -xs- class. See Bootstrap Grid Options for different column classes.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<div class="container">
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-5">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
I think you just need add the "pull-left" to all the column <div> tags like mentioned below:
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>City</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>Postal code</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-md-7 pull-left">
<div class="form-group">
<label>Street</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-md-5 pull-left">
<div class="form-group">
<label>House</label>
<input type="text" class="form-control">
</div>
</div>
</div>
I and able to get decent result.
Note: Using bootstrap
Here is what I am going for:
Code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<style>
.jumbotron
{
margin-top: 20px;
}
.input-group, textarea
{
margin-bottom: 10px;
}
</style>
<body>
<div class = "container">
<div class = "jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-2">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class = "col-md-4">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-8">
<textarea class="form-control" rows="3" placeholder = "Additional comments"></textarea>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
Demo fiddle
I'm trying to place an image alongside my form as shown in figure 1.
I've tried various ways: ie. columns within columns, fluid containers etc.
Using these ways has resulted in the text boxes getting shorter and a big margin between the form and image.
It seems that the rows take up 100% width of the container and width can't be adjusted by using CSS
Any ideas on how to do this?
Also how would I center the form? Can't seem to do that also using methods that work with other elements
You just need a nested row structure. The outer columns are wrappers for the form structure and the image. The inner columns that contain your form themselves add up to 12.
Fiddle
Note that I've converted all columns to XS for the demo, and that the two short ones don't fit well at small screen sizes.
.row > div {
margin: 5px 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div class="container">
<div class="jumbotron text-center">
<h2>Form</h2>
</div>
<div class="row">
<div class="col-xs-8">
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</form>
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://placehold.it/800x600" />
</div>
</div>
</div>
You should use Bootstrap's grid classes and divide your <form> section and image section into two parts.
Look at this Codepen.
Hope this helps!
I let you here a fiddle working.
.jumbotron {
margin-top: 20px;
}
.input-group,
textarea {
margin-bottom: 10px;
}
img{width:100%}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="jumbotron text-center">
<h2>Form</h2>
</div>
<form>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">First Name:</span>
<input type="text" class="form-control" placeholder="First Name" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Last Name:</span>
<input type="text" class="form-control" placeholder="Last Name" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Age:</span>
<input type="text" class="form-control" placeholder="Age" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-3">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Gender:</span>
<input type="text" class="form-control" placeholder="Gender" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Email Address:</span>
<input type="text" class="form-control" placeholder="Email Address" aria-describedby="basic-addon1">
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Phone Number:</span>
<input type="text" class="form-control" placeholder="Phone Number" aria-describedby="basic-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<textarea class="form-control" rows="3" placeholder="Additional comments"></textarea>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-default btn-lg">Submit</button>
</div>
</div>
</div>
<div class="col-md-3">
<img src="http://txtbits.com/wp-content/uploads/2015/07/bootstrap.png">
</div>
</div>
</form>
</div>
The thing here is that you should understand that Bootstrap use a grid system made by 12 columns. When you declare a row, you have to keep in mind that it has 12 gaps to fill with your columns.
To implement a layout like yours, you shouldn't try to fit an element, like your image, which takes several rows height. In spite of that, it's better to create two columns, one for the inputs and another one for the image. Then inside the filed's column, just add as many rows as you need and fill then with the necessary columns, always keeping in mind that you have to fill 12 gaps.
You just have to take one row and two columns(or you can add divide manually with col-6) and bootstrap will adjust its width andenter image description here with div, you can add one form and your image each side and it will pop up perfectly.
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!