Icon list
Bootstrap icon list
Bootstrap icon list is a number of 600 scalable vector icons called Font Awesome which covers multiple topics and use cases.
Icon:
Output HTML:
Click on icon below to choose it
- fa-address-book
- fa-address-book-o
- fa-address-card
- fa-address-card-o
- fa-adjust
- fa-american-sign-language-interpreting
- fa-anchor
- fa-archive
- fa-archive
- fa-area-chart
- fa-arrows
- fa-arrows-h
- fa-arrows-v
- fa-asl-interpreting
- fa-assistive-listening-systems
- fa-asterisk
- fa-at
- fa-audio-description
- fa-automobile
- fa-balance-scale
- fa-ban
- fa-bank
- fa-bar-chart
- fa-bar-chart-o
- fa-barcode
- fa-bars
- fa-bath
- fa-bathtub
- fa-battery
- fa-battery-0
- fa-battery-1
- fa-battery-2
- fa-battery-3
- fa-battery-4
- fa-battery-empty
- fa-battery-full
- fa-battery-half
- fa-battery-quarter
- fa-battery-three-quarters
- fa-bed
- fa-beer
- fa-bell
- fa-bell-o
- fa-bell-slash
- fa-bell-slash-o
- fa-bicycle
- fa-binoculars
- fa-birthday-cake
- fa-blind
- fa-bluetooth
- fa-bluetooth-b
- fa-bolt
- fa-bomb
- fa-book
- fa-bookmark
- fa-bookmark-o
- fa-braille
- fa-briefcase
- fa-bug
- fa-building
- fa-building-o
- fa-bullhorn
- fa-bullseye
- fa-bus
- fa-cab
- fa-calculator
- fa-calendar
- fa-calendar-check-o
- fa-calendar-minus-o
- fa-calendar-o
- fa-calendar-plus-o
- fa-calendar-times-o
- fa-camera
- fa-camera-retro
- fa-car
- fa-caret-square-o-down
- fa-caret-square-o-left
- fa-caret-square-o-right
- fa-caret-square-o-up
- fa-cart-arrow-down
- fa-cart-plus
- fa-cc
- fa-certificate
- fa-check
- fa-check-circle
- fa-cc
- fa-check-square
- fa-check-square-o
- fa-child
- fa-circle
- fa-circle-o
- fa-circle-o-notch
- fa-circle-thin
- fa-clock-o
- fa-clone
- fa-close
- fa-cloud
- fa-cloud-download
- fa-cloud-upload
- fa-code
- fa-code-fork
- fa-coffee
- fa-cog
- fa-cogs
- fa-comment
- fa-comment-o
- fa-commenting
- fa-commenting-o
- fa-comments
- fa-comments-o
- fa-compass
- fa-copyright
- fa-creative-commons
- fa-credit-card
- fa-credit-card-alt
- fa-crop
- fa-crosshairs
- fa-cube
- fa-cubes
- fa-cutlery
- fa-dashboard
- fa-database
- fa-deaf
- fa-deafness
- fa-desktop
- fa-diamond
- fa-dot-circle-o
- fa-download
- fa-dirvers-license
- fa-drivers-license-o
- fa-edit
- fa-ellipsis-h
- fa-ellipsis-v
- fa-envelope
- fa-envelope-o
- fa-envelope-open
- fa-envelope-open-o
- fa-envelope-square
- fa-eraser
- fa-exchange
- fa-exclamation
- fa-exclamation-circle
- fa-exclamation-triangle
- fa-external-link
- fa-external-link-square
- fa-eye
- fa-eye-slash
- fa-eyedropper
- fa-fax
- fa-feed
- fa-female
- fa-flighter-jet
- fa-file-archive-o
- fa-file-audio-o
- fa-file-code-o
- fa-file-excel-o
- fa-file-image-o
- fa-file-movie-o
- fa-file-pdf-o
- fa-file-photo-o
- fa-file-picture-o
- fa-file-powerpoint-o
- fa-sound-o
- fa-video-o
- fa-word-o
- fa-zip-o
- fa-film
- fa-filter
- fa-fire
- fa-fire-extinguisher
- fa-flag
- fa-flag-checked
- fa-flag-o
- fa-flash
- fa-flask
- fa-folder
- fa-folder-o
- fa-folder-open
- fa-folder-open-o
- fa-frown-o
- fa-futbol-o
- fa-gamepad
- fa-gavel
- fa-gear
- fa-gears
- fa-gift
- fa-glass
- fa-globe
- fa-graduation-cap
- fa-group
- fa-hand-grab-o
- fa-hand-lizard-o
- fa-hand-paper-o
- fa-hand-peace-o
- fa-hand-pointer-o
- fa-hand-rock-o
- fa-hand-scissors-o
- fa-hand-spock-o
- fa-hand-stop-o
- fa-handshake
- fa-hard-of-hearing
- fa-hashtag
- fa-hdd-o
- fa-headphones
- fa-heart
- fa-heart-o
- fa-heartbeat
- fa-history
- fa-home
- fa-hotel
- fa-hourglass
- fa-hourglass
- fa-hourglass-2
- fa-hourglass-3
- fa-hourglass-end
- fa-hourglass-half
- fa-hourglass-o
- fa-hourglass-start
- fa-i-cursor
- fa-id-badge
- fa-id-card
- fa-id-card-o
- fa-image
- fa-inbox
- fa-industry
- fa-info
- fa-info-circle
- fa-institution
- fa-key
- fa-keyboard-o
- fa-language
- fa-laptop
- fa-leaf
- fa-legal
- fa-lemon-o
- fa-level-down
- fa-level-up
- fa-life-bouy
- fa-life-buoy
- fa-life-ring
- fa-life-saver
- fa-lightbulb-o
- fa-line-chart
- fa-location-arrow
- fa-lock
- fa-low-vision
- fa-magic
- fa-magnet
- fa-mail-forward
- fa-mail-reply
- fa-mail-reply-all
- fa-male
- fa-map
- fa-map-marker
- fa-map-o
- fa-map-pin
- fa-map-signs
- fa-meh-o
- fa-microchip
- fa-microphone
- fa-microphone-slash
- fa-minus
- fa-minus-circle
- fa-minus-square
- fa-minus-square-o
- fa-mobile
- fa-mobile-phone
- fa-money
- fa-moon-o
- fa-mortar-board
- fa-motorcycle
- fa-mouse-pointer
- fa-music
- fa-navicon
- fa-newspaper-o
- fa-object-group
- fa-object-ungroup
- fa-paint-brush
- fa-paper-plane
- fa-paper-plane-o
- fa-paw
- fa-pencil
- fa-pencil-square
- fa-pencil-square-o
- fa-percent
- fa-phone
- fa-phone-square
- fa-photo
- fa-picture-o
- fa-pie-chart
- fa-plane
- fa-plug
- fa-plus
- fa-plus-circle
- fa-plus-square
- fa-plus-square-o
- fa-podcast
- fa-power-off
- fa-print
- fa-puzzle-piece
- fa-qrcode
- fa-question
- fa-question-circle
- fa-question-circle-o
- fa-quote-left
- fa-quote-right
- fa-random
- fa-recycle
- fa-refresh
- fa-registered
- fa-remove
- fa-reorder
- fa-reply
- fa-reply-all
- fa-retweet
- fa-road
- fa-rocket
- fa-rss
- fa-rss-square
- fa-s15
- fa-search
- fa-search-minus
- fa-search-plus
- fa-send
- fa-send-o
- fa-server
- fa-share
- fa-share-alt
- fa-share-alt-square
- fa-share-square
- fa-share-square-o
- fa-shield
- fa-ship
- fa-shopping-bag
- fa-shopping-basket
- fa-shopping-cart
- fa-shower
- fa-sign-in
- fa-sign-language
- fa-sign-out
- fa-signal
- fa-signing
- fa-sitemap
- fa-sliders
- fa-smile-o
- fa-snowflake-o
- fa-soccer-ball-o
- fa-sort
- fa-sort-alpha-asc
- fa-sort-alpha-desc
- fa-sort-amount-asc
- fa-sort-amount-desc
- fa-sort-asc
- fa-sort-desc
- fa-sort-down
- fa-sort-up
- fa-sort-numeric-asc
- fa-sort-numeric-desc
- fa-sort-shuttle
- fa-sort-spinner
- fa-sort-spoon
- fa-sort-square
- fa-sort-square-o
- fa-star
- fa-star-half
- fa-start-half-empty
- fa-star-half-full
- fa-star-half-o
- fa-star-o
- fa-sticky-note
- fa-sticky-note-o
- fa-street-view
- fa-suitcase
- fa-sun-o
- fa-support
- fa-tablet
- fa-tachometer
- fa-tag
- fa-tags
- fa-tasks
- fa-taxi
- fa-television
- fa-terminal
- fa-thermometer
- fa-thermometer-0
- fa-thermometer-1
- fa-thermometer-2
- fa-thermometer-3
- fa-thermometer-4
- fa-thermometer-empty
- fa-thermometer-full
- fa-thermometer-half
- fa-thermometer-quarter
- fa-thermometer-three-quarters
- fa-thumb-tack
- fa-thumbs-down
- fa-thumbs-o-down
- fa-thumbs-o-up
- fa-thumbs-up
- fa-ticket
- fa-times
- fa-times-circle
- fa-times-circle-o
- fa-times-rectangle
- fa-times-rectangle-o
- fa-tint
- fa-toggle-down
- fa-toggle-left
- fa-toggle-right
- fa-toggle-off
- fa-toggle-on
- fa-toggle-right
- fa-toggle-up
- fa-trademark
- fa-trash
- fa-trash-o
- fa-tree
- fa-trophy
- fa-truck
- fa-tty
- fa-tv
- fa-umbrella
- fa-universal-access
- fa-university
- fa-unlock
- fa-unlock-alt
- fa-unsorted
- fa-upload
- fa-user
- fa-user-circle
- fa-user-circle-o
- fa-user-plus
- fa-user-times
- fa-user-secret
- fa-users
- fa-user-o
- fa-vcard
- fa-vcard-0
- fa-video-camera
- fa-volume-control-phone
- fa-volume-down
- fa-volume-off
- fa-volume-up
- fa-warning
- fa-wheelchair
- fa-wheelchair-alt
- fa-wifi
- fa-window-close
- fa-window-close-o
- fa-window-maximize
- fa-window-minimize
- fa-window-restore
- fa-wrench
- fa-american-sign-language-interpreting
- fa-asl-interpreting
- fa-assistive-listening-systems
- fa-audio-description
- fa-blind
- fa-braille
- fa-cc
- fa-deaf
- fa-deafness
- fa-hard-of-hearing
- fa-low-vision
- fa-question-circle-o
- fa-sign-language
- fa-signing
- fa-tty
- fa-universal-access
- fa-volume-control-phone
- fa-wheelchair
- fa-wheelchair-alt
- fa-hand-grab-o
- fa-hand-lizard-o
- fa-hand-o-down
- fa-hand-o-left
- fa-hand-o-right
- fa-hand-o-up
- fa-hand-paper-o
- fa-hand-peace-o
- fa-hand-pointer-o
- fa-hand-rock-o
- fa-hand-scissors-o
- fa-hand-spock-o
- fa-hand-stop-o
- fa-thumbs-down
- fa-thumbs-o-down
- fa-thumbs-o-up
- fa-thumbs-up
- fa-ambulance
- fa-automobile
- fa-bicycle
- fa-bus
- fa-cab
- fa-car
- fa-fighter-jet
- fa-motorcycle
- fa-plane
- fa-rocket
- fa-ship
- fa-space-shuttle
- fa-subway
- fa-taxi
- fa-train
- fa-truck
- fa-wheelchair
- fa-wheelchair-alt
- fa-genderless
- fa-intersex
- fa-mars
- fa-mars-double
- fa-mars-stroke
- fa-mars-stroke-h
- fa-mars-stroke-v
- fa-mercury
- fa-neuter
- fa-transgender
- fa-transgender-alt
- fa-venus
- fa-venus-double
- fa-venus-mars
- fa-file
- fa-file-archive-o
- fa-file-audio-o
- fa-file-code-o
- fa-file-excel-o
- fa-file-image-o
- fa-file-movie-o
- fa-file-o
- fa-file-pdf-o
- fa-file-photo-o
- fa-file-picture-o
- fa-file-powerpoint-o
- fa-file-sound-o
- fa-file-text
- fa-file-text-o
- fa-file-video-o
- fa-file-word-o
- fa-file-zip-o
- fa-circle-o-notch
- fa-cog
- fa-gear
- fa-refresh
- fa-wrench
- fa-check-square
- fa-check-square-o
- fa-circle
- fa-circle-o
- fa-dot-circle-o
- fa-minus-square
- fa-minus-square-o
- fa-plus-square
- fa-plus-square-o
- fa-square
- fa-square-o
- fa-cc-amex
- fa-cc-diners-club
- fa-cc-discover
- fa-cc-jcb
- fa-cc-mastercard
- fa-cc-paypal
- fa-cc-stripe
- fa-cc-visa
- fa-credit-card
- fa-credit-card-alt
- fa-google-wallet
- fa-paypal
- fa-area-chart
- fa-bar-chart
- fa-bar-chart-o
- fa-line-chart
- fa-pie-chart
- fa-bitcoin
- fa-btc
- fa-cny
- fa-dollar
- fa-eur
- fa-euro
- fa-gbp
- fa-gg
- fa-gg-circle
- fa-ils
- fa-inr
- fa-jpy
- fa-krw
- fa-money
- fa-rmb
- fa-rouble
- fa-rub
- fa-ruple
- fa-rupee
- fa-shekel
- fa-sheqel
- fa-try
- fa-turkish-lira
- fa-usd
- fa-won
- fa-yen
- fa-align-center
- fa-align-justify
- fa-align-left
- fa-align-right
- fa-bold
- fa-chain
- fa-chain-broken
- fa-clipboard
- fa-columns
- fa-copy
- fa-cut
- fa-dedent
- fa-earser
- fa-file
- fa-file-o
- fa-file-text
- fa-file-text-o
- fa-files
- fa-floppy-o
- fa-font
- fa-header
- fa-indent
- fa-italic
- fa-link
- fa-list
- fa-list-alt
- fa-list-ol
- fa-list-ul
- fa-outdent
- fa-paperclip
- fa-parapgraph
- fa-paste
- fa-repeat
- fa-rotate-left
- fa-rotate-right
- fa-save
- fa-scissors
- fa-strikethrought
- fa-subscript
- fa-superscript
- fa-table
- fa-text-height
- fa-text-width
- fa-th
- fa-th-large
- fa-th-list
- fa-underline
- fa-undo
- fa-unlink
- fa-angle-double-down
- fa-angle-double-left
- fa-angle-double-right
- fa-angle-double-up
- fa-angle-down
- fa-angle-left
- fa-angle-right
- fa-angle-up
- fa-arrow-circle-down
- fa-arrow-circle-left
- fa-arrow-circle-o-down
- fa-arrow-circle-o-left
- fa-arrow-circle-o-right
- fa-arrow-circle-o-up
- fa-arrow-circle-right
- fa-arrow-circle-up
- fa-arrow-down
- fa-arrow-left
- fa-arrow-right
- fa-arrow-up
- fa-arrows
- fa-arrows-alt
- fa-arrows-h
- fa-arrows-v
- fa-caret-down
- fa-caret-left
- fa-caret-right
- fa-caret-square-down
- fa-caret-square-o-left
- fa-caret-square-o-right
- fa-caret-square-o-up
- fa-caret-up
- fa-chevron-circle-down
- fa-chevron-circle-left
- fa-chevron-circle-right
- fa-chevron-circle-up
- fa-chevron-down
- fa-chevron-left
- fa-chevron-right
- fa-chevron-up
- fa-exchange
- fa-hand-o-down
- fa-hand-o-left
- fa-hand-o-right
- fa-hand-o-up
- fa-long-arrow-down
- fa-long-arrow-left
- fa-long-arrow-right
- fa-long-arrow-up
- fa-toggle-down
- fa-toggle-left
- fa-toggle-right
- fa-toggle-up
- fa-arrows-alt
- fa-backward
- fa-compress
- fa-eject
- fa-expand
- fa-fast-backward
- fa-fast-forward
- fa-forward
- fa-pause
- fa-pause-circle
- fa-pause-circle-o
- fa-play
- fa-play-circle
- fa-play-circle-o
- fa-random
- fa-step-backward
- fa-step-forward
- fa-stop
- fa-stop-circle
- fa-stop-circle-o
- fa-youtube-play
- fa-500px
- fa-adn
- fa-amazon
- fa-android
- fa-angellist
- fa-apple
- fa-bandcamp
- fa-behance
- fa-behance-square
- fa-bitbucket
- fa-bitbucket-square
- fa-bitcoin
- fa-black-tie
- fa-bluetooth
- fa-bluetooth-b
- fa-btc
- fa-buysellads
- fa-cc-amex
- fa-cc-diners-club
- fa-cc-discover
- fa-cc-jcb
- fa-cc-mastercard
- fa-cc-paypal
- fa-cc-stripe
- fa-cc-visa
- fa-chrome
- fa-codepen
- fa-codiepie
- fa-connectdevelop
- fa-contao
- fa-css3
- fa-dashcube
- fa-delicious
- fa-deviantart
- fa-digg
- fa-dribbble
- fa-dropbox
- fa-drupal
- fa-edge
- fa-eercast
- fa-empire
- fa-envira
- fa-etsy
- fa-expeditedssl
- fa-fa
- fa-facebook
- fa-facebook-f
- fa-facebook-official
- fa-facebook-square
- fa-firefox
- fa-first-order
- fa-flickr
- fa-font-awesome
- fa-fonticons
- fa-fort-awesome
- fa-forumbee
- fa-foursquare
- fa-free-code-camp
- fa-ge
- fa-get-pocket
- fa-gg
- fa-gg-circle
- fa-git
- fa-git-square
- fa-github
- fa-github-alt
- fa-github-square
- fa-gitlab
- fa-gittip
- fa-glide
- fa-glide-g
- fa-google
- fa-google-plus
- fa-google-plus-circle
- fa-google-plus-official
- fa-google-plus-square
- fa-google-wallet
- fa-gratipay
- fa-grav
- fa-hacker-news
- fa-houzz
- fa-html5
- fa-imdb
- fa-instagram
- fa-internet-explorer
- fa-ioxhost
- fa-joomla
- fa-jsfiddle
- fa-lastfm
- fa-lastfm-square
- fa-leanpub
- fa-linkedin
- fa-linkedin-square
- fa-linode
- fa-linux
- fa-maxcdn
- fa-meanpath
- fa-medium
- fa-meetup
- fa-mixcloud
- fa-modx
- fa-odnoklassniki
- fa-odnoklassniki-square
- fa-opencart
- fa-openid
- fa-opera
- fa-optin-monster
- fa-pagelines
- fa-paypal
- fa-pied-piper
- fa-pied-piper-alt
- fa-pied-piper-pp
- fa-pinterest
- fa-pinterest-p
- fa-pinterest-square
- fa-product-hunt
- fa-qq
- fa-quora
- fa-ra
- fa-ravelry
- fa-rebel
- fa-reddit
- fa-reddit-alien
- fa-reddit-square
- fa-renren
- fa-resistance
- fa-safari
- fa-scribd
- fa-sellsy
- fa-share-alt
- fa-share-alt-square
- fa-shirtsinbulk
- fa-simplybuilt
- fa-skyatlas
- fa-skype
- fa-slack
- fa-slideshare
- fa-snapchat
- fa-snapchat-ghost
- fa-snapchat-square
- fa-soundcloud
- fa-spotify
- fa-stack-exchange
- fa-stack-overflow
- fa-steam
- fa-steam-square
- fa-stumbleupon
- fa-stumbleupon-circle
- fa-superpowers
- fa-telegram
- fa-tencent-weibo
- fa-themeisle
- fa-trello
- fa-tripadvisor
- fa-tumblr
- fa-tumblr-square
- fa-twitch
- fa-twitter
- fa-twitter-square
- fa-usb
- fa-viacoin
- fa-viadeo
- fa-viadeo-square
- fa-vimeo
- fa-vimeo-square
- fa-vine
- fa-vk
- fa-wechat
- fa-weibo
- fa-weixin
- fa-whatsapp
- fa-wikipedia-w
- fa-windows
- fa-wordpress
- fa-wpbeginner
- fa-wpexplorer
- fa-wpforms
- fa-xing
- fa-xing-square
- fa-y-combinator
- fa-y-combinator-square
- fa-yahoo
- fa-yc
- fa-yc-square
- fa-yelp
- fa-yoast
- fa-youtube
- fa-youtube-play
- fa-youtube-square
- fa-ambulance
- fa-h-square
- fa-heart
- fa-heart-o
- fa-heartbeat
- fa-hospital-o
- fa-medkit
- fa-plus-square
- fa-stethoscope
- fa-user-md
- fa-wheelchair
- fa-wheelchair-alt
Web Application Icons
Accessibility Icons
Hand Icons
Transportation Icons
Gender Icons
File Type Icons
Spinner Icons
Form Control Icons
Payment Icons
Chart Icons
Currency Icons
Text Editor Icons
Directional Icons
Video Player Icons
Brand Icons
Medical Icons
Getting started : download & setup
Download
All the components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the newest Bootstrap 4.
Click the button below to go to Download Page, where you can download MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProTutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce a weight of MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map 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
Compilation & Customization tutorial
If you need additional help to compile your custom package, use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue