This has wasted several hours of my day. Here's a very simple form, with 2 radio buttons and a label, on bootply. This works as expected on 2.3.2: 'Date Range' on the left, buttons on the right. On Bootstrap 3, everything's out, it's basically vertical instead of horizontal, the text is bold, and it's just a mess. Any ideas, short of re-doing this as a grid?
Thanks.
EDIT
This is the expected layout, when B2.3.2 is selected on bootply:
This is what I get when I select any B3+:
Yes, there is a way. Drag a radio list widget to your screen, go to the Properties tab and select 'Orientation' -> Horizontal.
Vertical positioning of radio buttons is safer. Radio buttons are tiny in nature, and, thus, according to Fitts' law, they can be hard to click or tap. To enlarge the target area, let users select an option by clicking or tapping not just that button, but also the label or associated words.
To make a form horizontal, add class=”form-horizontal” in the <form> element. If you're using the <label> element then you must use class=”control-label”. Also, remember that you can use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.
To make a horizontal radio button set, add the data-type="horizontal" to the fieldset . The framework will float the labels so they sit side-by-side on a line, hide the radio button icons and only round the left and right edges of the group.
A simple Bootstrap radio button example. In this demo, a simple page is created with radio buttons. A group of three radio buttons is used that uses the radio class (by Bootstrap). The class is used in the div while input type radio is used inside the label tags.
Bootstrap Horizontal Form. A horizontal form means that the labels are aligned next to the input field (horizontal) on large and medium screens. On small screens (767px and below), it will transform to a vertical form (labels are placed on top of each input).
A group of three radio buttons is used that uses the radio class (by Bootstrap). The class is used in the div while input type radio is used inside the label tags. See the example/code online by clicking the link or image below:
Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class .form-control to all textual <input>, <textarea>, and <select> elements
I needed the same arrangement but with both horizontal and vertical radios. For Bootstrap 3.2, there is a form-horizontal that works nicely with columns.
<form class="form-horizontal" role="form">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<p class="bg-warning">Note: In the Stack Snippet, you may need to click "Full Page", otherwise the container is narrow enough to cause Bootstrap to stack the labels over the fields.</p>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label">Season</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="season" id="seasonSummer" value="summer" checked> Summer </label>
<label class="radio-inline"> <input type="radio" name="season" id="seasonWinter" value="winter"> Winter </label>
<label class="radio-inline"> <input type="radio" name="season" id="seasonSpringFall" value="spring-fall" disabled> Spring-Fall </label>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Clouds</label>
<div class="col-sm-8">
<label class="radio-inline"> <input type="radio" name="clouds" id="Clear" value="clear" checked> Clear </label>
<label class="radio-inline"> <input type="radio" name="clouds" id="Cloudy" value="cloudy"> Cloudy </label>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Load Forecast</label>
<div class="col-sm-8">
<div class="radio">
<label> <input type="radio" name="load" id="WeekdayAverage" value="weekdayaverage" checked> Weekday - Average </label>
</div>
<div class="radio">
<label> <input type="radio" name="load" id="WeekdayPeak" value="weekdaypeak"> Weekday - Peak </label>
</div>
<div class="radio">
<label> <input type="radio" name="load" id="Weekend" value="weekend" disabled> Weekend </label>
</div>
</div>
</div>
</form>
</div>
To do what you want to do, you do have to use col-* classes as all form elements are 100% width, so you have to have a col-* to fix the width you want. You can use col-xs-* and it will be for all sizes, not responsive:
EXAMPLE: http://bootply.com/102912
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label class="col-xs-3 control-label">Date Range</label>
<div class="col-xs-9">
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
<div class="radio">
<label>
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
</div>
</div>
</div>
</fieldset>
</form>
If you want radios, checkboxes, or other form elements on the same line without the use of column classes, the class for the form is .form-inline
:
http://bootply.com/102908
<form class="form-inline">
<div class="form-group">
<label class="radio-inline">Date Range</label>
<label class="radio-inline">
<input id="inlineradio1" name="sampleinlineradio" value="option1" type="radio">
Radio 0</label>
<label class="radio-inline">
<input id="inlineradio2" name="sampleinlineradio" value="option2" type="radio">
Radio 2</label>
<label class="radio-inline">
<input id="inlineradio3" name="sampleinlineradio" value="option3" type="radio">
Radio 3</label>
</div>
<!--form-group-->
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With