Interview Questions

AJAX Interview Questions Android Interview Questions Angular 2 Interview Questions AngularJs Interview Questions Apache Presto Interview Questions Apache Tapestry Interview Questions Arduino Interview Questions ASP.NET MVC Interview Questions Aurelia Interview Questions AWS Interview Questions Blockchain Interview Questions Bootstrap Interview Questions C Interview Questions C Programming Coding Interview Questions C# Interview Questions C++ Interview Questions Cakephp Interview Questions Cassandra Interview Questions CherryPy Interview Questions Clojure Interview Questions Cobol Interview Questions CodeIgniter interview Questions CoffeeScript Interview Questions Cordova Interview Questions CouchDB interview questions CSS Buttons Interview Questions CSS Interview Questions D Programming Language Interview Questions Dart Programming Language Interview Questions Data structure & Algorithm Interview Questions DB2 Interview Questions DBMS Interview Questions Django Interview Questions Docker Interview Questions DOJO Interview Questions Drupal Interview Questions Electron Interview Questions Elixir Interview Questions Erlang Interview Questions ES6 Interview Questions and Answers Euphoria Interview Questions ExpressJS Interview Questions Ext Js Interview Questions F# Interview Questions Firebase Interview Questions Flask Interview Questions Flex Interview Questions Fortran Interview Questions Foundation Interview Questions Framework7 Interview Questions FuelPHP Framework Interview Questions Go Programming Language Interview Questions Google Maps Interview Questions Groovy interview Questions GWT Interview Questions Hadoop Interview Questions Haskell Interview Questions Highcharts Interview Questions HTML Interview Questions HTTP Interview Questions Ionic Interview Questions iOS Interview Questions IoT Interview Questions Java BeanUtils Interview Questions Java Collections Interview Questions Java Interview Questions Java JDBC Interview Questions Java Multithreading Interview Questions Java OOPS Interview Questions Java Programming Coding Interview Questions Java Swing Interview Questions JavaFX Interview Questions JavaScript Interview Questions JCL (Job Control Language) Interview Questions Joomla Interview Questions jQuery Interview Questions js Interview Questions JSF Interview Questions JSP Interview Questions KnockoutJS Interview Questions Koa Interview Questions Laravel Interview Questions Less Interview Questions LISP Interview Questions Magento Interview Questions MariaDB Interview Questions Material Design Lite Interview Questions Materialize CSS Framework Interview Questions MathML Interview Questions MATLAB Interview Questions Meteor Interview Questions MongoDB interview Questions Moo Tools Interview Questions MySQL Interview Questions NodeJS Interview Questions OpenStack Interview Questions Oracle DBA Interview Questions Pascal Interview Questions Perl interview questions Phalcon Framework Interview Questions PhantomJS Interview Questions PhoneGap Interview Questions Php Interview Questions PL/SQL Interview Questions PostgreSQL Interview Questions PouchDB Interview Questions Prototype Interview Questions Pure CSS Interview Questions Python Interview Questions R programming Language Interview Questions React Native Interview Questions ReactJS Interview Questions RequireJs Interview Questions RESTful Web Services Interview Questions RPA Interview Questions Ruby Interview Questions Ruby on Rails Interview Questions SAS Interview Questions SASS Interview Questions Scala Interview Questions Sencha Touch Interview Questions SEO Interview Questions Servlet Interview Questions SQL Interview Questions SQL Server Interview Questions SQLite Interview Questions Struts Interview Questions SVG Interview Questions Swift Interview Questions Symfony PHP Framework Interview Questions T-SQL(Transact-SQL) Interview Questions TurboGears Framework Interview Questions TypeScript Interview Questions UiPath Interview Questions VB Script Interview Questions VBA Interview Questions WCF Interview Questions Web icon Interview Questions Web Service Interview Questions Web2py Framework Interview Questions WebGL Interview Questions Website Development Interview Questions WordPress Interview Questions Xamarin Interview Questions XHTML Interview Questions XML Interview Questions XSL Interview Questions Yii PHP Framework Interview Questions Zend Framework Interview Questions

Top 14 Materialize CSS Framework Interview Questions for 2022

1) What is Materialize?

Materialize is a CSS framework that contains library file. It is created with CSS, JavaScript and HTML. It helps to create attractive, reliable and functional web pages and web apps. It was released on 8 November 2015.

2) What are the features of Materialize?

There are various features of Materialize that are given below:
  • It is in-built responsive design.
  • It is standard CSS with minimal footprint.
  • It includes new versions of common UI controls. such as buttons
  • It provides feature like cards, tabs, navigation bars, toasts, and so on.
  • It requires jQuery, JavaScript library to function properly.
  • It helps to create reusable web component.
  • It is free to use.

3) How can we use Materialize?

We can use Materialize in two ways:
  • Local Installation - we can download the materialize.min.css and materialize.min.js files on our local machine and include it in our HTML code.
  • CDN Based Version - we can include the materialize.min.css and materialize.min.js files into our HTML code directly from the Content Delivery Network (CDN).

4) What are the Materialize project setup directories?

