Features sections
Bootstrap features sections
MDB provides you multiple sections that help you highlight the best features of your project.
Try our new Design Blocks - an impressive collection of 400+ HTML / CSS sections
Try new Design BlocksFeatures v.1 MDB Pro component
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Analytics
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
Tutorials
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
Support
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores aperiam minima assumenda deleniti hic.
<!-- Section: Features v.1 -->
<section class="text-center my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold my-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4">
<i class="fas fa-chart-area fa-3x red-text"></i>
<h5 class="font-weight-bold my-4">Analytics</h5>
<p class="grey-text mb-md-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
maiores aperiam minima assumenda deleniti hic.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4">
<i class="fas fa-book fa-3x cyan-text"></i>
<h5 class="font-weight-bold my-4">Tutorials</h5>
<p class="grey-text mb-md-0 mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
maiores aperiam minima assumenda deleniti hic.
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4">
<i class="far fa-comments fa-3x orange-text"></i>
<h5 class="font-weight-bold my-4">Support</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
aperiam minima assumenda deleniti hic.
</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.1 -->
Features v.2 MDB Pro component
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Marketing
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn moreCustomization
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn moreSupport
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Learn more
<!-- Section: Features v.2 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4 mb-md-0 mb-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-2 col-md-3 col-2">
<i class="fas fa-bullhorn blue-text fa-2x"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-10 col-md-9 col-10">
<h4 class="font-weight-bold">Marketing</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a class="btn btn-primary btn-sm">Learn more</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 mb-md-0 mb-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-2 col-md-3 col-2">
<i class="fas fa-cogs pink-text fa-2x"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-10 col-md-9 col-10">
<h4 class="font-weight-bold">Customization</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a class="btn btn-pink btn-sm">Learn more</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-2 col-md-3 col-2">
<i class="fas fa-tachometer-alt purple-text fa-2x"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-10 col-md-9 col-10">
<h4 class="font-weight-bold">Support</h4>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<a class="btn btn-purple btn-sm">Learn more</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.2 -->
Features v.3 MDB Pro component
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Safety
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
Technology
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
Finance
Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.
<!-- Section: Features v.3 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-5 text-center text-lg-left">
<img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg" alt="Sample image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-7">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Safety</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Technology</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima veniam,
quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!--Grid row-->
<div class="row">
<!-- Grid column -->
<div class="col-1">
<i class="fas fa-share fa-lg indigo-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-xl-10 col-md-11 col-10">
<h5 class="font-weight-bold mb-3">Finance</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit enim ad minima
veniam, quis nostrum exercitationem ullam. Reprehenderit maiores aperiam assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!--Grid row-->
</div>
<!--Grid column-->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.3 -->
Features v.4 MDB Pro component
Why is it so great?
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
International
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Experimental
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Relaxing
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Rapid
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
Magical
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.
<!-- Section: Features v.4 -->
<section class="my-5">
<!-- Section heading -->
<h2 class="h1-responsive font-weight-bold text-center my-5">Why is it so great?</h2>
<!-- Section description -->
<p class="lead grey-text text-center w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam.</p>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-4">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-2">
<i class="fas fa-2x fa-flag-checkered deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">International</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-2">
<i class="fas fa-2x fa-flask deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">Experimental</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-md-0 mb-3">
<!-- Grid column -->
<div class="col-2">
<i class="fas fa-2x fa-glass-martini deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">Relaxing</h5>
<p class="grey-text mb-md-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4 text-center">
<img class="img-fluid" src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png"
alt="Sample image">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-4">
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-2">
<i class="far fa-2x fa-heart deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">Beloved</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row mb-3">
<!-- Grid column -->
<div class="col-2">
<i class="fas fa-2x fa-bolt deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">Rapid</h5>
<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores
nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-2">
<i class="fas fa-2x fa-magic deep-purple-text"></i>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-10">
<h5 class="font-weight-bold mb-3">Magical</h5>
<p class="grey-text mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
maiores nam, aperiam minima assumenda deleniti hic.</p>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>
<!-- Section: Features v.4 -->
Getting started: download & setup
Download
All of the components and features are a part of the MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is an MIT Licensed framework - free for personal & commercial use.
It combines the esthetic of Material Design and the functionalities of the newest Bootstrap.
Click on the button below to visit the Getting Started Page, where you can download the latest MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires the MDB Pro package - a powerful UI Kit containing over 10,000 components, dozens of plugins and much more cool features.
Click the button below to learn more about the MDBootstrap Pro package.
MDBootstrap ProTutorials
If you need any additional help, use our "5 min Quick Start" guide or start full Bootstrap tutorial.
5 min Quick Start Full Bootstrap TutorialCompilation & Customization
To reduce the weight of MDBootstrap package even more, you can compile your own, custom package containing only those components and features that you need.
If you need additional help with compiling your custom package, please use our Compilation & Customization tutorial.
Compilation & Customization tutorialMap of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Integrations with Angular, React or Vue
Apart from the standard Bootstrap integration (using jQuery), MDBootstrap also integrates with Angular, React and Vue.
About MDB Angular About MDB React About MDB VueExclusive resources
MDBootstrap is a platform for web creators and MDB packages are only a part of it.
If you sign up you'll gain free access to other useful tools & resources including:
- Community developed components & design projects
- Technical support & community forum
- CLI interface & free project hosting
- Helpful articles & news agregators
...and much more!
Don't hesitate and sign up now!
Sign up now