How to align a bootstrap button to the right of a select option in a bootstrap panel

Question

I would like to align the bootstrap button to the right as per the diagram. Please note I am using Bootstrap Panels and form-horizontal:

By default the buttons are put beneath the options. what I have tried:

<button style="float: right" type="button" id="show-contact-modal-button" class="btn btn-primary">

This aligns the button to the right but still beneath the dropdown.

<div class=text-right><button ...>

This actually completely removes the button :-)

Here is the more complete HTML:

...

<form class="form-horizontal" role="form" method="POST" action="http://host/lead">

...
<!-- Contacts -->
<div class="form-group">
    <label for="contact_id" class="col-md-2 control-label">Contact</label>
    <div class="col-md-8">
        <select name="contact_id" id="contacts-select" class="form-control" title="">
                            <option value="1"
                                >
                    Eugene van der Merwe</option>
                            <option value="2"
                                >
                    Person B</option>
                            <option value="3"
                                >
                    Person C</option>
                    </select>

        <button type="button" id="show-contact-modal-button" class="btn btn-primary">
            Add contact
        </button>

            </div>
</div>
<!-- // Contacts -->

<!-- Referrer -->
<div class="form-group">
    <label for="referrer_id" class="col-md-2 control-label">Referrer</label>
    <div class="col-md-8">
        <select name="referrer_id" id="referrers-select" class="form-control" title="">
                            <option value="1"
                                >Eugene van der Merwe</option>
                            <option value="2"
                                >Person B</option>
                            <option value="3"
                                >Person C</option>
                            <div class=text-right>
                <button style="float: right" type="button" id="show-referrer-modal-button" class="btn btn-primary">
                    Add referrer
                </button>
                </div>
        </select>



            </div>
</div>
<!-- // Referrer -->
                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-2">
                                    <button type="submit" class="btn btn-primary">
                                        Create
                                    </button>
                                </div>
                            </div>
                        </form>

Col-md-8 gives a width to the div which is completely taken by the select menu.. If u reduce the width of select menu small enough to fit the button in the div then it can get align.. If it doesn't work then add disply:flex to the div. — Shubhranshu, Jan 26 '17 at 06:33
http://stackoverflow.com/questions/10615872/bootstrap-align-input-with-button :) — Ishu, Jan 26 '17 at 06:33

haxxxton · Accepted Answer · 2017-01-26T08:02:35.997

You can leverage Bootstrap's input-group, and input-group-addon classes. Then we just need to update the styling to handle a button inside.

HTML

<form class="form-horizontal" role="form" method="POST" action="http://host/lead">
    <!-- Contacts -->
    <div class="form-group">
        <label for="contact_id" class="col-md-2 control-label">Contact</label>
        <div class="col-md-8">
            <div class="input-group">
                <select name="contact_id" id="contacts-select" class="form-control" title="">
                    <option value="1">
                        Eugene van der Merwe</option>
                    <option value="2">
                        Person B</option>
                    <option value="3">
                        Person C</option>
                </select>
                <div class="input-group-addon input-group-button">
                    <button type="button" id="show-contact-modal-button" class="btn btn-primary">Add contact</button>
                </div>
            </div>
        </div>
    </div>
    <!-- // Contacts -->
    <!-- // Referrer -->
    <div class="form-group">
        <div class="col-md-8 col-md-offset-2">
            <button type="submit" class="btn btn-primary">
                Create
            </button>
        </div>
    </div>
</form>

CSS

.input-group-button {
    padding: 0 0 0 5px;
    border-color: transparent;
    background: none;
}

JSFIDDLE

PS. You appear to have placed the Referrer text-right button INSIDE your select element. This wont work, and should be updated

Update

If you would like your button to feel more "attached" to the select, you'll have to "turn off" webkits default border-radius that overrides .input-group .form-control's border-radius, but then can do something like:

CSS

