Twitter Bootstrap Question posted in

Twitter bootstrap btn-group doesn't allow inline text on your right?

I am trying to display 3 divs (a radio button, a button group and a select) inside a form on the same line and in that order, but I still keep failing.

I have tried this solution but didn’t helped me. I really don’t know if this is a common problem or I am missing something.

PICTURE
enter image description here

HTML

        <form>
            <div class="form-group row">
                <div class="col-sm-2">
                  <label for="f-option1">
                  <input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>
                  My radio button</label>
                </div>
                <div class="btn-toolbar">
                    <label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
                    <div class="col-sm-2 btn-group" data-toggle="buttons">
                        <label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                        <label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                    </div>
                </div>   
                <label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
                <div class="col-sm-2">
                    <select class="form-control" id="sel1">
                        <option>1</option>
                        <option>2</option>
                    </select>

                </div>
            </div>
        </form>
Tags:

2

Answers


  1. 0

    Try This.

    <div class="form-group row">
            <div class="col-sm-2">
              <label for="f-option1">
              <input onclick="doSomething()" type="radio" id="f-option1" name="selector" checked="">
              My radio button</label>
            </div>
            <div class="btn-toolbar" "="">
                <label for="inputEmail3" class="col-sm-1 control-label">My group button:</label>
                <div class="col-sm-2 btn-group" data-toggle="buttons">
                    <label class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                    <label class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                </div>
              <label for="inputEmail2" class="col-sm-1 col-form-label">My select:</label>
            <div class="col-sm-2">
                <select class="form-control" id="sel1">
                    <option>1</option>
                    <option>2</option>
                </select>

            </div>
            </div>   

        </div>
    Login or Signup to reply.
  2. 0

    Here is one variant of solution. You need just do inline label and dropdown list. Open full page to see result.

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <form>
      <div class="col-lg-4">
        <label for="f-option1">
          <input onClick="doSomething()" type="radio" id="f-option1" name="selector" checked>My radio button
        </label>
      </div>
      <div class="col-lg-4">
        <div class="input-group">
          <label for="inputEmail3" class="control-label">My group button:</label>
          <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
              <input type="radio" name="options" id="option5">10</label>
            <label class="btn btn-default">
              <input type="radio" name="options" id="option6">30</label>
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="input-group">
          <label for="inputEmail2" class="control-label">My select:</label>
          <select class="form-control" id="inputEmail2">
            <option>1</option>
            <option>2</option>
          </select>
        </div>
      </div>
    </form>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search