Twitter Bootstrap Question posted in

inline controls in horizontal form-Twitter bootstrap

I am using bootstrap3 and trying to create a horizontal form in which one of the rows should show the controls inline.

In the code below I would like the three selects to be on the same line as the input-group.

I have tried the approaches here: Form inline inside a form horizontal in twitter bootstrap? but I cannot get it to work.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>

<body>
  <h1>Form test</h1>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-xs-2 control-label">First input</label>

      <div class="col-xs-10">
        <div class="form-group">
          <div class="input-group col-xs-4">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                          <button class="btn btn-default">
                              some button
                          </button>
                      </span>
          </div>
          <div class="col-xs-6">
            <select>
              <option>Select1</option>
            </select>
            <select>
              <option>Select2</option>
            </select>
            <select>
              <option>Select3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-2 control-label">Second input</label>

      <div class="col-xs-10">
        <p class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
                        <button class="btn btn-default">
                            some other button
                        </button>
                    </span>
        </p>
        <select>
          <option>some other option</option>
        </select>
      </div>
    </div>
  </div>
</body>

</html>
Tags:

3

Answers


  1. 0

    Have you tried using a table?

    <table>
    <tbody>
        <tr>
            <td>
               <div class="input-group">
                   <input type="text" class="form-control">
                       <span class="input-group-btn">
                          <button class="btn btn-default">
                              some button
                          </button>
                       </span>
               </div>                
            </td>
            <td>
               <select>
                   <option>Select1</option>
               </select>
            </td>
             <td>
               <select>
                   <option>Select2</option>
               </select>
            </td>
            <td>
               <select>
                   <option>Select3</option>
               </select>                  
            </td>
        </tr>
    </tbody>
</table>
    Login or Signup to reply.
  2. 0

    You can try using the row class and not the form group class, tried it with Boostrap 3.

    <h1>Form test</h1>
<div class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-2 control-label">First input</label>

        <div class="col-xs-10">
            <div class="row">
                <div class="col-xs-4">
                    <div class="input-group">
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default">
                                some button
                            </button>
                        </span>
                    </div>
                </div>
                <div class="col-xs-6">
                    <select>
                        <option>Select1</option>
                    </select>
                    <select>
                        <option>Select2</option>
                    </select>
                    <select>
                        <option>Select3</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-2 control-label">Second input</label>

        <div class="col-xs-10">
            <p class="input-group">
                <input type="text" class="form-control">
                <span class="input-group-btn">
                    <button class="btn btn-default">
                        some other button
                    </button>
                </span>
            </p>
            <select>
                <option>some other option</option>
            </select>
        </div>
    </div>
</div>

    https://jsfiddle.net/FJB_ZA/Lmzubdw3/

    Login or Signup to reply.
  3. 0

    You need to make changes in your structure to make it fit in one line.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

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

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <h1>Form test</h1>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-xs-2 control-label">First input</label>

      <div class="col-xs-10">
        <div class="form-group">
          <div class="col-xs-3">
            <div class="input-group">
            <input type="text" class="form-control">
            <span class="input-group-btn">
                          <button class="btn btn-default">
                              some button
                          </button>
                      </span>
               </div>
          </div>
          <div class="col-xs-3">
            <select class="form-control">
              <option>Select1</option>
            </select>
          </div>
          <div class="col-xs-3">
            <select class="form-control">
              <option>Select2</option>
            </select>
          </div>
          <div class="col-xs-3">
            <select class="form-control">
              <option>Select3</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-xs-2 control-label">Second input</label>

      <div class="col-xs-10">
        <p class="input-group">
          <input type="text" class="form-control">
          <span class="input-group-btn">
                        <button class="btn btn-default">
                            some other button
                        </button>
                    </span>
        </p>
        <select>
          <option>some other option</option>
        </select>
      </div>
    </div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search