mdbootstrap / material-design-for-bootstrap

Important! A new UI Kit version for Bootstrap 5 is available. Access the latest free version via the link below.
https://mdbootstrap.com/docs/standard/
MIT License
9.34k stars 1.15k forks source link

How to add radio button after label #253

Closed Aravindaful closed 4 years ago

Aravindaful commented 5 years ago

Expected behavior

I want to add radio button after label

Actual behavior

If I add radio button after label,Then I can't check it.It's stuck

Your working environment and MDB version information

I'm using this code in Angular 8 project. Bootstrap version is 4.3.1

Resources (screenshots, code snippets etc.)

Here is the code I tried

<div class="form-group">
                                          <label class="control-label"> 1) What is the country you would like to travel?</label>
                                        <div class="ml-3">

                                            <div class=" custom-radio custom-control">

                                                 <label class="custom-control-label" for="q1_1">America
                                                        <input type="radio" class="custom-control-input" id="q1_1" name="q1"
                                                        value="1" formControlName="q1" />
                                                   </label>
                                              </div>
                                            <div class=" custom-radio custom-control">
                                                <label class="custom-control-label" for="q1_2">Australia</label>
                                                <input type="radio" class="custom-control-input" id="q1_2" name="q1"
                                                    value="2" formControlName="q1" />

                                            </div>
                                            <div class=" custom-radio custom-control">
                                                    <label class="custom-control-label" for="q1_3">India</label>
                                                <input type="radio" class="custom-control-input" id="q1_3" name="q1"
                                                    value="3" formControlName="q1" />

                                            </div>
                                            <div class=" custom-radio custom-control">
                                                 <label class="custom-control-label" for="q1_4">England</label>
                                                 <input type="radio" class="custom-control-input" id="q1_4" name="q1"
                                                    value="4" formControlName="q1" />
                                            </div>

                                        </div>
                                    </div>

I want to change the positions of label and the radio buttons

mattonit commented 5 years ago

Did you try to use MDB Angular?