Media Object

Basic example

• Media object (frame) div.media
  • Thumbnail image img Attributes
    • Margin .mr-3 (keeps 1rem between media body on right ⇒ Spacing utilities )
    • Attribute href="..."
    • Attribute alt="..."
  • Body div.media-body
    • Heading h5
      • Heading text Media heading
    • Body text Lorem ipsum ...

Nesting

div.media can be nested inside div.media-body

Nesting example

Three levels (more levels as the same way)

Alignment

Use Flex utilities . Examples for aligning img (with added borders).

img.align-self-start

img.align-self-center

img.align-self-end

Order

(1) Change DOM element order: move img to the last

(2) Change order with .order-* of Flex utilities .

Media list

Example using ul (same as ol )

• 

  Media heading (1)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• 

  Media heading (2)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• 

  Media heading (3)

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• ul.list-unstyled
  • Remove prefix symbols with .list-unstyled (⇒ Lists - Unstyled )
  • Items li.media.my-3
    • Adjust top/bottom margins with .my-3 (⇒ Spacing utilities )
    • See Basic example for inside

Modal

Modal components

Sample: modified to always-displayed (hidden as default)

Structure

• Modal div.modal Attributes
  • Animation .fade (does not slides down if removed)
  • Attribute id="{modal-id}" (required for invocation)
  • Attribute tabindex="-1" (removes from tab stops)
  • Accessibility attribute role="dialog"
  • Accessibility attribute aria-labelledby="{label-id}"
  • Accessibility attribute aria-hidden="true"
  • Modal dialog div.modal-dialog Attribute
    • Accessibility attribute role="document"
    • Content div.modal-content
      • Header div.modal-header
        • Title h5.modal-title Attribute
          • Accessibility attribute id="{label-id}"
          • Title text Modal title
        • Close button (upper-right) button.close Attributes
          • Attribute type="button"
          • Attribute data-dismiss="modal"
          • Accessibility attribute aria-label="Close"
          • Button symbol span Attribute
            • Accessibility attribute aria-hidden="true"
            • Symbol text ×
      • Body div.modal-body
        • Content (e.g.) p
          • Text Modal body text goes here.
      • Footer div.modal-footer
        • Close button button.btn.btn-secondary Attributes
          • Attribute type="button"
          • Attribute data-dismiss="modal"
          • Text Close
        • Additional button (e.g.) button.btn.btn-primary Attribute
          • Attribute type="button"
          • Text Save changes

Modal invocation

Modals can be invoked with buttons.

• button.btn.(btn-primary|...) Following attibutes are required
  • type="button"
  • data-toggle="modal"
  • data-target="#{modal-id}"
  • Text (e.g.) Launch demo modal

See the example below (clicking the button show a modal).

Launch demo modal

Behaviors (summary)

• Background is covered by a dark translucent whole-screen element (backdrop) (Z-index = 1040 )
• Modal shows at top-center (Z-index = 1050 )
• With .fade , uses CSS animation on showing modal (slides down from top)
• While displaying modal, keyboard event are sent to modal
• Modal also get scrolling events (see example below)
• Modal closes on one of followings
• Click a close button (upper-right × symbol, or bottom-right Close button)
• Click on background outside modal (backdrop)
• Esc key input

Scrolling long content

When modal height is greater than viewport size, the vertical scroll bar is shown at the right. The scroll bar scrolls the modal (not background contents). Check with the demo below.

Launch demo modal

Vertically centered

Adding .modal-dialog-centered to div.modal-dialog displays a modal on vertically center.

Launch demo modal

Tooltops and popovers

Example using a Tooltip and Popovers

Launch demo modal

Using the grid

Example using Grid (see source for detail).

Launch demo modal

Varying modal content

Example below is a demo for displaying button(recipient)-dependent contents to the same modal using JavaScript.

JavaScript code

$('#examplemodal').on('show.bs.modal', function(event) {
  var button = $(event.relatedTarget);
  var recipient = button.data('whatever');
  var modal = $(this);
  modal.find('.modal-title').text('New message to ' + recipient);
  modal.find('.modal-body input').val(recipient);
});

• Preliminarily set recipients' data in invocation buttons: e.g. data-whatever="@mdo"
• Set event handler for show.bs.modal : see Events for the difference of following two events
  • show.bs.modal (used here) On modal triggered (not yet displayed)
  • shown.bs.modal On modal displayed
• In event handler
  • Get the invocation button event.relatedTarget
  • Read attribute data-whatever to variable recipient
  • Set recipient to the modal title and the element input

Optional sizes

Use div.modal-dialog.modal-(xl|lg|sm)

Extra large modal Large modal Default modal Small modal