I am trying to use https://getbootstrap.com/docs/4.0/components/forms/ form-check-inline without success, it renders the html by putting one checkbox under the other:
This is my html code:
<h1>Crear Paciente</h1>
<hr />
<form>
<!-- #region General Data -->
<div class="form-group">
<label>Nombres y Apellidos</label>
<input type="text" class="form-control" id="namesAndSurnames" placeholder="Nombres y Apellidos">
</div>
<div class="form-group">
<label>Fecha de Nacimiento</label>
<input type="date" class="form-control" id="birthDate">
</div>
<div class="form-group">
<label>CI</label>
<input type="number" class="form-control" id="ci" placeholder="Cédula de Identidad">
</div>
<div class="form-group">
<label>Dirección</label>
<input type="text" class="form-control" id="address" placeholder="Dirección">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label>Teléfono</label>
<input type="tel" class="form-control" id="phone" placeholder="Teléfono">
</div>
<div class="form-group">
<label>Sociedad Médica</label>
<input type="text" class="form-control" id="medicSociety" placeholder="Sociedad Médica">
</div>
<div class="form-group">
<label>Emergencia Móvil</label>
<input type="text" class="form-control" id="mobileEmergency" placeholder="Emergencia Móvil">
</div>
<div class="form-group">
<label>Ocupación</label>
<input type="text" class="form-control" id="occupation" placeholder="Ocupación">
</div>
<div class="form-group">
<label>Observaciones</label>
<input type="text" class="form-control" id="observations" placeholder="Observaciones">
</div>
<!--#endregion -->
<!-- #region Sicknesses -->
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
<label class="form-check-label">Diabetes</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
<label class="form-check-label">Problemas Cardíacos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
<label class="form-check-label">Hipertensión</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
<label class="form-check-label">Prótesis Metálicas</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
<label class="form-check-label">Marcapasos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
<label class="form-check-label">Embarazos</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
<label class="form-check-label">Cirugías</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" class="form-check-input" id="allergies" value="allergies">
<label class="form-check-label">Alergias</label>
</div>
<div class="form-group">
<label>Descripción de Alergias</label>
<input type="text" class="form-control" id="allergiesDescription" placeholder="Describir las Alergias del Paciente">
</div>
<!--#endregion -->
<button type="submit" class="btn btn-primary pull-right">Guardar</button>
</form>
I am also using electron though I doubt it has sth to do with this (it shouldn't).
All the former html code is being rendered with w3-include-html although it shouldn't affect either... this is the body html:
<body>
<div class="container">
<div id="includerDiv" w3-include-html="mainWindow.html"></div>
<script>w3.includeHTML();</script>
<hr />
<footer>
<p>
©
<script>document.write(new Date().getFullYear())</script> - Beaspa - Versión 1.0
</p>
</footer>
</div>
</body>
Replace form-check form-check-inline with checkbox-inline and it will work like an inline:
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="diabetes" value="diabetes">
<label class="form-check-label">Diabetes</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="heartProblems" value="heartProblems">
<label class="form-check-label">Problemas Cardíacos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="hypertension" value="hypertension">
<label class="form-check-label">Hipertensión</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="metallicProsthesis" value="metallicProsthesis">
<label class="form-check-label">Prótesis Metálicas</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="pacemaker" value="pacemaker">
<label class="form-check-label">Marcapasos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="pregnancies" value="pregnancies">
<label class="form-check-label">Embarazos</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="surgeries" value="surgeries">
<label class="form-check-label">Cirugías</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-check-input" id="allergies" value="allergies">
<label class="form-check-label">Alergias</label>
</div>
Related
I'm struggling to set my checkboxes in the below form into 3 evenly spaced columns and centered perfectly within the form. It currently looks as below...
enter image description here
But, I want it to look like...
enter image description here
HTML:
`
<form action="/signup" method="POST">
<div class="form-group">
<input
type="text"
name="firstName"
id="first-name"
class="form-control"
placeholder="First Name"
/>
</div>
<div class="form-group">
<input
type="text"
name="surname"
id="surname"
class="form-control"
placeholder="Surname"
/>
</div>
<div class="form-group">
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Email"
/>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<fieldset class="form-group">
<legend>Pick your favourite 3 things</legend>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 1
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 2
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 3
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 4
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 5
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 6
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 7
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 8
</label>
</div>
<div class="form-inline">
<label class="form-check-label">
<input class="form-check-input mr-2" type="checkbox" value="">
Option 9
</label>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Do it!</button>
</form>
...
<legend>Pick your 3 favourite things</legend>
<div class="row">
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 1
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 2
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 3
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 4
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 5
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 6
</label>
</div>
</div>
<div class="col-sm-4">
<div>
<label>
<input type="checkbox">
Option 7
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 8
</label>
</div>
<div>
<label>
<input type="checkbox">
Option 9
</label>
</div>
</div>
</div>
See this JSFiddle: https://jsfiddle.net/bf4vtzry/1/
I have long web form to collect data, I am sharing example but actual form may be even long.
I need to know how can i print the form data in the similar format as user sees it, Simply as if user filled the PDF form and Printed it same so that printed version look as he sees it.
Code pen link https://codepen.io/anon/pen/ewYrwv
I am not sure how to make it work with A4 Page as if data was being printed from PDF form. It doesnt need to be responsive as form will be printed from desktop only..
I put container with at 800 pixel and it still prints out side of page margin.
I tried to play around with CSS http://www.tutorialspoint.com/css/css_paged_media.htm
but this doesnt make help much
.container{max-width:800px;}
#page {
size: 8.5in 11in; /* width height */
margin: 2cm; /* All margins set to 2cm */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-row">
<h1 class="text-center">Form</h1>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Mobile</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Landline</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Start Date</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">End Date</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Time</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Time">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Venue</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Trainer</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Court</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Recurring
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
<label class="form-check-label" for="inlineCheckbox1">Sun</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
<label class="form-check-label" for="inlineCheckbox2">Mon</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Tue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
<label class="form-check-label" for="inlineCheckbox3">Wed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
<label class="form-check-label" for="inlineCheckbox3">Thu</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
<label class="form-check-label" for="inlineCheckbox3">Fri</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
<label class="form-check-label" for="inlineCheckbox3">Sat</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
</form>
</div>
I have placed two jumbotrons side-by-side using auto layout columns on Bootstrap 1 of 2, 2 of 2.
When I reduce the size of the page, the two just resize by going thinner and stretching out the content but I want them to stack on top of each other.
How could I do that? I've tried media queries, but maybe I am not selecting the right 'thing' when targeting the jumbotrons to stack. TIA
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron1 jumbotron-fluid" id="register">
<div class="container1">
<h1 class="display-4">Register your interest!</h1>
<p class="lead">Festival days will be free, but seats will be limited,
so register your interest early and don't miss out!</p>
<form>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstname">First name</label>
<input type="text" class="form-control" id="firstname"
placeholder="Enter first name">
</div>
<div class="col">
<label for="lastname">Last name</label>
<input type="text" class="form-control" id="lastname"
placeholder="Enter last name">
</div>
</div>
<br>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<h4>Which days are you interested in?</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">August 5th</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">August 6th</label>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">August 7th</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">August 8th</label>
</div>
<br>
<br>
<div> <button type="submit" class="btn btn-primary">Submit</button></div>
</form>
</div>
</div>
</div>
<div class="col">
<div class="jumbotron2" id="latestNews">
<h1 class="display-4">Latest News</h1>
<div class="list-group">
</div>
<p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></p>
</a>
</div>
</div>
</div>
Use col-md-6 instead of col
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="jumbotron1 jumbotron-fluid" id="register">
<div class="container1">
<h1 class="display-4">Register your interest!</h1>
<p class="lead">Festival days will be free, but seats will be limited, so register your interest early and don't miss out!</p>
<form>
<div class="form-group">
<div class="row">
<div class="col">
<label for="firstname">First name</label>
<input type="text" class="form-control" id="firstname" placeholder="Enter first name">
</div>
<div class="col">
<label for="lastname">Last name</label>
<input type="text" class="form-control" id="lastname" placeholder="Enter last name">
</div>
</div>
<br>
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<h4>Which days are you interested in?</h4>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">August 5th</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">August 6th</label>
</div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">August 7th</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3">
<label class="form-check-label" for="inlineCheckbox3">August 8th</label>
</div>
<br>
<br>
<div> <button type="submit" class="btn btn-primary">Submit</button></div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron2" id="latestNews">
<h1 class="display-4">Latest News</h1>
<div class="list-group">
</div>
<p class="mb-1"><a class="twitter-timeline" href="https://twitter.com/brooklynfest?ref_src=twsrc%5Etfw" data-tweet-limit="2">Tweets by brooklynfest</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</p>
</div>
</div>
</div>
CodePen
I had the same Problems;
when you use only , the colums will share the place you give them. You can give them also a weight, in bootstrap4 a full row has 12 colms. When u say one col-4 and the other one col-8 then they share the screen like 1/3 and 2/3.
Now You can also give them a size, when they should stop breaking lines. They define the min width of your colm. Like col-sm/md/lg/xl(-1/2/3/4/5/6/7/8/9) e.g. col-md-4.
here stay:
sm for min-width: 576px
md for min-width: 768px
lg for min-width: 992px
xl for min-width: 1200px
I think md should be ok for you. So use col-md to define your colum: div class="col-md"
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
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/
Change divs with class="form-group" into "row form-group"
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/
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>
<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>
Reverse the order from
<div class="form-group">
<div class="col-sm-12">
to
<div class="col-sm-12">
<div class="form-group">
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 />
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>
I was gold-plating the signup page by adding labels above each field when suddenly:
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
I even tried putting a div around each set of the radio buttons and then gave a label for it but that didn't work either.
You can do it this way:
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
Explanation: The col-sm-6 of the outer div is now 100% and can be divided 50:50 by col-sm-6 and col-sm-6