Bootstrap form label not appearing in correctlly - html

Question

I have a form-group with inline radio buttons. The issue is that on larger screens the next text input label is appearing right below it on the right side instead of on a new line on the left side.
I have tried adding line breaks but it didn't help
Code:
<div class="container">
<form role="form">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br/>
<button type="submit">Submit</button>
</form>
</div>
JSFiddle Demo

Answer 1

You can wrap every form line into row
<div class="container">
<form role="form">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
https://jsfiddle.net/n70kLfnc/

Answer 2

Change divs with class="form-group" into "row form-group"

Answer 3

You can try to use this CSS
.form-group .label { display: block }
But the best way is to envelope col-* always in a row div.
Here's your code rewritten:
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<div>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
here's my draft to your jsfiddle: https://jsfiddle.net/ag9aqjrz/4/

Answer 4

Try this
Replace <br> with <div class="clearfix"></div>
Without using <br> and clearfix you can try this format
<div class="container">
<div class="row">
<form role="form">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input class="form-control" id="phone" placeholder="Enter Phone Number" type="text">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br>
<div class="radio-inline">
<label for="optionsRadios1">
<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">Email</label>
</div>
<div class="radio-inline">
<label for="optionsRadios2">
<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio">Phone</label>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input class="form-control" id="website" placeholder="Testing" type="url">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>

Answer 5

<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<div class="col-xs-12">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>

Answer 6

Reverse the order from
<div class="form-group">
<div class="col-sm-12">
to
<div class="col-sm-12">
<div class="form-group">

Answer 7

instead of use for phone number as well as Preferred Contact Method
Phone Number:
<div class="col-sm-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />

Answer 8

Well, the problem is with column structure, as you are mixing "col-sm-x" with "col-xs-x", you should use one of them or both, so the correct version with xs is as follows
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-xs-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br />
<button type="submit">Submit</button>
</form>
</div>