title: Multiple Radio Buttons on One Line - Bootstrap 4
body: <p>I tried the code from the docs (<a href="https://v4-alpha.getbootstrap.com/components/forms/#form-controls" rel="noreferrer">https://v4-alpha.getbootstrap.com/components/forms/#form-controls</a>) and found how to implement this:</p>
  
  <p><a href="https://i.stack.imgur.com/ryId5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ryId5.png" alt="enter image description here"></a></p>
  
  <p>Code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;form&gt;
      &lt;div class="form-group row"&gt;
        &lt;label for="inputEmail3" class="col-sm-2 col-form-label"&gt;Email&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="email" class="form-control" id="inputEmail3" placeholder="Email"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
        &lt;label for="inputPassword3" class="col-sm-2 col-form-label"&gt;Password&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;input type="password" class="form-control" id="inputPassword3" placeholder="Password"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;fieldset class="form-group row"&gt;
        &lt;legend class="col-form-legend col-sm-2"&gt;Radios&lt;/legend&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;div class="form-check"&gt;
            &lt;label class="form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked&gt;
              Option one is this and that&amp;mdash;be sure to include why it's great
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check"&gt;
            &lt;label class="form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"&gt;
              Option two can be something else and selecting it will deselect option one
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check disabled"&gt;
            &lt;label class="form-check-label"&gt;
              &lt;input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled&gt;
              Option three is disabled
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
      &lt;div class="form-group row"&gt;
        &lt;label class="col-sm-2"&gt;Checkbox&lt;/label&gt;
        &lt;div class="col-sm-10"&gt;
          &lt;div class="form-check"&gt;
            &lt;label class="form-check-label"&gt;
              &lt;input class="form-check-input" type="checkbox"&gt; Check me out
            &lt;/label&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
        &lt;div class="offset-sm-2 col-sm-10"&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Sign in&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, I would like to be able to have everything inline like this:</p>
  
  <p><a href="https://i.stack.imgur.com/ArGbK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ArGbK.png" alt="enter image description here"></a></p>
  
  <p>Is this possible? How?</p>
  
  <hr>
  
  <p>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</p>
  
  <hr>
  
  <p>Later Edit: I edited Abdeslem Charif's code a little and got exactly what I needed, thanks a lot. See code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group row"&gt;
      &lt;label class="col-sm-2"&gt;Radio: &lt;/label&gt;
      &lt;div class="col-sm-10"&gt;
          &lt;div class="form-check form-check-inline"&gt;
              &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"&gt;
              &lt;label class="form-check-label" for="inlineRadio1"&gt;Option one&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
              &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"&gt;
              &lt;label class="form-check-label" for="inlineRadio2"&gt;Option Two&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
              &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"&gt;
              &lt;label class="form-check-label" for="inlineRadio3"&gt;Option tree&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="form-check form-check-inline"&gt;
              &lt;input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled&gt;
              &lt;label class="form-check-label" for="inlineRadio3"&gt;Option four (disabled)&lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>