Twitter Bootstrap Question posted in

Checkbox and radiobutton in same row with Twitter Bootstrap

Its my beginning with Twitter Bootstrap so that question might be quite silly, but I’ve no idea how to solve that issue. I want to put checkbox and radiobutton in same row (should be displayed vertically aligned) but checkboxes and radiobuttons should be grouped in two separated fieldsets. I’ve got something like that: html snippet
but checkboxes are displayed higher than radiobuttons and putting them in the same div doesn’t change anything.

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <fieldset>
                <legend>
                     <h6>RB:</h6>

                </legend>
                <div class="row">
                    <div class="radio">
                        <label>
                            <input type="radio" name="optradio">Option 1</label>
                    </div>
                </div>
                <div class="row">
                    <div class="radio">
                        <label>
                            <input type="radio" name="optradio">Option 1</label>
                    </div>
                </div>
            </fieldset>
        </div>
        <div class="col-md-1">
            <fieldset>
                <legend>
                     <h6>CB:</h6>

                </legend>
                <div class="row">
                    <input type="checkbox" value="">
                </div>
                <div class="row">
                    <input type="checkbox" value="">
                </div>
            </fieldset>
        </div>
    </div>
</div>
Tags:

2

Answers


  1. 0

    This is how I did it:

        <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <fieldset>
            <legend>
              <h3>RB:</h3>
            </legend>

            <div class="radio">
              <label>
                <input type="radio" name="optradio">Option 1</label>
            </div>

            <div class="radio">
              <label>
                <input type="radio" name="optradio">Option 2</label>
            </div>
          </fieldset>
        </div>

        <div class="col-xs-6">
          <fieldset>
            <legend>
              <h3>CB:</h3>
            </legend>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Option 1</label>
            </div>

            <div class="checkbox">
              <label>
                <input type="checkbox" value="">Option 2</label>
            </div>
          </fieldset>
        </div>
      </div>
    </div>

    Have a look at the JSFiddle demo

    Login or Signup to reply.
  2. 0

    You could use the inline form class here

    or you could wrap your checkbox inputs with the checkbox class like this:

    <div class="checkbox">
    <input type="checkbox">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search