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.
Related
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>
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 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
I am new to HTML. I am wondering if you could have two forms setting next to each other in parallel in HTML. I have generated this sample GUI with Tkinter and I want to generate a HTML file for the GUi with Bootstrap style.
Something like this would do it: (The borders are just so you can see the effect.)
div
{
border: 1px solid red;
}
#left
{
float: left;
width: 64%;
}
#right
{
float: right;
width: 35%;
}
<div id="left">Left Stuff</div>
<div id="right">Right Stuff</div>
Yea...
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-7 col-sm-7 col-md-7 col-lg-7">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<form action="" method="POST" class="form-horizontal" role="form">
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<span class="label">Label</span>
<input type="text" name="" id="input" placeholder="Input" class="form-control" value="" required="required">
</div>
<div class="form-group">
<button type="button" class="btn btn-default">SUBMIT</button>
</div>
</form>
</div>
</div>
Hope this helps
I do not know your html file, but I think bootstrap can provide a built-in solution. Just refer to the official documentation and start with a basic template like this:
<div class="container">
<div class="row">
<div class="col-sm-8"> <--the big form-->
<form id="big">
<div class="form-group">
...
</div>
</form>
</div>
<div class="col-sm-4"> <--the small one-->
<form id="small">
<div class="form-group">
...
</div>
</form>
</div>
</div>
</div>
You can use many other classes and of course customize your own in your stylesheet
Well, if you're using Bootstrap, it's very easy. Try the following :
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" id="some-text">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-2">
<label for="label-name" class="control-label">Text Here</label>
</div>
<div class="col-md-6">
<input type="checkbox">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</body>
</html>
Ok, sounds like 1 form, you just want it styled a certain way:
<div class="row">
<div class="form-group">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Settings</p>
<label for="label-name" class="control-label">Label1</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label2</label>
<input type="text" class="form-control" id="some-text">
<label for="label-name" class="control-label">Label3</label>
<input type="text" class="form-control" id="some-text">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<p>Options</p>
<label for="label-name" class="control-label">Label4</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label5</label>
<input type="checkbox"></br>
<label for="label-name" class="control-label">Label6</label>
<input type="checkbox">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-default">Run</button>
</div>
</div>
i am trying to control my width's for my input but i am having some trouble. Here is my mark up
<section class="bg-lb pt40 pb40 btborder">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bg-white ">
<div class="pt40 pb40">
<a class="btn btn-default hvr-fade">Login</a>
<span id="cricle"><b>OR</b></span>
<a class="btn btn-default hvr-fade">Register</a>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span></div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span></div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
<a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
</form>
</div>
</div>
</div>
</div>
</section>
im just simply trying to reduce the width of the input and center the form,
live preview here
http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview
If you want to continue using the grid system you can change the way your col-'s are setup.
Change:
<div class="row">
<div class="col-sm-12">
<div class="bg-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
To:
<div class="row">
<div class="bg-white">
<form>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.
Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.
The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:
<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>
http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview
Just override bootstrap .css in a particular place. Try this for eg:
put it inside the css:
input.form-control{
max-width: 100px;
}
input.form-control will override every input with class set to : form-control
Or you can shrink the entire container class
.container{
max-width: 250px;
}
Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview