Search
- MDB Pro
- Products
- Getting Started
  - Home page
  - About MDB
  - Download
  - Quick start
  - Installation guide
  - Styles customization
  - Full tutorial
  - Roadmap
  - MDB CLI
  - Gulp
  - Webpack
  - MDB Angular
  - MDB React
  - MDB Vue
- Layout
- Utilities
  - Borders
  - Clearfix
  - Close icon
  - Display
  - Embeds
  - Float
  - Flexbox
  - Horizontal align
  - Image replacement
  - Overflow
  - Position
  - Screenreaders
  - Sizing
  - Spacing
  - Stretched link
  - Text
  - Vertical align
  - Visibility
- Content
  - Code
  - Figures
  - Flags
  - Icons usage
  - Icons list
  - Images
  - Typography
  - Responsive Font Size
- CSS
  - Demo
  - Animations
  - Background Image
  - Colors
  - Color combination
  - Text Color
  - Gradients
  - Hover effects
  - Masks
  - Parallax
  - Shadows
  - Skins
  - Variables
- Components
  - Demo
  - Alerts
  - Buttons
  - Buttons group
  - Buttons social
  - Cards
  - Cards extended
  - Dropdowns
  - Jumbotron
  - List group
  - Loaders / Spinners
  - Panels
  - Pagination
  - Pills
  - Progress bars
  - Stepper
  - Tabs
  - Labels and Badges
- JavaScript
- Navigation
  - Compositions
  - Breadcrumbs
  - Footer
  - Hamburger Menu
  - Mega Menu
  - Navs
  - Navbar
  - ScrollSpy
  - SideNav
- Forms
  - Basic examples
  - Autocomplete
  - Builder
  - Checkbox
  - Contact form
  - Customization
  - Date Picker
  - Drag and drop
  - File Input
  - Inputs
  - Inputs Group
  - Multiselect
  - Radio button
  - Search
  - Select
  - Slider
  - Switch
  - Textarea
  - Time Picker
  - Validation
- Tables
  - Basic examples
  - Additional examples
  - Datatables
  - Editable
  - Editor
  - Generator
  - Pagination
  - Responsive
  - Scroll
  - Search
  - Sort
- Modals
- Design Blocks
- Tutorials
  - Basics
  - Bootstrap
  - jQuery
  - Angular
  - React
  - Vue
  - WordPress
  - Miscellaneous
- Plugins & Addons
- Free templates
- Expert Kits New
- Tools & Resources

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:

Side navigation
Component initialization via JavaScript
Double navigation
Advanced navigation layouts
Skins
Customization via CSS
Sections
Charts
Select
Datepicker & timepicker
Tables
Table responsiveness
Pagination
Modals
Checkbox
Accordion
Dropdowns
Alerts

Previous lesson Live preview Next lesson

Spread the word:

Do you need help? Use our support forum

About the author

Michal Szymanski

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