Category: 02. Components

Preloader is used when you have content that will take a long time to load, so we provide a number activity + progress indicators. Materialize provides various CSS classes to apply various predefined visual and behavioral enhancements to display various types of preloaders or progress bars. The following table mentions the available classes and their…

Pagination is used to split out your long pages into shorter, easier to understand blocks. It is used to link the small pages on a single home page. The pagination class is used to add pagination in Materialize CSS. pagination: It is used to set the ul element as a pagination component. Example Output:

Navbar is used to create a simple navigation bar. Materialize CSS provides various CSS classes to create a Navbar. Navbar is used inside the recommended container div. There are two main parts of navbar: You can use the navbar in the following ways: Example Let’s take a Materialize CSS example to demonstrate all above properties:…

Materialize CSS contains 932 material design icons from Google. These icons can be downloaded directly from the Material Design specs. There are three types of icon libraries supported by Materialize CSS: How to use Materialize CSS Icons You have to put the name of the icon in the class of an HTML <i> element to…

Forms are used as a standard way to receive user inputted data. Materialize CSS provides a very beautiful and responsive CSS for form designing. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms. Index Class name Description 1) input-field It is used to set the…

Footers are used to organize a lot of site navigation and information at the end of a page. Materialize CSS provides different classes to facilitates users that they can get the additional information about the website. Index Class name Description 1) page-footer It is used to set the div container as a footer. 2) footer-copyright…

Materialize CSS Collections facilitate you to group list objects together. It represents various types of collections, where a collection is a group of related information items. List of class name used in Materialize CSS collections: Index Class name Description 1) collection It is used to set the div or ul container as a collection. 2)…

Materialize CSS Chips are used to represent small blocks of information. They are mainly used either for contacts or for tags. Class used with Materialize CSS Chips chip: It is used to set the div container as a chip. Example Let’s take an example to demonstrate the use of chip class to showcase creating various types…

Materialize CSS provides different CSS classes to apply various predefined visual and behavioral enhancements to display various types of cards. Index Class name Description 1) card It is used to identify div element as a materialize card container. It is required on “outer” div. 2) card-content It is used to identify div as a card…

Materialize CSS BreadCrumb is used to display your current location. This is usually used when you have multiple layers of content. Materialize CSS provides various CSS classes to create a nice breadcrumb in an easy way. Following is a list of available classes and their effects. index class name description 1) nav-wrapper sets the nav…