Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Multiple Radio Buttons on One Line - Bootstrap 4

Tags:

bootstrap-4

I tried the code from the docs (https://v4-alpha.getbootstrap.com/components/forms/#form-controls) and found how to implement this:

enter image description here

Code below:

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two can be something else and selecting it will deselect option one
          </label>
        </div>
        <div class="form-check disabled">
          <label class="form-check-label">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three is disabled
          </label>
        </div>
      </div>
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2">Checkbox</label>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Check me out
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>

However, I would like to be able to have everything inline like this:

enter image description here

Is this possible? How?

Later Edit: Similar to the code in the example, I need to have some sort of a label with col-sm-2 and then have all the radio buttons inside a col-sm-10 container

Later Edit: I edited Abdeslem Charif's code a little and got exactly what I needed, thanks a lot. See code below:

<div class="form-group row">
    <label class="col-sm-2">Radio: </label>
    <div class="col-sm-10">
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
            <label class="form-check-label" for="inlineRadio1">Option one</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
            <label class="form-check-label" for="inlineRadio2">Option Two</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
            <label class="form-check-label" for="inlineRadio3">Option tree</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
            <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label>
        </div>
    </div>
</div>
like image 593
Andrei Statescu Avatar asked Apr 12 '18 12:04

Andrei Statescu

People also ask

Can you have multiple radio buttons?

Only one radio button in a group can be selected at the same time. Note: The radio group must have share the same name (the value of the name attribute) to be treated as a group.

How multiple buttons can be created at once by bootstrap?

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group , including each one when nesting multiple groups.

How do I put radio buttons side by side?

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.

2 Answers

Use the radio-inline class

<div class="container">
  <form>
    <div class="form-group row">
      <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
      </div>
    </div>
    <div class="form-group row">
      <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
      <div class="col-sm-10">
        <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
      </div>
    </div>
    <fieldset class="form-group row">
      <legend class="col-form-legend col-sm-2">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input radio-inline" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
            Option one</label>
            <label class="form-check-label">
            <input class="form-check-input radio-inline" type="radio" name="gridRadios" id="gridRadios2" value="option2">
            Option two</label>
            <label class="form-check-label disabled">
            <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
            Option three</label>
        </div>
        
    </fieldset>
    <div class="form-group row">
      <label class="col-sm-2">Checkbox</label>
      <div class="col-sm-10">
        <div class="form-check">
          <label class="form-check-label">
            <input class="form-check-input" type="checkbox"> Check me out
          </label>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <div class="offset-sm-2 col-sm-10">
        <button type="submit" class="btn btn-primary">Sign in</button>
      </div>
    </div>
  </form>
</div>

Use the Inline style

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">Option one</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">Option Two</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
  <label class="form-check-label" for="inlineRadio3">Option tree</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">Option four (disabled)</label>
</div>
like image 97
Abslen Char Avatar answered Oct 19 '22 00:10

Abslen Char

use the .radio-inline class if you want the radio buttons to appear on the same line

<div class="radio">
  <label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
  <label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
  <label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
</div>
like image 36
Newton Karanu Avatar answered Oct 18 '22 23:10

Newton Karanu
Sign in to Comment

Related questions

How to implement RTL bootstrap 4 navbar?
How to add vertical spacing between Bootstrap Cards
Bootstrap 4 mr-auto not working correctly
How to Reorder Columns with Bootstrap 4?
Bootstrap 4 - container class and rounded corners?
Change Bootstrap 4 text colors
Disable column wrapping in Bootstrap 4
Bootstrap 4 Custom Checkbox Not Shown
Set footer on bottom (adapted to content) with Angular 4 and Bootstrap 4
How to show something only on a certain screen size in bootstrap?
Bootstrap 4 ordering classes not working?
Prevent items from being collapsed in bootstrap 4 navbar toggle
pull/float right not working in Bootstrap 4
Animations disabled by bootstrap because using prefers-reduced-motion: reduce
Bootstrap 5: Dropdown menu go out off to the right of the screen
Font Awesome and Bootstrap 4 Navbar
How to split a column in a responsive view using Bootstrap?
How do I position text on the bottom of an image overlay in a card in Bootstrap 4
Bootstrap w/ Angular "Error: $(...).collapse() is not a function"
VUE 2 with Bootstrap 4 - Radio button action not working when using data-toggle="buttons"

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!