Get Started with Propeller Pro - Bootstrap 4 with Material Design

Download Propeller Pro

Purchase our Pro Version and get hands on our Pro Components, Admin Template, Bootstrap 4 Starter Templates and One Page Theme.

View Packages

Folder Structure

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap 4 and Propeller files. You'll see something like this:

Just copy the compiled CSS and JS files and the font files(created for icons) from the .zip and add them to your project.

HTML Setup

Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Propeller into your webpage.

Copy the HTML below to begin working with a minimal Propeller document.

Use the components

You'll find below a couple of examples of Propeller Button component: A button with ripple effect and a raised button.

Just copy & paste the corresponding source code in the <body> of an HTML page of your project and the component will render as shown below.

Propeller components can be tweaked and configured by adding CSS classes. For example adding .pmd-ripple-effect to a Propeller Button will add a ripple effect when the button is clicked and adding .pmd-btn-raised will change the style of the button to a raised button.

Checkout the components section in left navigation bar to see the complete list of components available with Propeller.

Steps to follow

Follow these basic steps to use a Propeller component in your HTML page:

Add a standard HTML element for instance <div>, depending on the component you want to use.
Add the Propeller specific classes to the element depending on the component you are using. The classes enhances the appearance of your element according to material design standards and converts it into a Propeller component.
Apply the specific Javascript, if any, to the element.

Theming with Sass

The Sass version of Propeller allows you to customize your theme by using variables, mixins and CSS nesting rules, rather than manually overwriting a lot of CSS rules by hand. Click here to learn how to modify the Propeller styling using Sass.