CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
randomuser1
randomuser1

Reputation: 2803

how can I make my form controls inline even though I'm using col-lg-6 in bootstrap?

I prepared the fiddle here: http://jsfiddle.net/7yd5o63q/16/

as you can see (after clicking "random") all the controllers are one below each other. However, when I remove the first two lines:

<div class="col-lg-6">
<form role="form">

then the form inside is inline - and this is my goal. However, I have also some other controllers there that I didn't include in the fiddle, so I don't want to remove those two lines. Is there a way of maybe reseting the layout before reaching this part of code:

<div class="panel-body">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li><a href="#random" data-toggle="tab">Random</a>
        </li>
    </ul>
(...)

so that only this element will be inline and the rest will not?

Upvotes: 0

Views: 210

Answers (2)

vanburen
vanburen

Reputation: 21663

Here are two options depending on how you plan on treating mobile viewports.

Also, I would recommend not changing the Bootstrap default rules outright since it will alter your entire layout globally.

.form-inline-new .form-group {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .form-control {
  display: inline-block;
  width: auto;
  vertical-align: middle
}
.form-inline-new .form-control-static {
  display: inline-block
}
.form-inline-new .input-group {
  display: inline-table;
  vertical-align: middle
}
.form-inline-new .input-group .input-group-addon,
.form-inline-new .input-group .input-group-btn,
.form-inline-new .input-group .form-control {
  width: auto
}
.form-inline-new .input-group>.form-control {
  width: 100%
}
.form-inline-new .control-label {
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .radio,
.form-inline-new .checkbox {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
  vertical-align: middle
}
.form-inline-new .radio label,
.form-inline .checkbox label {
  padding-left: 0
}
.form-inline-new .radio input[type=radio],
.form-inline-new .checkbox input[type=checkbox] {
  position: relative;
  margin-left: 0
}
.form-inline-new .has-feedback .form-control-feedback {
  top: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-lg-6">
    <div class="row">
      <div class="panel-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
          <li><a href="#random" data-toggle="tab">Random</a>

          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane fade" id="random">
            <p>
              <form id="MyForm" class="form-inline-new" role="form">
                <div class="form-group">
                  <label>first</label>
                  <select class="form-control ">
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                  </select>
                  <label>every</label>
                  <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                  <label>for</label>
                  <select class="form-control">
                    <option>3 days</option>
                    <option>4 days</option>
                    <option>5 days</option>
                    <option>6 days</option>
                    <option>7 days</option>
                    <option>8 days</option>
                    <option>9 days</option>
                    <option>10 days</option>
                    <option>11 days</option>
                    <option>12 days</option>
                    <option>13 days</option>
                    <option>14 days</option>
                  </select>
                </div>
              </form>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <div class="col-lg-6">
    <div class="row">
      <div class="panel-body">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs">
          <li><a href="#random2" data-toggle="tab">Random Original</a>

          </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane fade" id="random2">
            <p>
              <form id="MyForm" class="form-inline" role="form">
                <div class="form-group">
                  <label>first</label>
                  <select class="form-control ">
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                  </select>
                  <label>every</label>
                  <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                  </select>
                  <label>for</label>
                  <select class="form-control">
                    <option>3 days</option>
                    <option>4 days</option>
                    <option>5 days</option>
                    <option>6 days</option>
                    <option>7 days</option>
                    <option>8 days</option>
                    <option>9 days</option>
                    <option>10 days</option>
                    <option>11 days</option>
                    <option>12 days</option>
                    <option>13 days</option>
                    <option>14 days</option>
                  </select>
                </div>
              </form>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Aziz
Aziz

Reputation: 7793

All you have to do is wrap each select "group" inside a 1/3 column. It should work with the .col-md-4 class but somehow it's not showing up for me so I had to add CSS manually.

See my JSFiddle

HTML

<div class="col-lg-6">
   <form role="form">
<div class="panel-body">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs">
        <li><a href="#random" data-toggle="tab">Random</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade" id="random">

                <form class="form-inline">
                    <div class="form-group">

                        <div class="col-md-4">
                            <label>first</label>
                            <select class="form-control ">
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label>every</label>
                            <select class="form-control">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>

                        <div class="col-md-4">
                            <label>for</label>
                            <select class="form-control">
                                <option>3 days</option>
                                <option>4 days</option>
                                <option>5 days</option>
                                <option>6 days</option>
                                <option>7 days</option>
                                <option>8 days</option>
                                <option>9 days</option>
                                <option>10 days</option>
                                <option>11 days</option>
                                <option>12 days</option>
                                <option>13 days</option>
                                <option>14 days</option>
                            </select>
                        </div>

                    </div>
                </form>

        </div>
    </div>
       </div>
    </form>
</div>

CSS

.col-md-4 {
    width:33.33%;
    float:left;
}

Upvotes: 1

Related Questions