How to align radio buttons dynamically in center with same button position?

Question

I am setting up an online quiz with bootstrap, where the user gets a question with 4 different answer possibilities. Each answer is a radio button with the according answer, echoed by PHP. My goal is to center each of the answer possibilites in the middle of a card body, but have the circles of the radio buttons on the same margin.

Just an example with 2 hardcoded radio buttons:

  <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="container"> <div class="card"> <div class="card-body" align="center"> <form method="post"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="answer" value="1"> Long answer, normally echoed by php </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="answer" value="2"> answer echoed by php </label> </div> </form> </div> </div> </div> 

1) I already tried align="center" in card body (see code), this centers the radio buttons by their textfields, so the buttons themselves do not have the same margin, result is https://imgur.com/cPpUNZv .

2) I also tried style="left: 45%" in each div of the radios. This puts the actual radio buttons on the same margin, but if the answer displayed by PHP is a little bit longer, it does not look centered at all, see at https://imgur.com/XrtdO23 .

Goal: What I need is a way that the first radio button gets centered just like with approach 1) and the following radio buttons position themselves with the same left-margin like the first one. By doing this, the first radio is always centered and all the radios have their radio buttons on the same margin, just like here .

I guess this has to be made by some kind of css class configurations, in order to keep things dynamically with changing length of PHP outputs.

Answer 1

You can easily do that by adding d-flex and justify-content-center classes in the card body

Example

    <div class="card-body d-flex justify-content-center">

Full Example:

  <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="container"> <div class="card"> <div class="card-body d-flex justify-content-center"> <form method="post"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="answer" value="1" /> Long answer, normally echoed by php </label> </div> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="radio" name="answer" value="2" /> answer echoed by php </label> </div> </form> </div> </div> </div> 

and No matter how big or small your answers are, the radio buttons will always be on the same vertical line and centered according to the longest answer. The answers itself will always start at its radio button

Answer 2

Try this:

<div class="container">
    <div class="card">
        <div class="card-body col-xs-4 col-xs-offset-4">
            <form method="post">
                <div class="form-check row">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="answer" value="1">
                            Long answer, normally echoed by php
                    </label>
                </div>
                <div class="form-check row">
                    <label class="form-check-label">
                        <input class="form-check-input" type="radio" name="answer" value="2">
                            answer echoed by php
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>

I made each form-check a row and added col-xs-4 col-xs-offset-4 in parent div with class "card-body" .

I tried this code myself and I think this is what you need.