Contents

Discover what’s included in Bootstrap, including our precompiled and source code flavors.

---

Vue Black Dashboard Structure

Once downloaded, unzip the compressed folder and you’ll see something like this:

|-- vue-black-dashboard-pro
    |-- App.vue
    |-- config.js
    |-- i18n.js
    |-- main.js
    |-- polyfills.js
    |-- assets
    |   |-- css
    |   |   |-- nucleo-icons.css
    |   |-- fonts
    |   |-- sass
    |       |-- black-dashboard-pro.scss
    |-- components
    |   |-- AnimatedNumber.vue
    |   |-- Badge.vue
    |   |-- BaseAlert.vue
    |   |-- BaseButton.vue
    |   |-- BaseCheckbox.vue
    |   |-- BaseDropdown.vue
    |   |-- BaseNav.vue
    |   |-- BasePagination.vue
    |   |-- BaseProgress.vue
    |   |-- BaseRadio.vue
    |   |-- BaseSwitch.vue
    |   |-- BaseTable.vue
    |   |-- CloseButton.vue
    |   |-- ImageUpload.vue
    |   |-- LoadingPanel.vue
    |   |-- Modal.vue
    |   |-- NavbarToggleButton.vue
    |   |-- Slider.vue
    |   |-- index.js
    |   |-- Breadcrumb
    |   |   |-- Breadcrumb.vue
    |   |   |-- BreadcrumbItem.vue
    |   |   |-- RouteBreadcrumb.vue
    |   |-- Cards
    |   |   |-- Card.vue
    |   |   |-- StatsCard.vue
    |   |-- Charts
    |   |   |-- BarChart.js
    |   |   |-- LineChart.js
    |   |   |-- PieChart.js
    |   |   |-- config.js
    |   |   |-- utils.js
    |   |-- Collapse
    |   |   |-- Collapse.vue
    |   |   |-- CollapseItem.vue
    |   |-- Inputs
    |   |   |-- BaseCheckbox.vue
    |   |   |-- BaseInput.vue
    |   |   |-- BaseRadio.vue
    |   |   |-- IconCheckbox.vue
    |   |-- Navbar
    |   |   |-- Navbar.vue
    |   |   |-- NavbarToggleButton.vue
    |   |-- NotificationPlugin
    |   |   |-- Notification.vue
    |   |   |-- Notifications.vue
    |   |   |-- index.js
    |   |-- SidebarPlugin
    |   |   |-- SideBar.vue
    |   |   |-- SidebarItem.vue
    |   |   |-- index.js
    |   |-- Tabs
    |   |   |-- Tab.vue
    |   |   |-- Tabs.vue
    |   |-- Timeline
    |   |   |-- TimeLine.vue
    |   |   |-- TimeLineItem.vue
    |   |-- Wizard
    |   |   |-- Wizard.vue
    |   |   |-- WizardTab.vue
    |   |   |-- throttle.js
    |   |-- WorldMap
    |       |-- AsyncWorldMap.vue
    |       |-- WorldMap.vue
    |       |-- world_map.js
    |-- directives
    |   |-- click-ouside.js
    |-- locales
    |   |-- ar.json
    |   |-- en.json
    |-- pages
    |   |-- Charts.vue
    |   |-- DefaultHeader.vue
    |   |-- Widgets.vue
    |   |-- Calendar
    |   |   |-- Calendar.vue
    |   |   |-- CalendarHeader.vue
    |   |   |-- CalendarRoute.vue
    |   |-- Components
    |   |   |-- Buttons.vue
    |   |   |-- GridSystem.vue
    |   |   |-- Icons.vue
    |   |   |-- Notifications.vue
    |   |   |-- Panels.vue
    |   |   |-- SweetAlert.vue
    |   |   |-- Typography.vue
    |   |   |-- Headers
    |   |       |-- SweetAlertHeader.vue
    |   |-- Dashboard
    |   |   |-- CountryMapCard.vue
    |   |   |-- Dashboard.vue
    |   |   |-- DashboardHeader.vue
    |   |   |-- HeaderChart.js
    |   |   |-- TaskList.vue
    |   |   |-- UserTable.vue
    |   |-- Forms
    |   |   |-- ExtendedForms.vue
    |   |   |-- RegularForms.vue
    |   |   |-- ValidationForms.vue
    |   |   |-- Wizard.vue
    |   |   |-- ValidationForms
    |   |   |   |-- LoginForm.vue
    |   |   |   |-- RangeValidationForm.vue
    |   |   |   |-- RegisterForm.vue
    |   |   |   |-- TypeValidationForm.vue
    |   |   |-- Wizard
    |   |       |-- FirstStep.vue
    |   |       |-- SecondStep.vue
    |   |       |-- ThirdStep.vue
    |   |-- GeneralViews
    |   |   |-- NotFoundPage.vue
    |   |-- Layout
    |   |   |-- Content.vue
    |   |   |-- ContentFooter.vue
    |   |   |-- DashboardLayout.vue
    |   |   |-- DashboardNavbar.vue
    |   |   |-- LoadingMainPanel.vue
    |   |   |-- SidebarFixedToggleButton.vue
    |   |   |-- SidebarSharePlugin.vue
    |   |   |-- SidebarToggleButton.vue
    |   |-- Maps
    |   |   |-- API_KEY.js
    |   |   |-- FullScreenMap.vue
    |   |   |-- GoogleMaps.vue
    |   |   |-- VectorMaps.vue
    |   |   |-- VectorMapsHeader.vue
    |   |   |-- WorldMap.vue
    |   |   |-- world_map.js
    |   |-- Pages
    |   |   |-- AuthLayout.vue
    |   |   |-- Lock.vue
    |   |   |-- Login.vue
    |   |   |-- Pricing.vue
    |   |   |-- RTLPage.vue
    |   |   |-- Register.vue
    |   |   |-- TimeLinePage.vue
    |   |   |-- UserProfile.vue
    |   |   |-- UserProfile
    |   |       |-- EditProfileForm.vue
    |   |       |-- UserCard.vue
    |   |-- Tables
    |       |-- ExtendedTables.vue
    |       |-- PaginatedTables.vue
    |       |-- RegularTables.vue
    |       |-- users.js
    |       |-- ExtendedTables
    |           |-- ShoppingTable.vue
    |-- plugins
    |   |-- RTLPlugin.js
    |   |-- dashboard-plugin.js
    |   |-- globalComponents.js
    |   |-- globalDirectives.js
    |   |-- liveDemo.js
    |-- routes
        |-- router.js
        |-- routes.js

Bootstrap components

Here is the list of Bootstrap 4 components that were restyled in Vue Black Dashboard:

Alerts

Badge

Buttons

Carousel

Dropdowns

Forms

Modal

Navs

Vue Black Dashboard Pro components

Besides giving the existing Bootstrap elements a new look, we added new ones, so that the interface and consistent and homogenous. Going through them, we added:

Sidebar

Custom Inputs

Checkboxes

Notifications

Pagination

Wizard

Progress

Radio

Switch

Slider

Timeline

Tabs

Charts

Font Awesome

Nucleo icons

Cards

Breadcrumb

Collapse