Ram
Reputation: 15
horizontal scroll bar appearing in bootstrap
I am trying to make design in bootstrap, but while doing this, a horizontal scroll bar is appearing at the end of the page. I am a beginner in bootstrap. I am not getting why the horizontal scroll bar is appearing or how to remove it.
<form name="form" method="post" id="simplr-reg" class="form-horizontal" style="padding-top:20px" onsubmit="return validate();">
<div class="form-group">
<div class="col-xs-6">
<label>Email <span class="required">*</span></label>
<input type="text" class="form-control" name="username" id="username" placeholder="Email" />
<span id="foremail"></span>
</div>
<div class="col-xs-6">
<label>First Name <span class="required">*</span></label>
<input type="text" class="form-control" name="first_name" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>Last Name <span class="required">*</span></label>
<input type="text" class="form-control" name="last_name" placeholder="Last Name" />
</div>
<div class="col-xs-6">
<label>Website</label>
<input type="text" class="form-control" name="Website" placeholder="Website" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>Gender <span class="required">*</span></label>
<select name="gender" class=" selectclass form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col-xs-6">
<label>Mobile No.</label>
<input type="text" class="form-control" name="phone_no" placeholder="Mobile No." />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>City</label>
<input type="text" class="form-control" name="city" placeholder="City" />
</div>
<div class="col-xs-6">
<label>State<span class="required">*</span></label>
<input type="text" class="form-control" name="state" placeholder="State" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>Country</label>
<input type="text" class="form-control" name="country" placeholder="Country" />
</div>
<div class="col-xs-6">
<label>Linkdin</label>
<input type="text" class="form-control" name="linkdin" placeholder="linkdin" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>Size <span class="required">*</span></label>
<select name="size" class="selectclass form-control">
<option value="">Select Size </option>
<option value=" 50000+"> 50000+</option>
<option value=" 20000 - 49999"> 20000 - 49999</option>
<option value=" 10000 - 19999"> 10000 - 19999</option>
<option value=" 5000 - 9999"> 5000 - 9999</option>
<option value=" 2500 - 4999"> 2500 - 4999</option>
<option value=" 1000 - 2499"> 1000 - 2499</option>
<option value=" 500 - 999"> 500 - 999</option>
<option value="250 - 499">250 - 499</option>
<option value=" 100 - 249"> 100 - 249</option>
<option value=" 50 - 99"> 50 - 99</option>
<option value=" 25 - 49"> 25 - 49</option>
<option value=" 10 - 24"> 10 - 24</option>
<option value=" 5 - 9"> 5 - 9</option>
<option value=" 1 - 4"> 1 - 4</option>
</select>
</div>
<div class="col-xs-6">
<label>Job Title</label>
<input type="text" class="form-control" name="job_title" placeholder="Job Title" />
</div>
</div>
<div class="form-group">
<div class="col-xs-6">
<label>Industry <span class="required">*</span></label>
<select name="industry" class=" selectclass form-control">
<option value="">Select Industry </option>
<option value="Agriculture">Agriculture</option>
<option value=" Construction"> Construction</option>
<option value=" Consumer Goods"> Consumer Goods</option>
<option value=" Corporate Services"> Corporate Services</option>
<option value=" Education"> Education</option>
<option value=" Finance"> Finance</option>
<option value=" Government"> Government</option>
<option value=" High Tech"> High Tech</option>
<option value=" Legal"> Legal</option>
<option value=" Life Sciences"> Life Sciences</option>
<option value=" Manufacturing"> Manufacturing</option>
<option value=" Media"> Media</option>
<option value=" Medical/Health Care"> Medical/Health Care</option>
<option value=" Organizations/Non-Profit"> Organizations/Non-Profit</option>
<option value=" Recreation/Travel/Entertainment"> Recreation/Travel/Entertainment</option>
<option value=" Service Industry"> Service Industry</option>
<option value=" Transportation"> Transportation</option>
<option value=" Other"> Other</option>
</select>
</div>
<div class="col-xs-6">
<label>Job Area <span class="required">*</span></label>
<select name="job_area" class=" selectclass form-control">
<option value="">Select Job Area </option>
<option value="Agriculture">Agriculture</option>
<option value=" Banking/Mortgage"> Banking/Mortgage</option>
<option value=" Biotech"> Biotech</option>
<option value=" Building Construction"> Building Construction</option>
<option value=" Business"> Business</option>
<option value=" Creative/Design"> Creative/Design</option>
<option value=" Customer Support/Client Services"> Customer Support/Client Services</option>
<option value=" Education"> Education</option>
<option value=" Engineering"> Engineering</option>
<option value=" Executives"> Executives</option>
<option value=" Finance/Accounting"> Finance/Accounting</option>
<option value=" Food Services/Hospitality"> Food Services/Hospitality</option>
<option value=" Human Resources"> Human Resources</option>
<option value=" Installation/Maintenance/Repair"> Installation/Maintenance/Repair</option>
<option value=" Insurance"> Insurance</option>
<option value=" IT/Computers/Electronics"> IT/Computers/Electronics</option>
<option value=" Journalism/Media/Entertainment"> Journalism/Media/Entertainment</option>
<option value=" Legal"> Legal</option>
<option value=" Logistics/Transportation"> Logistics/Transportation</option>
<option value=" Manufacturing/Production/Operations"> Manufacturing/Production/Operations</option>
<option value=" Marketing"> Marketing</option>
<option value=" Medical and Health"> Medical and Health</option>
<option value=" Quality Assurance/Safety"> Quality Assurance/Safety</option>
<option value=" Real Estate"> Real Estate</option>
<option value=" Retail"> Retail</option>
<option value=" Sales"> Sales</option>
<option value=" Security Services"> Security Services</option>
<option value=" Other"> Other</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-xs-12 col-xs-offset-3">
<input type="submit" id="submit" class="btn btn-primary " name="submit-reg" value="Register"/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Upvotes: 0
Views: 963
Answers (1)
Pete
Reputation: 58462
I have found the following issues
- Your cols should be wrapped in a container (I have changed the below so your form has the container class)
- I have also added a row class to each group of cols (I think this is optional but most examples I have seen group the cols into rows)
- Each row must only add up to 12 cols so your last row of 12 cols with an offset of another 3 is causing your big space issue, change this to a 9 col width with the offset of 3 and it should fix your issue
<form name="form" method="post" id="simplr-reg" class="form-horizontal container" style="padding-top:20px" onsubmit="return validate();">
<div class="form-group row">
<div class="col-xs-6">
<label>Email <span class="required">*</span>
</label>
<input type="text" class="form-control" name="username" id="username" placeholder="Email">
<span id="foremail"></span>
</div>
<div class="col-xs-6">
<label>First Name <span class="required">*</span>
</label>
<input type="text" class="form-control" name="first_name" placeholder="First Name">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>Last Name <span class="required">*</span>
</label>
<input type="text" class="form-control" name="last_name" placeholder="Last Name">
</div>
<div class="col-xs-6">
<label>Website</label>
<input type="text" class="form-control" name="Website" placeholder="Website">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>Gender <span class="required">*</span>
</label>
<select name="gender" class=" selectclass form-control">
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col-xs-6">
<label>Mobile No.</label>
<input type="text" class="form-control" name="phone_no" placeholder="Mobile No.">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>City</label>
<input type="text" class="form-control" name="city" placeholder="City">
</div>
<div class="col-xs-6">
<label>State<span class="required">*</span>
</label>
<input type="text" class="form-control" name="state" placeholder="State">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>Country</label>
<input type="text" class="form-control" name="country" placeholder="Country">
</div>
<div class="col-xs-6">
<label>Linkdin</label>
<input type="text" class="form-control" name="linkdin" placeholder="linkdin">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>Size <span class="required">*</span>
</label>
<select name="size" class="selectclass form-control">
<option value="">Select Size</option>
<option value=" 50000+">50000+</option>
<option value=" 20000 - 49999">20000 - 49999</option>
<option value=" 10000 - 19999">10000 - 19999</option>
<option value=" 5000 - 9999">5000 - 9999</option>
<option value=" 2500 - 4999">2500 - 4999</option>
<option value=" 1000 - 2499">1000 - 2499</option>
<option value=" 500 - 999">500 - 999</option>
<option value="250 - 499">250 - 499</option>
<option value=" 100 - 249">100 - 249</option>
<option value=" 50 - 99">50 - 99</option>
<option value=" 25 - 49">25 - 49</option>
<option value=" 10 - 24">10 - 24</option>
<option value=" 5 - 9">5 - 9</option>
<option value=" 1 - 4">1 - 4</option>
</select>
</div>
<div class="col-xs-6">
<label>Job Title</label>
<input type="text" class="form-control" name="job_title" placeholder="Job Title">
</div>
</div>
<div class="form-group row">
<div class="col-xs-6">
<label>Industry <span class="required">*</span>
</label>
<select name="industry" class=" selectclass form-control">
<option value="">Select Industry</option>
<option value="Agriculture">Agriculture</option>
<option value=" Construction">Construction</option>
<option value=" Consumer Goods">Consumer Goods</option>
<option value=" Corporate Services">Corporate Services</option>
<option value=" Education">Education</option>
<option value=" Finance">Finance</option>
<option value=" Government">Government</option>
<option value=" High Tech">High Tech</option>
<option value=" Legal">Legal</option>
<option value=" Life Sciences">Life Sciences</option>
<option value=" Manufacturing">Manufacturing</option>
<option value=" Media">Media</option>
<option value=" Medical/Health Care">Medical/Health Care</option>
<option value=" Organizations/Non-Profit">Organizations/Non-Profit</option>
<option value=" Recreation/Travel/Entertainment">Recreation/Travel/Entertainment</option>
<option value=" Service Industry">Service Industry</option>
<option value=" Transportation">Transportation</option>
<option value=" Other">Other</option>
</select>
</div>
<div class="col-xs-6">
<label>Job Area <span class="required">*</span>
</label>
<select name="job_area" class=" selectclass form-control">
<option value="">Select Job Area</option>
<option value="Agriculture">Agriculture</option>
<option value=" Banking/Mortgage">Banking/Mortgage</option>
<option value=" Biotech">Biotech</option>
<option value=" Building Construction">Building Construction</option>
<option value=" Business">Business</option>
<option value=" Creative/Design">Creative/Design</option>
<option value=" Customer Support/Client Services">Customer Support/Client Services</option>
<option value=" Education">Education</option>
<option value=" Engineering">Engineering</option>
<option value=" Executives">Executives</option>
<option value=" Finance/Accounting">Finance/Accounting</option>
<option value=" Food Services/Hospitality">Food Services/Hospitality</option>
<option value=" Human Resources">Human Resources</option>
<option value=" Installation/Maintenance/Repair">Installation/Maintenance/Repair</option>
<option value=" Insurance">Insurance</option>
<option value=" IT/Computers/Electronics">IT/Computers/Electronics</option>
<option value=" Journalism/Media/Entertainment">Journalism/Media/Entertainment</option>
<option value=" Legal">Legal</option>
<option value=" Logistics/Transportation">Logistics/Transportation</option>
<option value=" Manufacturing/Production/Operations">Manufacturing/Production/Operations</option>
<option value=" Marketing">Marketing</option>
<option value=" Medical and Health">Medical and Health</option>
<option value=" Quality Assurance/Safety">Quality Assurance/Safety</option>
<option value=" Real Estate">Real Estate</option>
<option value=" Retail">Retail</option>
<option value=" Sales">Sales</option>
<option value=" Security Services">Security Services</option>
<option value=" Other">Other</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-xs-9 col-xs-offset-3">
<input type="submit" id="submit" class="btn btn-primary " name="submit-reg" value="Register">
</div>
</div>
</form>
Here is a bootply showing the changes I have made
I have also overridden the width of container to be 100% to be more like your original code (remove the style in the right of the bootply to see it at bootstrap responsive widths)
Upvotes: 1
Related Questions
- Bootstrap modal appearing under background
- Change navbar color in Twitter Bootstrap
- How to open a Bootstrap modal window using jQuery?
- How can I make Bootstrap columns all the same height?
- Center a column using Twitter Bootstrap
- vertical-align with Bootstrap 3
- What is Bootstrap?
- How to make Twitter Bootstrap menu dropdown on hover rather than click
- What is sr-only in Bootstrap 3?
- twitter bootstrap autocomplete dropdown / combobox with Knockoutjs