CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
David Brierton
David Brierton

Reputation: 7397

Placing input next to label

I am using bootstrap 3.0.0

How do I place the input next to the label?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>

I am trying to place the select drop down right next to the label instead of underneath it. How do I make the input next to the label?

Upvotes: 0

Views: 52

Answers (4)

Izzy Ahmad
Izzy Ahmad

Reputation: 77

You can actually use the form-inline class to achieve your goal:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
      <div class="form-group form-inline">
        <label for="zipID">Zip Code:</label>
        <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
                <option value="">Please Select</option>
                <option value="34201" class="notranslate">34201</option>
                <option value="34202" class="notranslate">34202</option>
                <option value="34203" class="notranslate">34203</option>
                <option value="34204" class="notranslate">34204</option>
                <option value="34205" class="notranslate">34205</option>
                <option value="34207" class="notranslate">34207</option>
                <option value="34208" class="notranslate">34208</option>
                <option value="34209" class="notranslate">34209</option>
                <option value="34210" class="notranslate">34210</option>
                <option value="34211" class="notranslate">34211</option>
                <option value="34212" class="notranslate">34212</option>
                <option value="34281" class="notranslate">34281</option>
                <option value="34215" class="notranslate">34215</option>
                <option value="34216" class="notranslate">34216</option>
                <option value="34217" class="notranslate">34217</option>
                <option value="34219" class="notranslate">34219</option>
                <option value="34221" class="notranslate">34221</option>
                <option value="34222" class="notranslate">34222</option>
                <option value="34228" class="notranslate">34228</option>
                <option value="34243" class="notranslate">34243</option>
                <option value="34251" class="notranslate">34251</option>
              </select>
      </div>
  </div>
</div>

Refer Inline Form for futher clarification. Or maybe what you trying to do is actually Horizontal Form.

Upvotes: 0

david McDougald
david McDougald

Reputation: 21

You can accomplish this using CSS. Here is your example working as desired using a few CSS Properties and a parent DIV. This could also be done using bootstrap's grid.

` 

        <div class="row">
            <div class="col-lg-2">
                <div class="form-group">
                    <div style="white-space: nowrap">
                        <label style="display: inline-block">Zip Code:</label>
                        <select name="zipID" id="zipID" style="display: inline-block" required
                            message="Please select a zip code.">
                            <option value="">Please Select</option>
                            <option value="34201" class="notranslate">34201</option>
                            <option value="34202" class="notranslate">34202</option>
                            <option value="34203" class="notranslate">34203</option>
                            <option value="34204" class="notranslate">34204</option>
                            <option value="34205" class="notranslate">34205</option>
                            <option value="34207" class="notranslate">34207</option>
                            <option value="34208" class="notranslate">34208</option>
                            <option value="34209" class="notranslate">34209</option>
                            <option value="34210" class="notranslate">34210</option>
                            <option value="34211" class="notranslate">34211</option>
                            <option value="34212" class="notranslate">34212</option>
                            <option value="34281" class="notranslate">34281</option>
                            <option value="34215" class="notranslate">34215</option>
                            <option value="34216" class="notranslate">34216</option>
                            <option value="34217" class="notranslate">34217</option>
                            <option value="34219" class="notranslate">34219</option>
                            <option value="34221" class="notranslate">34221</option>
                            <option value="34222" class="notranslate">34222</option>
                            <option value="34228" class="notranslate">34228</option>
                            <option value="34243" class="notranslate">34243</option>
                            <option value="34251" class="notranslate">34251</option>
                        </select>
                    </div>

                </div>
            </div>
        </div>`

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28553

To display the elements beside one another use display:inline-block (or you could use flex with flex-direction of row if you were using flex-box but that's for another day). You are using Bootstrap css but you can add some css of your own. It is because the css is predefined in bootstrap that I've had to add the !important in front of the inline-block attribute.

I have added a class "label-control" to your label. You could add the form-control class and size them both the same but then you may want to take the border off the label by adding label.form-control{border:none;} if you do this. By creating a new class, you can size the elements differently.

Hope this helps

.label-control {
  border: none;
  padding: 10px;
  max-width: 30%;
}

.form-control {
  display: inline-block!important;
  vertical-align: middle;
  max-width: 60%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <label for="zipID" class="label-control">Zip Code:</label>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
    </div>
  </div>
</div>

Upvotes: 1

Ashton Hauser
Ashton Hauser

Reputation: 111

Might not be the most elegant solution but you could use HTML's table function: https://www.w3schools.com/html/html_tables.asp

I altered your code to provide what I believe is the desired result, have a great day and good luck with the rest of your form!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<table>
  <div class="row">
  <div class="col-lg-2">
    <div class="form-group">
      <tr>
      <th><label for="zipID">Zip Code:</label></th>
      <th>
      <select name="zipID" id="zipID" class="form-control input-sm" required message="Please select a zip code.">
        <option value="">Please Select</option>
        <option value="34201" class="notranslate">34201</option>
        <option value="34202" class="notranslate">34202</option>
        <option value="34203" class="notranslate">34203</option>
        <option value="34204" class="notranslate">34204</option>
        <option value="34205" class="notranslate">34205</option>
        <option value="34207" class="notranslate">34207</option>
        <option value="34208" class="notranslate">34208</option>
        <option value="34209" class="notranslate">34209</option>
        <option value="34210" class="notranslate">34210</option>
        <option value="34211" class="notranslate">34211</option>
        <option value="34212" class="notranslate">34212</option>
        <option value="34281" class="notranslate">34281</option>
        <option value="34215" class="notranslate">34215</option>
        <option value="34216" class="notranslate">34216</option>
        <option value="34217" class="notranslate">34217</option>
        <option value="34219" class="notranslate">34219</option>
        <option value="34221" class="notranslate">34221</option>
        <option value="34222" class="notranslate">34222</option>
        <option value="34228" class="notranslate">34228</option>
        <option value="34243" class="notranslate">34243</option>
        <option value="34251" class="notranslate">34251</option>
      </select>
      </th>
    </div>
  </div>
  </div>
</table>
</tr>

Upvotes: 0

Related Questions