Left bootstrap dropdown-toggle button?

Question

I wonder if there exists or if there is a way to make a bootstrap button like the one here, but with the dropdown-toggle to the left. If I just alter the order in the html, then the buttons do show in correct order, but their surfaces do not "snap" right to be totally adjacent as a unified button entity.

@pregmatch: What exactly you do not understand? The question I think is clear. Instead of having the toggle in the link provided to the right is it possible to have it to the left? You can check the code and the result on the link provided in the post. — pebox11
– pebox11, Commented Sep 24, 2015 at 14:39
Is this what you are looking for? stackoverflow.com/questions/15115204/… — Resber
– Resber, Commented Sep 24, 2015 at 15:06
@Resber: The link to the fiddle is broken in the accepted answer, however I would guess that this is not what I am looking for, since I am looking to place to the left the dropdown-toggle button. In the link provided in my SO question the bootstrap button consists of two buttons adjacent one after the other... Thank you for your answer though! — pebox11
– pebox11, Commented Sep 24, 2015 at 16:03
How can I undo a flag? By mistake I flagged Resbers comment which is absolutely fine... How can I undo it? — pebox11
– pebox11, Commented Sep 24, 2015 at 20:48

Sean Wessell · Accepted Answer · 2015-09-25 14:45:57Z

1

Is this what you are looking to accomplish?

http://jsfiddle.net/SeanWessell/2mbsLkmw/

HTML:

<!-- Split button -->
<div class="btn-group btn-group-left">
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span>
 <span class="sr-only">Toggle Dropdown</span>

    </button>
    <button type="button" class="btn btn-danger">Action</button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
    </ul>
</div>

Add btn-group-left to the btn-group div.

The add this css to override bootstrap:

CSS:

.btn-group.btn-group-left .dropdown-toggle {
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}
.btn-group.btn-group-left .dropdown-toggle+.btn {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

answered Sep 25, 2015 at 14:45

Sean Wessell

3,5201 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pebox11 Over a year ago

Yeap... I was looking for exactly this. Thanks!

Collectives™ on Stack Overflow

Left bootstrap dropdown-toggle button?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related