Bootstrap 4 tutorial

Component (4): Carousel / Collapse / Dropdowns

Collapse

You can toggle collapse (hidden) and expanded (shown) states of a target element with a button.

Example

Live examples below (a on left, button on right, both switch the same target div.collapse#ex-collapse).

div.collaps#ex-collapseAnim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

and buttons above are also made with the collapse function.

Multiple targets

Multiple targets can be specified by a class.

Example 1: With a's, used ID's for each (1) and (2), class for (1)+(2)

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Example 2: With button's

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.

Accordion example

Extended example using cards.

(1) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
(2) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
(3) Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.

.btn-(primary|secondary|success|info|warning|danger)

Add .btn-(lg|sm)

(a|button).btn.btn-secondary.btn-lg

(Default)

(a|button).btn.btn-secondary.btn-sm

Add .(dropup|dropright|dropleft) to a parent div.btn-group

Structures are basically the same. But the split dropleft has a slightly different structure.

button.dropdown-item elements can be used for items (does not jump on click by default).

You can use (span).dropdown-item-text to create static (not selectable) text items. You can also add any text formatting with tags and CSS to items. See the example below.

Add .active to a item to display as active state (white text on primary/blue background).

Add .disabled to an item to display as disabled (grayed text).

However, both classes have no behavior effect. An item with .active does not change when a user select another item. Also, an item with .disabled can be selected. Furthermore, it links to the target if its element is a (not disabled). You can check these behaviors with above examples.

(Advanced) JavaScript behaviors

JavaScript is required for appropriate behaviors. See the example below.

Item 1 is currently active.
 

A dropdown menu aligns left to a parent (same as a trigger button) as default. Adding .dropdown-menu-right to an item list, it alignes right at a parent (trigger button)'s right side.

Use h6.dropdown-header for menu headers (static i.e. not selectable). The example below sets a header as the first item Dropdown header.

Use div.dropdown-divider to separate item groups.

You can also use dropdowns for showing popup text contents.

A form can be used as a dropdown item.

You can specify menu position offset with data-offset="{x-offset-px},{y-offset-px}".

You can change menu position reference to the parent with data-reference="parent". It is useful for a split button to show menu from its parent frame.

Finally, you can fix (always dropdown) the menu direction with data-display="static". It disables (Popper's) dynamic positioning.