Question posted in 
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>
5
Answers
I found a workaround, you can actually do it like this:
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.
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.
You can simply place those three inputs in an single row and apply col-*-4 to each.
See working example Snippet.
Hope my answer will work in all devices.