Admin dashboard tutorial – Bootstrap 4 and Material Design

admin dashboard tutorial

Author: Michal Szymanski

-

Project introduction:

Admin dashboards belong to the most advanced UI category. They are designed for the organization and visualization of the huge amounts of data and for managing the multiple functionalities of the application.

Click on the button below to see the final result of this tutorial:

Final result preview

You will learn how to create and use the following components and functionalities:

  1. Side navigation

  2. Component initialization via JavaScript

  3. Double navigation

  4. Advanced navigation layouts

  5. Skins

  6. Customization via CSS

  7. Sections

  8. Charts

  9. Select

  10. Datepicker & timepicker

  11. Tables

  12. Table responsiveness

  13. Pagination

  14. Modals

  15. Checkbox

  16. Accordion

  17. Dropdowns

  18. Alerts

Rate this lesson
Previous lesson Live preview Next lesson
Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.

Note: We can help you build your project.
learn more

Sign up to follow your progress and get additional benefits
1. What will you learn 2. 5 min quick start
1. Basic structure, grid system and navbar 2. Images, cards and footer 3. Colors, spacing and responsiveness
1. Navigation and full-page background image 2. Masks and flexbox 3. Flexbox advanced options 4. Sections, icons and typography 5. Hover effect, waves effect and shadows 6. Carousel (slider / gallery) 7. Contact section and inputs / forms 8. Google Maps 9. Footer advanced options 10. Navbar advanced options
1. Gulp installation and setup 2. Customization 3. Custom skin 4. Add your own data to the custom skin
1. Basic structure and full-page video intro 2. RGBA colors and gradients 3. Features and projects sections 4. LightBox gallery 5. Testimonials and streak 6. Cascading cards and gradient masks 7. Contact section and footer 8. Animations
1. Automated web application with Bootstrap 4 & Material Design 2. Project introduction 3. Preparing the environment 4. Remote code injection 5. Labels 6. First algorithm 7. Modals 8. Scoring system 9. Web and behavioral analytics 10. Events and goals
1. Implementation of Web Push notifications 2. Installation 3. Creating the first notification 4. Segmentation 5. Performance