CODEWITHSUNDEEP
css
kneidels
kneidels

Reputation: 914

bootstrap radio button layout

Using v3.3.7

No matter how long I mess with this, I cant seem to get this radio button done properly. It always looks weird... in he code below, you will see that i am trying to have the 2 options lid out inline, next to each other.

But they seem to cover their labels, and the actual input is huge...

Relevant code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-6">
    <label>Gender</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
        Male
        </label>

      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
      Female
        </label>
      </div>
    </div>

<div class="col-md-6">
    <label>Gender</label>
    <div>
      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required form-control" title="*">
        Male
        </label>

      <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required form-control" title="*">
      Female
        </label>
      </div>
    </div>

LINK: https://mizrachi.coda.co.il/radio.asp

Many thanks

Upvotes: 1

Views: 3652

Answers (2)

Majid Parvin
Majid Parvin

Reputation: 5002

Just remove form-control class of your radio buttons.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

You just need to remove the .form-control classes if you want them to be inline like that.

http://getbootstrap.com/css/

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
  <label>Gender</label>
  <div>
    <label class="radio-inline">
        <input type="radio" name="x_Gender" value="M" class="required" title="*">
        Male
    </label>
    <label class="radio-inline">
        <input type="radio" name="x_Gender" value="F" class="required" title="*">
      Female
    </label>
  </div>
</div>

Upvotes: 6

Related Questions