.input-group-button {
    padding: 0;
    border:none;
    background: none;
}
.input-group .input-group-button:first-child .btn{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
}
.input-group .input-group-button:last-child .btn{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.input-group select.form-control{
    -webkit-appearance: none;
}

Updated JS Fiddle

Note: this will remove the browser added "arrows", so may not be what you're after

Thank you for the incredibly detailed reply. I'm going with your first option because it's short and sweet and I guess the arrows will be useful for now. The styling is going to change anyway as I move to select2. The only annoying thing with solution 1 is that the dropdown height is about a pixel smaller than the button height, so the button looks like it slightly hangs to the bottom. Nevertheless I need a really simple solution and your answer is it. — Eugene van der Merwe, Jan 26 '17 at 07:54
The CSS provided here will style _all_ instances of .`input-group-button`, whether added on to a `select` or a text `input`. To have this CSS _only_ apply to `select` lists, use `select + .input-group-button`. — Soulriser, Mar 21 '19 at 15:18

Walid azouzi · Answer 2 · 2017-01-26T09:08:19.293

<div class="form-group">
    <label for="contact_id" class="col-md-2 control-label"> Contact</label>

    <div class="col-md-8">
        <div class="col-md-6">
            <select name="contact_id" id="contacts-select" class="form-control" title="">
                <option value="1"
                    >
                    Eugene van der Merwe
                </option>
                <option value="2"
                    >
                    Person B
                </option>
                <option value="3"
                    >
                    Person C
                </option>
            </select>
        </div>
        <div class="col-md-6">
            <button type="button" id="show-contact-modal-button" class="btn btn-primary">
                Add contact
            </button>
        </div>
    </div>
</div>
<!-- // Contacts -->

<!--Referrer -->
<div class="form-group">
    <label for="referrer_id" class="col-md-2 control-label"> Referrer</label>

    <div class="col-md-8">
        <div class="col-md-6">
            <select name="referrer_id" id="referrers-select" class="form-control" title="">
                <option value="1"
                    > Eugene van der Merwe
                </option>
                <option value="2"
                    > Person B
                </option>
                <option value="3"
                    > Person C
                </option>
            </select>
        </div>
        <div class="col-md-6">
            <button id="show-referrer-modal-button" class="btn btn-primary">
                Add referrer
            </button>
        </div>


    </div>
</div>
<!-- // Referrer -->
<div class="form-group">
    <div class="col-md-8 col-md-offset-2">
        <button type="submit" class="btn btn-primary">
            Create
        </button>
    </div>
</div>
</form >

i put select in div col-md-6 and the button in div with col-md-6

https://jsfiddle.net/walidazouzi/a0s6bjaL/

score 0 · Answer 3 · answered Jan 26 '17 at 06:56

<!-- Contacts -->
<div class="form-group">
<label for="contact_id" class="col-md-2 control-label">Contact</label>
<div class="col-md-8">
<ul class="nav nav-pills">
<li>
    <select name="contact_id" id="contacts-select" class="form-control" title="">
                        <option value="1"
                            >
                Eugene van der Merwe</option>
                        <option value="2"
                            >
                Person B</option>
                        <option value="3"
                            >
                Person C</option>
                </select>
</li>
<li>
    <button type="button" id="show-contact-modal-button" class="btn btn-primary">
        Add contact
    </button>
</li>
</ul>
        </div>
</div>
<!-- // Contacts -->

I found this code in Bootstrap 4. Please try these code.

.

score 0 · Answer 4 · answered Jan 26 '17 at 07:15

<!-- try this -->
<!-- =========================================================== -->
<form class="form-horizontal" role="form" method="POST" action="http://host/lead">
<!-- Contacts -->
<div class="form-group">
  <label for="contact_id" class="col-md-2 control-label">Contact</label>
     <div class="col-md-8">
         <select name="contact_id" id="contacts-select" class="form  control" title="">
<option value="1">
  Eugene van der Merwe
</option>
<option value="2">
  Person B
</option>
<option value="3">
  Person C
</option>
</select>
</div>
<div>
<button type="button" id="show-contact-modal-button" class="btn btn-primary">
Add contact
</button>
</div>
</div>
<!-- // Contacts -->

<!-- Referrer -->
<div class="form-group">
  <label for="referrer_id" class="col-md-2 control-label">Referrer</label>
     <div class="col-md-8">
       <select name="referrer_id" id="referrers-select" class="form-control" title="">
       <option value="1">Eugene van der Merwe</option>
       <option value="2">Person B</option>
       <option value="3">Person C</option>
       </select>
     </div>
     <div class="col-md-2">
     <button type="submit" class="btn btn-primary">
        Create
     </button>
   </div>
</div>
</form>
</div>
</div>

How to align a bootstrap button to the right of a select option in a bootstrap panel

4 Answers4