Bootstrap 4 tutorial

Component (4): Carousel / Collapse / Dropdowns

English (英語)Japanese (日本語)
First slide
Second slide
Third slide

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.
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

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

ActionAnother actionSomething else here
ActionAnother actionSomething else here
ActionAnother actionSomething else here
ActionAnother actionSomething else here
ActionAnother actionSomething else here
ActionAnother actionSomething else here

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

Add .btn-(lg|sm)

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

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

(Default)

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

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

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

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

div.btn-group.dropup

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

div.btn-group.dropright

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

div.btn-group.dropleft

ActionAnother actionSomething else here
Separated link
ActionAnother actionSomething else here
Separated link

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.

Static item (you cannot select it)Static with .dropdown-item-text (using .text-muted and code )Active item with various tags: strong , italic , sub , supActive with primary secondary success info warning danger

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

Regular linkActive linkAnother link

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

Regular linkDisabled linkAnother link

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.
  
// Dropdown: Active/disabled states demo
$('#active-disabled-example').delegate('a', 'click', function(event) {
  var item = $(this);
  event.preventDefault();                   // prevent default link behaviors
  if (item.hasClass('disabled')) return;    // implement disabled behaviors
  // update the active item
  $('#active-disabled-example a').removeClass('active');
  item.addClass('active');
  $('#active-indicator').text(item.text());
});

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.

ActionAnother actionSomething else here
Separated item with longer text

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

Dropdown header
ActionAnother actionSomething else here

Use div.dropdown-divider to separate item groups.

Text

You can also use dropdowns for showing popup text contents.

Some example text that's free-flowing within the dropdown menu.

And this is more example text.

A form can be used as a dropdown item.

New around here? Sign upForgot password?

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

ActionAnother actionSomething else here

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.

ActionAnother actionSomething else here

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

ActionAnother actionSomething else hereActionAnother actionSomething else hereActionAnother actionSomething else here