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!
Related
I've created a form that I give the user the option to submit online or print and mail. I use a simple javascript print command and turn off all other elements for printing besides the form using the .d-print-none class. It's probably really simple problem, but when I print it it doesn't output the entire form. It fills one page and then a second blank page. Wondering if it would help to add one of the other d-print classes to the form element or maybe there's a way to the height of the form to fit one page. Is this a bug or am I missing something?
There's not much special about the code, but I've displayed the form below.
<div class="col-lg-7 col-sm-12 d-print-inline-flex h-100 w-100" id="donationForm">
<div class="card">
<div class="card-header"><h4 class="text-center">Donation Request Form</h4>
</div>
<div class="card-body">
<form name="donationRequest" id="donationRequest" novalidate>
<h5>Event Information</h5>
<div class="form-group">
<label for="orgName">Name of Organization: </label>
<input type="text" class="form-control" id="orgName" required placeholder="Name of Organization">
</div>
<div class="form-group">
<label for="taxID">501(c)(3) Tax ID Number: </label>
<input type="number" class="form-control" id="taxID" required placeholder="Tax ID Number">
</div>
<div class="form-group">
<label for="eventName">Event Name: </label>
<input type="text" class="form-control" id="eventName" required placeholder="Event Name">
</div>
<div class="form-group">
<label for="eventDate">Date of Event: </label>
<input type="date" class="form-control" id="eventDate" required placeholder="Event Date">
</div>
<div class="form-group">
<label for="eventLoc">Event Location: </label>
<input type="text" class="form-control" id="eventLoc" required placeholder="Event Location">
</div>
<hr>
<h5>Contact Information</h5>
<div class="form-group">
<label for="contact">Contact Name: </label>
<input type="text" class="form-control" id="contact" required placeholder="First & Last Name of Contact Person">
</div>
<div class="form-group">
<label for="address">Address: </label>
<input type="text" class="form-control" id="address" required placeholder="Address of Organization">
</div>
<div class="form-group">
<label for="city">City: </label>
<input type="text" class="form-control" id="City" required placeholder="City of Organization">
</div>
<div class="form-group">
<label for="state">State: </label>
<input type="text" class="form-control" id="State" required placeholder="State of Organization">
</div>
<div class="form-group">
<label for="zipcode">Zip Code: </label>
<input type="number" class="form-control" id="zipcode" required placeholder="Zip Code of Organization">
</div>
<div class="form-group">
<label for="phone">Phone: </label>
<input type="number" class="form-control" id="phone" required placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="email">Email: </label>
<input type="email" class="form-control" id="email" required placeholder="email#provider.com">
</div>
<hr>
<h5>Type of Donation Request:</h5>
<div class="form-group">
<label class="form-check-inline"><input type="checkbox" value=""> Financial Contribution</label>
<label class="form-check-inline"><input type="checkbox" value=""> Auction/Drawing Item</label>
<label class="form-check-inline"><input type="checkbox" value=""> Other</label>
</div>
<div class="form-group">
<label for="description">Please briefly note how this event will benefit our community:</label>
<textarea class="form-control" rows="7" id="comment"></textarea>
</div>
<hr>
<div class="form-group">
<div class="row">
<div class="col-md-6"><button type="submit" class="btn btn-primary btn-block"><em class="fa fa-send"></em> Submit Request</button></div>
<div class="col-md-6"><button class="btn btn-primary btn-block"><em class="fa fa-print"></em> Print Form</button></div>
</div>
</div>
</form>
</div>
</div>
</div>
I was dealing with this issue a week ago, and I solve it using this:
<div id="printbody" class="d-none d-print-block"> /*load elements to print via js*/ </div>
<div class="d-block d-print-none"> /*all my html body with funtionalities*/ </div>
I use the event onbeforeprint to load the print element to Mozilla, Chrome, Safari, EI, Edge. Using something like this:
window.onbeforeprint = function () {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
Actually iOS doesn't trigger the event onbeforeprint so I did the same handle but using the event onclick="fillPrint()". Seen like this:
function fillPrint() {
$("#printbody").html("")
$("#printbody").append($("#list1").html())
$("#printbody").append($("#msg1").html())
$("#printbody").append($("#things").html())
$("#printbody").append($("#foo").html())
$("#printbody").append($("#faa").html())
if (/MSIE 10/i.test(navigator.userAgent) || /MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
$("#printbody").append($("#flag").html())
$("#printbody").append('<div class="row w-100 overflow-hidden">'+$("#boo").html()+'</div>')
$("#printbody").append('<div class="col-12 col-sm-10 offset-sm-1 col-xl-4 offset-xl-4 pt-3 px-0">' + $("#vudlist").html() + '</div>')
$("#printbody").append('<div class="col-12 text-center mb-3" >'+$("#tmvus").html()+ '</div>')
$("#printbody").append($("#tmksla").html())
} else {
$("#printbody").append($("#foos").html())
}
$("#printbody").append('<div>' + $("#objs").html() + '</div>')
$("#printbody").append($("#lmsg").html())
}
The issue generate when you try to print a large element with multiple sections (div) because of that I decided to bring it a higher level of element on the DOM.
I hope this can help someone.
I've changed something, somewhere and now col-sm-offset-*s aren't working at all. For example, if I wanted to split the screen in half, and display content only on the right hand side, I would usually use:
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
This content isn't on the right hand side, it's on the left as if the col-sm-offset-6 isn't even there.
</div>
</div>
</div>
How can I check what's wrong?
I'm using NPM and Laravel Elixir (gulp) to minify (make production ready) the files and short of me copying the entire CSS file here, I don't know what else to do. Is there anything obvious? Has anyone come across this before?
Update
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-6">
<div class="row">
<form role="form" method="POST" action="/register">
<input type="hidden" name="_token" value="abcdefghij">
<div class="col-xs-12">
<fieldset class="form-group">
<label for="username" class="form-control-label">Username</label>
<input name="username" type="text" class="form-control " id="username" placeholder="Enter a username" value="j">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="first_name" class="form-control-label">First Name</label>
<input name="first_name" type="text" class="form-control " id="first_name" placeholder="Enter your first name" value="John">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="last_name" class="form-control-label">Last Name</label>
<input name="last_name" type="text" class="form-control " id="last_name" placeholder="Enter your last name" value="Appleseed">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="email" class="form-control-label">Email Address</label>
<input name="email" type="email" class="form-control " id="email" placeholder="Enter your email address" value="j#a.com">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password" class="form-control-label">Password</label>
<input name="password" type="password" class="form-control " id="password" placeholder="Enter a password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<fieldset class="form-group">
<label for="password_confirmation" class="form-control-label">Confirm Password</label>
<input name="password_confirmation" type="password" class="form-control " id="password_confirmation" placeholder="Please confirm your password" value="password">
</fieldset>
</div>
<div class="col-sm-6">
<div class="form-group">
<button type="submit" class="btn btn-primary pull-right">Register</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Web Inspector
CSS Computed Properties
Update 2
I've submitted an issue on GitHub as this may have been intentional.
The current correct offset class for Bootstrap v4 Alpha:
class="col-md-6 offset-md-3"
GitHub have officially changed their col-bp-offset-* names although the documentation is currently outdated.
See issues: #19099, #19368, #19267, and my own #19562.
I'll close the question and update my GitHub issue too.
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>
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.