swiper-test-1





Bootstrap Material Design



Material Design for Bootstrap 4 or 3

This presentation shows a small part of components and features available in Material Design for Bootstrap. To see all of them have a look at our full demo.

Full demo & download

Free download


Buttons

Basic buttons








Additional buttons


















Outline buttons







Large and small buttons







Checkbox and Radio buttons




Cards

Classic cards

Card with waves effect

Some quick example text to build on the card title and make up the bulk of the card’s content.

Button


Classic card

Some quick example text to build on the card title and make up the bulk of the card’s content.

Button

Card with waves effect

Some quick example text to build on the card title and make up the bulk of the card’s content.

Button

Card groups

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Button

Last updated 3 mins ago


Dropdown and Select

Dropdown

Large and small dropdowns


Inputs

Input fields








Error or Success Messages





Textarea





Carousels

Classic carousel

Classic carousel with captions

Video Carousel


Panels

Basic, Header and Footer

Panel title

Some quick example text to build on the card title and make up the bulk of the card’s content.

Card link
Another link

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Background variants

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.


Typography

Headings

Header 1h1. Material Design for Bootstrap

Header 2h2. Material Design for Bootstrap

Header 3h3. Material Design for Bootstrap

Header 4h4. Material Design for Bootstrap

Header 5h5. Material Design for Bootstrap

Header 6h6. Material Design for Bootstrap

Responsive headings

By adding an appropriate class you can make your heading responsive. Thanks to that it will looks good on all screen sizes.

Resize your browser windows to see the effect

Header 1h1. heading

Header 2h2. heading

Header 3h3. heading

Header 4h4. heading

Header 5h5. heading

Notifications

Info notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?

Warning notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?

Success notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?

Danger notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores quibusdam dignissimos itaque harum illo! Quidem, corporis at quae tempore nisi impedit cupiditate perferendis nesciunt, ex dolores doloremque! Sit, rem,
in?

Contextual colors and backgrounds

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum.

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Font weight and italics

Bold text.

Normal weight text.

Italicized text.


600+ Icons

MDB uses a powerful set of icons called Font Awesome.

Font Awesome gives you scalable vector icons that can be customized — size, color, drop shadow and anything that can be done with the power of CSS.

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x


Animations

Over 70 CSS animations

Bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.


Charts

Simple, clean and interactive charts

Classic charts


Hover effects

Overlay effect

Light overlay

Strong overlay

Super light overlay

Zoom effect

Zoom effect

Shadow effect


Masks

Patterns

no mask

.pattern-1

.pattern-2

.pattern-3

.pattern-4

.pattern-5

.pattern-8

.pattern-6

.pattern-7

.pattern-9

Overlays

no overlay

light overlay

strong overlay


Modals

Click the button:




Images

Rounded image

...

Circle image

...

Rounded raised

...

Circle raised

...


List groups

Labels

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus

Linked items

Contextual classes

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros

Custom content

Reviews


Generic placeholder image

Maria Kate

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!


Generic placeholder image

Nathan Casie

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!


Generic placeholder image

Lara Smith

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate temporibus iure soluta. Quasi mollitia maxime nemo quam accusamus possimus, voluptatum expedita assumenda. Earum sit id ullam eum vel delectus!


Navbars

Breadcrumbs






Miscellaneous

Tags

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Collapse


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.

Tooltips (hover buttons below)




Popovers (click buttons below)


…and many more

Material Design for Bootstrap 4 or 3

Full demo & download


Learn more about MDB

Start our free, amazing tutorials, which will let you combine Material Design with Bootstrap and WordPress.

Bootstrap tutorial

This complete and easy guide will teach you how to create stunning, responsive website and apps.

Start

WordPress tutorial

This comprehensive tutorial contains everything you have to know about WordPress Theme development, starting with setting the environment, through WordPress installation and configuration, setting up theme construction,
development including custom widgets and functions.

Start