Materialize project setup directory are given below.
MyWebsite/  

  |--css/  

  |  |--materialize.css  

  |  

  |--fonts/  

  |  |--roboto/  

  |  

  |--js/  

  |  |--materialize.js  

  |  

  |--index.html

5) What are the utility classes in Materialize?

Materialize provides different utility classes that are given below:
  • Color utility classes - Examples: .red, .green, .grey etc.
  • Alignment utility classes - Examples: .valign-wrapper, .left-align, .right-align, .center-align, .left, .right etc.
  • Hiding Content utility classes as per device size - Examples: .hide, .hide-on-small-only, .hide-on-med-only etc.
  • Formatting utility classes - Examples: truncate, hoverable etc.

6) What are the classes to create responsive image and video in Materialize?

There are following classes to create responsive and video that are listed table:
  • responsive-img: This class is used to create an responsive image.
  • video-container: It is used to create responsive container. That has embedded videos.
  • responsive-video: It is used to create HTML5 videos responsive.

7) What are the classes of table in Materialize?

Materialize provides different types of classes that are given below:
Class Name Description
None It is used to represents a basic table without any border.
stripped It is used to display a stripped table.
bordered It is used to create border in table.
highlight It is used to highlight the table.
centered It is used to create all the text in center aligns.
responsive-table It is used to create responsive table

8) What are Badges and its class in Materialize?

A badge is a component that provides an onscreen notification. It can be a number or icon. It is used to emphasize the number of items. The following classes of Badges are:
  • badge: It identifies element as an MDL badge component.
  • new: It is used to add a new class to badge component.

9) What is the class of BreadCrumb in Materialize?

Materialize provides two classes that are:
  • nav-wrapper: It is used to set the nav component as breadcrumb/nav bar wrapper.
  • breadcrumb: It is used to set the anchor element as breadcrumb.

10) What is Chip in Materialize?

Chip is component of Materialize that represent small set of information. Like: a contact, tag etc. Example:
<!DOCTYPE html>  

<html>  

   <head>  

      <title>The Materialize Chips Example</title>  

      <meta name="viewport" content="width=device-width, initial-scale=1">        

      <link rel="stylesheet"   

      href="https://fonts.googleapis.com/icon?family=Material+Icons">  

      <link rel="stylesheet"   

      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">  

      <script type="text/javascript"   

      src="https://code.jquery.com/jquery-2.1.1.min.js"></script>             

      <script   

      src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>   

   </head>  

   <body class="container">         

         <div class="chip">             

            <img alt="HTML5" src="html5-mini-logo.jpg">HTML 5              

         </div>  

         <div class="chip">             

            HTML 5<i class="material-icons">close</i>  

         </div>          

   </body>     

</html>

11) What are Collections and its classes of Materialize?

Collection is a group of related information items. There are following Collections classes table listed below.
Class Name Description
collection It is used to set the div or ul container as collection.
collection-item It is used to set the a or li item as collection item.
active It shows the a or li item as active collection item.
with-header It is used to mark the collection to have header.
collection-header It is a set the a or li item as collection header.
avatar It is a set the a or li item as avatar item.
dismissible It enables collection items to be swiped away. Works on touch screen devices only.

12) How to we create Pagination in Materialize?

In Materialize, we can create Pagination by using pagination class. Its class is used with ul element. Example:
<ul class="pagination">  

   <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>  

   <li class="active"><a href="#!">1</a></li>  

   <li class="waves-effect"><a href="#!">2</a></li>  

   <li class="waves-effect"><a href="#!">3</a></li>  

   <li class="waves-effect"><a href="#!">4</a></li>  

   <li class="waves-effect"><a href="#!">5</a></li>  

   <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>  

    </ul>

13) What do you mean by Dialogs in materialize?

Materialize provides various method to show unremarkable alerts. It also provides a term toast form them. Following is given syntax:
  1. Materialize.toast(message, displayLength, className, completeCallback);
Where
  • message: It is used to displayed Message to the user.
  • displayLength: Duration of the message after it will disappear.
  • className: Style class to be applied to the toast. For example, 'rounded'.
  • completeCallback: This Callback method to be called once toast is dismissed.

14) What are the Materialize classes of Dropdowns?

Materialize provides two dropdown classes that are given below:
  • dropdown-content: It Identifies <u> HTML tag as an materialize dropdown component.
  • data-activates: It is id of the dropdown ul element.
Example:
<body class="container">   

      <h3>Drop Down Demo</h3>  

      <ul id="dropdown" class="dropdown-content">  

         <li><a href="#">Inbox<span class="badge">12</span></a></li>  

         <li><a href="#!">Unread<span class="new badge">4</span></a></li>  

         <li><a href="#">Sent</a></li>  

         <li class="divider"></li>  

         <li><a href="#">Outbox<span class="badge">14</span></a></li>  

      </ul>  

      <a class="btn dropdown-button" href="#" data-activates="dropdown">Mail Box  

      <i class="mdi-navigation-arrow-drop-down right"></i></a>       

   </body>



ADVERTISEMENT
ADVERTISEMENT