Reputation: 4670

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

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>

Upvotes: 2

Answers (4)

Walid azouzi

Reputation: 81

<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/

Upvotes: 1

haxxxton

Reputation: 6442

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

Upvotes: 6

Bharat

Reputation: 19

<!-- 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>

Upvotes: 0

Mg Mg Kyaw

Reputation: 91

<!-- 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.

Upvotes: 0

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

Answers (4)

Related Questions