Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control. The .btn classes are designed to be used with the <button> element.

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

Chips can be used for various types of entities, including brief information, free form text, or short title. Chips may also contain icons or photos. Chips can be deletable. Use <a> s or <button> s to create actionable chips with active, focus and hover states by adding .chip-action.

Most of the details about Material Basic Tables have been covered in Tables / Basic Tables documentation. Please refer to this page for more details.

Dialogs contain text and UI controls. They retain focus until dismissed or a required action has been taken. Use dialogs sparingly because they are interruptive.

All the available elevation and shadow variables are defined in material-extended / variables / _elevation-shadow.scss. This page summarises the default elevation and shadow values used by Material components.

Material also provides utility classes to quickly add or remove a shadow for any componenet/element.

Expansion panels are best used for lightweight editing of an element. A collapsed panel displays summary information. Upon selecting the collapsed panel, it expands to display the full expansion panel, allowing users to add or edit information. An expansion panel can stand alone. An expansion panel can also be connected to a larger surface, such as a card.

You can download material icons directly from the this page. You can change Icons' properties like size, color.

Menus appear upon interaction with a action, button, or other control. They display a list of choices, with one choice per line.

The navigation drawer contains the navigation destinations for your app or site. Material provides some basic styles for a set of components that are normally used in a navigation drawer such as headings and navs. A permanent navigation drawer is always visible at the same elevation as the content.

A date picker has to be activated via JavaScript. N.B. Date picker requires material.js or material.min.js. and .datepicker.

Progress indicators are visual indications of an app loading content. When indicators are indeterminate they request that the user wait while something finishes when it’s not necessary to indicate how long it will take.

Selection controls allow the user to select options. Three types of selection controls are covered in this guidance:

• Checkboxes allow the selection of multiple options from a set.
• Radio buttons allow the selection of a single option from a set.
• Switches allow a selection to be turned on or off.

Snackbars provide brief feedback about an operation through a message at the bottom of the screen.

Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation.

Tabs enable content organization at a high level, such as switching between views. Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.

Text fields usually appear in forms. Users may enter text, numbers, or mixed-format types of input.