Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap 3: does form-horizontal work for radio buttons with a control-label?

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:

enter image description here

This is what I get when I select any B3+:

enter image description here

like image 384
EML Avatar asked Dec 28 '13 20:12

EML


People also ask

Can radio buttons be horizontal?

Yes, there is a way. Drag a radio list widget to your screen, go to the Properties tab and select 'Orientation' -> Horizontal.

Should radio buttons be horizontal or vertical?

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.

How do I create a horizontal form in bootstrap?

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.

How do I align a radio button horizontally in HTML?

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.

How do you use radio buttons in Bootstrap?

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.

What is horizontal form in Bootstrap?

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).

How many radio buttons are there in a label tag?

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:

How do I wrap labels and form controls in HTML?

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


2 Answers

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">

enter image description here

Full 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>
like image 165
Flint O'Brien Avatar answered Sep 19 '22 20:09

Flint O'Brien


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:

enter image description here

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>
like image 33
Christina Avatar answered Sep 19 '22 20:09

Christina