mdb-ui-kit/docs/components/button-dropdown.md

13 KiB

layout title group
docs Button dropdown components

[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs

{% callout info %} Bootstrap Reference Documentation This is reference documentation from Bootstrap. It is being rendered with Material Design for Bootstrap to demonstrate default styling. See the Material Design section for more elements and customization options. {% endcallout %}

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper dropdown menu markup.

{% callout danger %}

Plugin dependency

Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap. {% endcallout %}

Contents

  • Will be replaced with the ToC, excluding the "Contents" header {:toc}

Single button dropdowns

Turn a button into a dropdown toggle with some basic markup changes.

{% highlight html %}

{% endhighlight %}

Split button dropdowns

Similarly, create split button dropdowns with the same markup changes, only with a separate button.

{% highlight html %}

{% endhighlight %}

Sizing

Button dropdowns work with buttons of all sizes.

{% highlight html %}

Large button
...
Small button
...
{% endhighlight %}

Dropup variation

Trigger dropdown menus above elements by adding .dropup to the parent.

{% highlight html %}

Dropup Toggle Dropdown
{% endhighlight %}