I am using bootstrap in an attempt to create a form. Part of the form involves inputting social media links (FB, Linkedin & Twitter). I would like all of these inputs to be within one row - how can I do this? Thanks in advance.
http://jsfiddle.net/qn4mxqrq/1/
<HTML>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-2" id="upload_photo">
<input type="image" src="img/square_face.png" alt="Submit" >
<br>
<br>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6" id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address </label>
<input type="text" class="form-control input" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control input" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control input" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs -->
<div class="form-group"><!--Start Facebook Input -->
<label class="col-lg-2 control-label" name="facebook"></label>
<div class="col-lg-10">
<input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div><!--End Facebook Input -->
<div class="form-group"><!--Start Linkedin Input -->
<label class="col-lg-2 control-label" name="linkedin"></label>
<div class="col-lg-10">
<input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div><!--End Linkedin Input -->
<div class="form-group"><!--Start Twitter Input -->
<label class="col-lg-2 control-label" name="twitter"><img src=></label>
<div class="col-lg-10">
<input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div><!--End Twitter Input -->
</div> <!--End Social Media inputs -->
<CSS>
.container_upload{
width:1000px;
margin-left:60px;
}
#upload_photo{
height:150px;
width:300px;
}
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373
}
#upload_basic_info{
height:275px;
}
#upload_fb{
background: url(img/fb.png) no-repeat scroll 7px 7px;
padding-left:30px;
}
</CSS>
You can simply place those three inputs in an single row and apply col-*-4 to each.
See working example Snippet.
body {
padding-top: 50px;
}
#upload_culprit_photo {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" />
</div>
<div class="col-xs-12 col-sm-6" id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label name="facebook">Facebook</label>
<input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label name="linkedin">LinkedIn</label>
<input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label name="twitter">Twitter</label>
<input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div>
</div>
</div>
I found a workaround, you can actually do it like this:
<div class="form-group col-xs-12" id="upload_socialmedia"><!--Start Social Media inputs -->
<!-- EDIT THIS CLASS (and the two others) -->
<div class="form-group col-xs-4"><!--Start Facebook Input -->
<label class="col-lg-2 control-label" name="facebook"></label>
<div class="col-lg-10">
<input id="upload_fb" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div><!--End Facebook Input -->
<div class="form-group col-xs-4"><!--Start Linkedin Input -->
<label class="col-lg-2 control-label" name="linkedin"></label>
<div class="col-lg-10">
<input id="upload_linkedin" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div><!--End Linkedin Input -->
<div class="form-group col-xs-4"><!--Start Twitter Input -->
<label class="col-lg-2 control-label" name="twitter"><img src=""></label>
<div class="col-lg-10">
<input id="upload_twitter" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div><!--End Twitter Input -->
</div> <!--End Social Media inputs -->
EDIT: Sorry, it looks like I missread the original problem. So #Manuel Choucino's answer seems to be the good one.
Just use left floats.
.class{float:left;}
If I have understood what you want correctly:
http://jsfiddle.net/qn4mxqrq/4/
This is an edited version of your code.
When I look at your code, there is one Class name that control all of group. form-group.
in your CSS just create rules for that socialForm.
.socialForm{
float: left;
}
Here adding bootstrap classes like col-lg,col-md,col-sm,col-xs every class will work different devices.example:col-lg its works in large size desktop(1920 *1080 resolution ),col-md works in medium size desktop(1366*768 resolution )
,col-sm works in tablets and col-xs works in mobiles
Hope my answer will work in all devices.
body {
padding-top: 50px;
}
#upload_culprit_photo {
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 ">
<input type="image" src="http://placehold.it/300x150" class="img-responsive center-block" id="upload_culprit_photo" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 " id="upload_basic_info">
<div class="form-group">
<label for="firstname">Name</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="name" id="name" placeholder="Name" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="lastname">Their Email Address</label>
<input type="text" class="form-control" maxlength="50" data-error="Please fill out this field." name="email" id="email" placeholder="Their Email Address" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their Country</label>
<select class="form-control" data-error="Please fill out this field." name="country" id="country" required onchange="App.populate_option('Get_States', 'state', true, true, 'Create', $(this).val());">
<option value="" disabled selected="selected">Their Country</option>
</select>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="country">Their State/Region</label>
<select class="form-control" data-error="Please fill out this field." name="state" id="state" required disabled="disabled">
<option value="" disabled selected="selected">Their State/Region</option>
</select>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="facebook">Facebook</label>
<input id="upload_fb" class="form-control" name="facebook" id="facebook" placeholder="Facebook URL" type="url">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="linkedin">LinkedIn</label>
<input id="upload_linkedin" class="form-control" name="linkedin" id="linkedin" placeholder="Linkedin URL" type="url">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<div class="form-group">
<label name="twitter">Twitter</label>
<input id="upload_twitter" class="form-control" name="twitter" id="twitter" placeholder="Twitter URL" type="url">
</div>
</div>
</div>
</div>
Related
I have a form and am having a problem trying to style it.
Here is what it looks like now:
I need it to look like this:
I need to style the first row and column for the Title and the 2nd row 3rd column for to date of birth.
I'm having trouble targeting the correct selector/element. Here is what the html looks like:
<h6 class="title">Personal Information</h6>
<div class="row">
<div class="col-3">
<select name="title"></select>
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="firstname" value="" id="firstname"
maxlength="50" size="50" class="" placeholder="First name*"
style="background-image: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0I
Ars4c6QAAAfBJREFUWAntVk1OwkAUZkoDKza4Utm61iP0AqyIDXahN2
BjwiHYGU+gizap4QDuegWN7lyCbMSlCQjU7yO0TOlAi6GwgJc0fT/fz
Pfmzet0crmD7HsFBAvQbrcrw+Gw5fu+AfOYvgylJ4TwCoVCs1ardYTr
uqfj8fgV5OUMSVVT93VdP9dAzpVvm5wJHZFbg2LQ2pEYOlZ/oiDvwNc
sFoseY4PBwMCrhaeCJyKWZU37KOJcYdi27QdhcuuBIb073BvTNL8ln4
NeeR6NRi/wxZKQcGurQs5oNhqLshzVTMBewW/LMU3TTNlO0ieTiStjY
hUIyi6DAp0xbEdgTt+LE0aCKQw24U4llsCs4ZRJrYopB6RwqnpA1YQ5
NGFZ1YQ41Z5S8IQQdP5laEBRJcD4Vj5DEsW2gE6s6g3d/YP/g+BDnT7
GNi2qCjTwGd6riBzHaaCEd3Js01vwCPIbmWBRx1nwAN/1ov+/drgFWI
lfKpVukyYihtgkXNp4mABK+1GtVr+SBhJDbBIubVw+Cd/TDgKO2DPiN
3YUo6y/nDCNEIsqTKH1en2tcwA9FKEItyDi3aIh8Gl1sRrVnSDzNFDJ
T1bAy5xpOYGn5fP5JuL95ZjMIn1ya7j5dPGfv0A5eAnpZUY3n5jXcoe
c5J67D9q+VuAPM47D3XaSeL4AAAAASUVORK5CYII=");
background-repeat: no-repeat; background-attachment:
scroll; background-size: 16px 18px;
background-position: 98% 50%; cursor: auto;">
<!--<input type="text" placeholder="First name*">-->
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="lastname" value="" id="lastname"
maxlength="50" size="50" placeholder="Last name*">
<div class="form_error"></div>
</div>
<div class="col-3">
<!-- <input type="text" placeholder="Last name*">-->
<input type="text" name="dob" value="" id="dob" maxlength="50"
size="50" placeholder="Date of birth (DD/MM/YYYY)*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Date of birth (DD/MM/YYYY)*" class="dob">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="mobile" value="" id="mobile"
maxlength="50" size="50" placeholder="Mobile*">
<div class="form_error"></div>
<!--<input type="tel" placeholder="Mobile*">-->
</div>
<div class="col-3">
<input type="email" name="email" value="" id="email"
maxlength="50" size="50" placeholder="Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Email*">-->
</div>
<div class="col-3">
<input type="text" name="emailconf" value="" id="emailconf"
maxlength="50" size="50" placeholder="Confirm Email*">
<div class="form_error"></div>
<!--<input type="email" placeholder="Confirm Email*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-1">
<input type="text" name="address1" value="" id="address1"
maxlength="50" size="50" placeholder="Address*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Address*">-->
</div>
</div>
<div class="clear"></div>
<div class="row">
<div class="col-3">
<input type="text" name="suburb" value="" id="suburb"
maxlength="50" size="50" placeholder="Suburb*">
<div class="form_error"></div>
<!--<input type="text" placeholder="Suburb*">-->
</div>
<div class="col-3">
<select name="stateid">
</select>
</div>
<div class="col-3">
<input type="text" name="postcode" value="" id="postcode"
maxlength="4" size="10" placeholder="Postcode*">
<div class="form_error"></div>
</div>
</div>
Any help is greatly appreciated
to make the structure better I would say load bootstrap CSS
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
and use this markup:
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="title">Personal Information</h2>
</div>
</div>
<div class="row">
<div class="col-md-2">
<select>
<option value="mr">Mr.</option>
<option value="mrs">Mrs.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="First name">
</div>
<div class="col-md-4">
<input type="text" placeholder="Last name">
</div>
<div class="col-md-2">
<input type="date">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Mobile">
</div>
<div class="col-md-4">
<input type="email" placeholder="Email">
</div>
<div class="col-md-4">
<input type="email" placeholder="Confirm Email">
</div>
</div>
<div class="row">
<div class="col-md-12">
<input type="text" placeholder="Address">
</div>
</div>
<div class="row">
<div class="col-md-4">
<input type="text" placeholder="Suburb">
</div>
<div class="col-md-4">
<select>
<option value="mr">NSW</option>
</select>
</div>
<div class="col-md-4">
<input type="text" placeholder="Post Code">
</div>
</div>
</div>
and you can customize the look of the form fields, just put this code after you load the Bootstrap
input, select { width:100%; padding:14px; margin:10px 0; border:2px solid #6aa295; }
You should use something like this. And bootstrap is responsive so You could see how it look on the expand view.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form class="form-horizontal">
<div class="row">
<div class="col-md-12">
<h2><p class="text-center">Personal Information</p></h2>
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<select class="form-control">
<option value="mr">Mr.</option>
<option value="ms">Ms.</option>
</select>
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="firstname" class="form-control" placeholder="First name *">
</div>
<div class="col-md-4">
<input type="text" class="form-control" id="lastname" class="form-control" placeholder="Last name *">
</div>
<div class="col-md-2">
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="mobile" class="form-control" placeholder="Mobile *">
</div>
<div class="col-md-4">
<input type="email" id="email" class="form-control" placeholder="Email *">
</div>
<div class="col-md-4">
<input type="email" id="emailconf" class="form-control" placeholder="Confirm Email *">
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" id="address1" class="form-control" placeholder="Address *">
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<input type="text" id="suburb" class="form-control" placeholder="Suburb *">
</div>
<div class="col-md-4">
<select class="form-control">
<option class="collapse" value="mr">Info</option>
</select>
</div>
<div class="col-md-4">
<input type="text" id="postcode" class="form-control" placeholder="Post Code *">
</div>
</div>
</form>
</div>
I have a simple form with error handling through jqBootstrapValidation. I set it up so that it is horizontal when the browser is wide enough. Here is how it looks: http://i.imgur.com/K0JKzb8.png
However, when I enter a bad email, the form is not aligned anymore.
http://i.imgur.com/4Fr2UTq.png
Here is the code I am using. I just can't get it to work.
<form class="form-inline">
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name." >
<p class="help-block text-danger"></p>
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-lg-6 text-center">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</form>
Any tips?
Thanks a lot!
The issue is that the error message is appearing int he same column and pushing the textbox up. I believe you would either have to add it to another column or row below the content.
I don't know if this would help you but when I do bootstrap validation I add the tooltip attributes and the has error class to the div.
<div class="form-group has-error">
<input id="txtEmail" type="text" class="form-control" data-toggle="tooltip" data-placement="right" title="Email is not valid.">
</div>
This highlights the textbox red and the error message is displayed on hover so it saves space.
The way your HTML is set up is incorrect. You need to have the <div class="col-lg-6"> end and begin next to each other. The way you have it set up now is the form-group is on the outside with the table-cells inside. Also you should have the <div class="row"> so the table knows when a new row has been added.
<form class="form-inline">
<div class="row">
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-lg-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="email not valid">
<p class="help-block text-danger"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 text-center">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div>
</form>
Try this set up and see if your code alignment messes up or not.
With the various answers I got. I managed to get it working. Here is the final code.
<form>
<div class="row">
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Full Name</label>
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Full name" name="name" required data-validation-required-message="Please enter your full name.">
<div class="help-block text-danger"></div>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="form-group form-group-lg">
<label class="sr-only" for="name">Your email</label>
<input type="email" class="form-control" type="text" id="formGroupInputLarge" placeholder="Your email" name="email" required data-validation-required-message="Please enter your email." data-validation-email-message="Email is not valid">
<div class="help-block text-danger"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 text-center">
<input type="hidden" name="location" value="toronto">
<div id="success"></div>
<button type="submit" id="submit" class="btn btn-success btn-lg">Submit</button>
</div>
</div></form>
Feel free to comment if you see a problem with my answer!
I know I am doing this wrong but I have no idea how to fix it properly.
I have a sign up form that has a display: relative, on col-lg. But I did not know how to change a css based on a screen size. So I just duplicated the sign up form and gave it a different class name and changed the css accordingly.
Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
How can I fix this issue without having to duplicate the form? I would like to not use jquery or javascript, but if I have to I will.
.form-signup {
position: absolute;
bottom: 70px;
right: 0;
margin-right: 35px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<!-- First form -->
<div class="col-xs-4 col-sm-4 col-md-4 pull-right form-signup hidden-md hidden-sm hidden-xs">
<form role="form">
<h2>
<div class="text-center lead p-color">Tagline</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="FN" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="LN" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="EM" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="PW" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6>terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
<!-- Second Form -->
<div class="row row-offset center-block">
<div class="col-md-12 text-center hidden-lg"><img src="images/landing-md-xs.png" class="img-responsive center-block" alt=" animation" style="height: auto; width: 500px;"/></div>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-3 col-md-6 hidden-lg">
<form role="form">
<h2>
<div class="text-center lead p-color">TAGLINE</div>
</h2>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="first_name" id="first_name" class="form-control input-md" placeholder="First Name" tabindex=1 autofocus>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="form-group">
<input type="text" name="last_name" id="last_name" class="form-control input-md" placeholder="Last Name" tabindex=2>
</div>
</div>
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-md" placeholder="Email Address" tabindex=3>
</div>
<div class="form-group">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-md" placeholder="Password" tabindex=4>
</div>
</div>
<div class="checkbox">
<label>
<input class="checkbox-focus" type="checkbox" tabindex=5>I agree to
<a class="ri-anchor" href="#" tabindex=6> terms</a>
</label>
</div>
<div class="row">
<div class="form-group register-div">
<input type="submit" value="Sign Up" class="btn btn-primary btn-block btn-lg" tabindex=7>
</div>
</div>
</form>
</div>
</div>
col-lg-x is a bootstrap class that assigns your div grid size with the value of x. it's for large screen. but removing shouldn't drastically change the design like you have presented above. It's because you have mis-linked bootstrap css file. Also on the code above you have included jquery instead of bootstrap.
Edit : for Problem I came across was that if someone types information and then decides to adjust screen, all of there info disappears(because it is on the col-lg!)
For this add other classes col-md-x, col-xs-x` on the div as according to your need of x value.
Okay. I'm trying to recreate this form in particular using as much default bootstrap styling as possible.
The problem I'm having is having the left and right sidelooking like this.
I'm using a Modal class for the dark background.
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="form-group col-lg-3">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group col-lg-3">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div><br />
<div class="form-group>
<label for="form-elem-4"> Enquiry</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your enquiry" />
</div>
</form>
</div>
</div>
I don't need much help on the color and those smaller things. just on how to position the Enquiry to the right and making it looks as close to the example as possible.
There isn't any css yet that affects much of the code above. And I'm failry new to the fomr function. How would I have the form actually work too.
Is this what you need, now you have add some your styles for button, and background
<div class="panel-footer modal_custom">
<div class="container">
<h2>Talk to us</h2>
<h4>What's on your mind?</h4>
<form action="" role="form">
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label for="form-elem-1"> Name</label>
<input type="text" id="form-elem-1" class="form-control" placeholder="Enter Your name" />
</div>
<div class="form-group">
<label for="form-elem-2"> Telephone</label>
<input type="text" id="form-elem-2" class="form-control" placeholder="Enter Your telephone number" />
</div>
<div class="form-group">
<label for="form-elem-3"> Email</label>
<input type="text" id="form-elem-3" class="form-control" placeholder="Enter Your e-mail" />
</div>
<div class="form-group">
<label for="form-elem-4"> Company</label>
<input type="text" id="form-elem-4" class="form-control" placeholder="Enter Your company name" />
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="form-group">
<label class="col-md-3" for="comment">Comment:</label>
<div class="col-md-9">
<textarea class="form-control" rows="13" id="comment"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
Working fiddle
http://jsfiddle.net/52VtD/9098/
Try to re-build that form using responsive Table. Set the table with two columns and get the required design without change in CSS.
so I was trying to create a form panel with Twitter Bootstrap into the center of the page, and hopefully even when the browser is resizing, it still be at the center,
here's what I tried on jsfiddle, the problem is I can't seem to make it center, anyone had ideas? the full code is in below
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">
Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe"
required="" />
</div>
<div class="form-group">
<label for="inputPassword">
Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******"
required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">
Submit</button>
</form>
</div>
</div>
</div>
</div>
the preview:
Please replace
<div class="panel panel-default">
with this
<div class="panel panel-default" style="max-width:400px;margin-left:auto; margin-right:auto;">
You can also use columns to size and center your panel, for example:
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-body">
<legend>User Login</legend>
<form role="form">
<div class="form-group">
<label for="inputEmail">Username</label>
<input id="inputEmail" type="text" class="form-control" placeholder="ex: John.Doe" required="" />
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password" class="form-control" placeholder="*******" required="" />
</div>
<div class="checkbox">
<label>
<input id="chkRememberMe" type="checkbox" />
Remember Me
</label>
</div>
<button id="btnSubmit" type="submit" class="btn navbar-custom">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
Try setting the margins in the div's style attribute:
style="margin-left:auto;margin-right:auto;"
Hope it works...