Material Design was designed by Google for making beautiful and mobile friendly sites. Bootstrap was designed by twitter for developing responsive sites. Material Design for Bootstrap(mdbootstrap) is the framework which contains best features of both of them.In this blog, you will learn how to use mdbootstrap in your drupal site.
Suppose your using bootstrap 3, upgrade it to bootstrap version 4(mdb also works for version 3, but version 4 has many features which are not supported in version 3). To upgrade to version 4, first download bootstrap 4 from here Download and replace the current version of bootstrap with downloaded one.To do that you can go to sites>>all>>themes>>(your theme)>>bootstrap and replace it.Now your site works with bootstrap 4.
Benefit of using it? Since the mobile technology grow hugely popular every year, making responsive websites and keeping up with the latest technologies is time consuming. It can be a piece of cake using bootstrap. It is very easy to get started. The latest version of bootstrap is 4. There are many new things added.
- In bootstrap 3, source CSS file was LESS but Bootstrap 4 uses SCSS which is a program written in Ruby that assembles CSS style sheets for a browser.
- The primary CSS unit was px in bootstrap 3 but in V4 it is rem are flexible, scalable units which are translated by the browser into pixel values,1rem is 16px.
- Global font size was 14px in V3, but 16px in V4
- In grid system ,
- V4 has 5 tier grid system(xs, sm, md, lg, xl)
- V4 Uses offset-*-* classes to offset columns where as v3 used col-*-offset-*
- In tables ,
- V4 has added inverse tables with the .table-inverse class and table head styles with the .thead-default and .thead-inverse classes which was not supported by v3.
- Bootstrap 3 doesn't use the .table- prefix for its contextual classes. Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active prefix for its contextual classes.
- V4 has added reflow tables with the .table-reflow class.
- In forms ,
- V4 dropped using .form-horizontal to display horizontal forms. It requires .row class while using grid. Bootstrap 4 uses .col-form-label when using grids for form layout.
- V3 Used .control-label when using grids for form layout.
- In checkboxes and radio buttons,
- V4 uses .form-check, .form-check-label, .form-check-input, .form-check-inline.
- In form control size ,
- V4 uses .form-control-lg and .form-control-sm to increase or decrease the size of an input control.
- In form help text
- Bootstrap 4 uses the .form-textclass to display help text
- In Validation and Feedback Icons
- V4 has dropped the .has-feedback class. It is no longer required with the introduction of the .form-control classes.
- In buttons,
- Introduced the .btn-secondary class. Dropped the .btn-default class.
- Introduced the .btn-outline-* classes for styling buttons with an outline color.
- Dropped the .btn-xs class.
- In images,
- V4 Uses .img-fluid class for making responsive.
- In Linked List Items / Button List Items,
- V4 applies .list-group-item-action to theelement.
- In Blockquotes
- Introduced the .blockquoteclass for styling the
element.
- In Navbars
- New color options are included in V4. Introduced the .bg-*class, as well as the .navbar-light and .navbar- classes.
- In carousel,
- V4 uses .carousel-item class
Material Design is a tool which has been organized to correspond to the usability. MDB can be used in all projects & it is easy to set. The things used in mdb are light and space, supported by unique attributes.The shadows are the characteristics of MDB which reflects the real things' behaviour present in reality.
Importance of Material Design attributes
- The colors are distinct and well choosen
- Icons are simple and very easy to use
- For content, graphics and images are additional.
- Typography is simple and elegant.
mdbootstrap is a licensed version and should be purchased if you want to use it in your site. Once you have purchased, paste the mdb folder in sites>>all>>themes>>(your theme).
The next step to do with is add the stylesheets and scripts in your theme's .info file.The following lines has to be added in the .info file
The next step to do with is add the stylesheets and scripts in your theme's .info file.The following lines has to be added in the .info file
- In stylesheets:
- stylesheets[all][] = mdb/css/mdb.min.css
- In scripts:
- scripts[] = mdb/js/mdb.min.js
- scripts[] = mdb/js/tether.min.js
Below is the .info file of your theme where you should add stylesheets and scripts.
| name = Scholarly |
Now your site will work with mdbootstrap and you can play with it.
ZenRays provide the following to make you expert
- Fully practical and project based sessions from first class.
- Training by Experienced Consultants, not regular Trainers
- Friendly and enthusiastic faculty to clear your doubts 24X7
- Free Live project after the training to get you industry experience
If you want more details please visit us:
Zenrays.com Reach us at [email protected]
This post first appeared on Best Software Training Institute In Bangalore, please read the originial post: here
