Search within TutorialsPark

Twitter Bootstrap DropDowns


To create DropDown Buttons of Various Sizes


Twitter Bootstrap: Single Drop Down Buttons

1. A dropdown button toggle group can be created by using class .btn-group to encapsulate buttons with class .dropdown-toggle

2. Here the class .caret is used within the <span> element to denote that the button is a dropdown

Example: Twitter Bootstrap DropDown Single Buttons

Give it a TRY! »

Twitter Bootstrap: Split Button DropDown

1. To create a split dropdown button the same markups are used but on a different button .

Example:Twitter Bootstrap Split Button Drop Down

Give it a TRY! »

Twitter Bootstrap: Drop Down Buttons of Various Sizes

1. Dropdown button of various sizes can be created using class .btn-* within .btn-group.

2. Here, the class .btn-lg denotes a large button .

class .btn-sm denotes a small button .

class .btn-xs denotes a extra small button .

Example:Twitter Bootstrap DropDown Buttons of Various Sizes

Give it a TRY! »

Twitter Bootstrap: DropUp Buttons with Variations

1. A dropup menu can be created by using the class .dropup to the parent element encapsulating the button set.

Example:Twitter Bootstrap DropUp Button with Variations

Give it a TRY! »