Cannot align radio button vertically

Question

I'm using Bootstrap 4 and I'm trying to add three radio buttons as a list, I created this HTML structure:

<div class="mt-3 text-center">
  <div class="custom-control custom-radio">
    <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
    <label class="custom-control-label" for="manualLoading">Foooooo1</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="dateLoading">Foo2</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="periodLoading">Fooooo3</label>
  </div>
</div>

The problem is that I get this:

enter image description here

This is a JSFIDDLE, how can I fix that?

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/demo doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). — Paulie_D, Oct 03 '18 at 15:03

zerokira · Accepted Answer · 2018-10-03T15:36:25.347

A possible solution for your problem is using display:grid in the new class content-checkbox and eliminating the class custom-control-label

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .content-checkbox {
               display: grid;
               justify-content: center;
            }
        </style>
    </head>

    <body>
        <div class="mt-3 text-center content-checkbox">
            <div class="custom-control custom-radio">
                <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
                <label class="custom-control-label" for="manualLoading">Foooooo1</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="dateLoading">Foo2</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="periodLoading">Fooooo3</label>
            </div>
        </div>
    </body>
</html>

UPDATE: Add a new class called content-checkbox

with your solution I cannot align the buttons to the center – Mario Serda Oct 03 '18 at 15:29 — Mario Serda, Oct 03 '18 at 15:29
@MarioSerda I've updated the answer – zerokira Oct 03 '18 at 15:37 — zerokira, Oct 03 '18 at 15:37

score 0 · Answer 2 · answered Oct 03 '18 at 15:04

I would suggest using default Bootstrap 4 classes for this purpose. Try the code below:

Default radio

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Cannot align radio button vertically

2 Answers2