Migrating to Propeller Pro

Typography

Bootstrap

• Added <footer class="blockquote-footer"> inside blockquote for identifying the source.
• Used text-utility classes for alignment of blockquote.
• Replaced .block-reverse with .text-right (text utility class) to create a blockquote with right-aligned content.

Propeller Pro

• Reordered display headings classes according to bootstrap 4 structure, that is , .pmd-display-1 is now used for a larger heading instead of .pmd-display-4. This is because Bootstrap 4 has reordered the display heading classes from .display-4,.display-3, .display-2 & .display-1 to .display-1, .display-2, .display-3 & .display-4 respectively.
• Added .pmd-headline for displaying heading style for paragraphs.
• Added .pmd-title for displaying title style for sections.
• Added .pmd-subheading and .pmd-subheading-2 for displaying sub-heading styles for paragraph.

Icons

Propeller Pro

• Renamed .pmd-xs, .pmd-sm, .pmd-md, .pmd-lg to .pmd-icon-xs, .pmd-icon-sm, .pmd-icon-md, .pmd-icon-lg classes respectively.
• Added the XL size icon option. Use .pmd-icon-xl to create an XL size icon.
• Added the option to create filled circular icons using class .pmd-icon-circle with background utility classes.
• Added the option to create icons with circular border by using the .pmd-icon-circle with border utility classes.

Accordion

In Bootstrap 4, the accordion component is completely restructured by replacing panel with card.

Bootstrap

• Replaced .panel-collapse and .in classes with .collapse and .show classes for collapsible behaviour.

Propeller Pro

• Dropped the Accordion with Colored Header variation.
• Added the Contextual Accordion variation. Use the background utitlity class with the card to highlight the accordion with colored background.

Alert

Propeller Pro

• Propeller Pro supports 8 alert notification types alert-info, alert-success, alert-warning, alert-danger, alert-primary, alert-secondary, alert-light and alert-dark

Badge

Propeller Pro

• Added .pmd-badge-* class to create contextual notification badges.
• Dropped the .pmd-badge-text class that was earlier used to create notification badge overlapping over text.

Variation

• Added .badge-pill variation from Bootstrap 4 in our user guide.

Button

Bootstrap

• Renamed .btn-default to .btn-secondary.
• Removed button group justified variation in Bootstrap 4.
• Removed explicit spacing between button groups in button toolbars; instead use margin utilities now.

Propeller Pro

• Dropped .pmd-btn-outline class as Bootstrap 4 now supports outline buttons. Now use .btn-outline-* to create outline buttons.

Chip

We have now added chips as a completely new component.

Propeller Pro

• Removed the .pmd-chip-no-icon class.
• To create chip with avatar, .pmd-chip-contact is now used with the related image tag instead of the parent class .pmd-chip.

Variation

• You can now add material icons inside .pmd-chip.
• You can create contextual chips by using .pmd-chip-* class. For example, to create a primary chip add .pmd-chip-primary class.

Dropdown

In Propeller Pro, Dropdowns are build using bootstrap 4 structure. Dropdowns are built on a third party library, popper.js, which provides dynamic positioning and viewport detection.

Bootstrap:

• Renamed .divider to .dropdown-divider for creating dropdown with divider.
• Created split buttons dropdown by adding .dropdown-toggle-split along with .drop-toggle to create proper spacing around the dropdown caret.

Propeller Pro:

• Dropped .pmd-dropdown-menu-top-left that made the dropdown open from top-left. Instead we are now using the Bootstrap 4 classes .dropup and .dropdown to open the dropdown menu in the top left direction.
• Dropped .pmd-dropdown-menu-top-right that made the dropdown open from top-right. Instead now we are using the Bootstrap 4 classes .dropup and .dropdown-menu-right to open the dropdown menu in the top right direction.

Variations:

• Dropdown Form: Dropdown forms are used to add Registration or Login Forms as a dropdown menu in the main menu.

Modal

Modal component is rewrote with flexbox according to Bootstrap 4 HTML and JS structure.

Propeller Pro:

• Added .pmd-modal class to parent div along with .modal.
• Added .pmd-modal-bordered along with .modal-header and .modal-footer to add borders below the header and above the footer respectively.
• Added checkboxes in the Modal List with Avatar in place of checkbox icons.
• In Propeller v1.3.1, to make a modal dialog display in the center of the window, we were dynamically adding css to the .modal class using jQuery. But in Propeller Pro, we have removed that javascript and are using the Bootstrap 4 class .modal-dialog-centered to display the modal in the center of the screen.

Variations:

• Thank You Modal : Added “Thank You modal” variation. This modal is used to display a thank you message after the user successfully performs an action in a modal box like submitting a form or providing permission to access something.
• Conditional Modal: Added the “Condition Modal” variation. This modal is used when the user needs to select options they want from the list provided.
• Scrolling content Modal: Added Bootstrap 4 variation of scrolling content Modal. Scrolling Content Modal can be used to display policies and terms and conditions in a modal box.

Form

Bootstrap:

• Replaced .checkbox-inline and .radio-inline with .custom-control-inline to create inline elements.
• Renamed .control-label to .col-form-label.
• Dropped classes .form-group-lg and .form-group-sm.
• Renamed .input-group-lg and .input-group-sm to .form-control-lg and .form-control-sm for sizing the elements.
• Dropped .help-block and replaced it with .form-text for block-level help text. For inline help text and other flexible options, use utility classes like .text-muted.
• Renamed .form-control-static to .form-control-plaintext.
• For input validation states .has-error, .has-warning and .has-success classes are removed. .is-valid and .is-invalid classes are used to display validation states. Also .valid-feedback and .invalid-feedback classes are used in the div to display feedback messages.

Propeller Pro:

• Added .pmd-custom-file to customize the Bootstrap Custom File Input into Propeller File Input.
• .pmd-checkbox is now used along with .custom-checkbox.
• .pmd-radio is now used along with .custom-radio.
• Created inverse checkboxes and radio. For inverse checkbox and radio, add .text-white and .bg-dark along with card.

Variations:

• Added bootstrap 4 variation of input to display its value as plain text.
• Added bootstrap 4 custom form variations in our user guide.
• Created inverse validation form variation. Add .bg-dark .text-white to the card to create inverse validation form.

Input Group

We have created the input group component in Propeller Pro by applying Google’s Material Design Standards to Bootstrap 4’s input group component.

Bootstrap:

• Dropped .input-group-addon and .input-group-btn for two new classes, .input-group-prepend and .input-group-append.
• Bootstrap 4 also introduced .input-group-text to wrap text within an input group.

Propeller Pro:

• Added .pmd-input-group class.
• Added .pmd-input-group-icon class to prepend or append icons with the text inputs.
• Added variation for “forgot password” input field.

List

List groups are modified using bootstrap 4 list group structure and flex utility classes.

Bootstrap:

• Bootstrap 4 added .list-group-item and .list-group-item-action class to create a linked list.

Propeller Pro:

• The .pmd-list-icon class is added with respective <i> tag inside the <li> to create list with icons.
• Added the checkbox in the List with Avatar and Action.
• List with Avatar and Icon follows flex structure.

Variations:

• Added Single-line List With Badge variation.

Navbar

Bootstrap:

• Added the .nav-item and .nav-link class to the <li> and <a> tag respectively.
• .navbar-dark class with bg-* to change the color of the background of the navbar

Propeller Pro:

• In Propeller Pro, we are now using the collapse component of the Bootstrap 4 for the dropdown. Add the .navbar-collapse and .collapse class and the data-parent attribute with the id of the sidebar as value to the <ul> tag to trigger the dropdown.

Variations:

• Added the Breakpoint Specific Navbar Responsive variation in the User Manual
• Added the Navbar with Text variation in the User Manual

Popover

Propeller Pro:

• Added the primary, secondary, light and dark contextual popovers. Use data-color=”primary” to create a popover with primary color.

Progressbar

Bootstrap:

• Replaced the classes .progress-bar-* classes with bg-* classes.

Propeller Pro:

• Dropped the .progress-rounded class.

Variations:

• Added the variation of Progress Bar with different heights in the user manual.

Sidebar

Propeller Pro:

• Dropped the .pull-right class and used the margin utility class .ml-auto to display the search icon and profile dropdown on right.
• In Propeller Pro, we have are now using the Collapse component of the Bootstrap 4 for the dropdown. Add the class .collapse and data-parent attribute
• In Propeller Pro, we are now using the collapse component of the Bootstrap 4 for the dropdown. Add the .collapse class and the data-parent with the id of the sidebar as value to the <ul> tag to trigger the dropdown.
• Added the .pmd-sidebar-dark class with the background utility class to change the background of the sidebar

Variations:

• Added the Third Level of Dropdown variation in the Sidebar

Tabs

In Bootstrap 4, the tab component is completely restructured by replacing panel with card.

Bootstrap:

• Added class .nav-item and .nav-link to the <li> and <a> in the tab navigation.

Propeller Pro:

• Renamed the .pmd-tabs-bg class to .pmd-tabs-dark.
• Dropped the Tabs with Dropdown variation
• Replaced .nav-justified with .nav-fill class to create Tabs with Fixed Width.

Table

Bootstrap:

• For Inverse Table, .table-dark is used in place of .table-inverse class.

Propeller Pro:

• In Propeller v1.3.1, to create the Card Table, the table was wrapped in a <div> with class .pmd-card-table but in Propeller Pro, you can directly add the .pmd-card-table class in the <table> followed by .pmd-table class.

Variations:

• Added the Highlighted table heading variation in the User Manual.
• Added the Borderless Table variation in the User Manual.
• Added the Table with Caption variation in the User Manual.
• Added the Breakpoint Specific Responsive Table variation in the User Manual.
• Added a new Table with Expand and Collapse option. Add the .child-table-expand to the expand icon and wrap the child table with a <div> having class .direct-child-table.
• Added a Table with Fixed Header option.

Card

Propeller Pro uses the Flexbox structure adapted by Bootstrap 4 in Propeller Pro Cards.

Propeller Pro:

• Added the box-shadow property in the .pmd-card class. So now you don’t need to add the .pmd-z-depth class with the .pmd-card to get the shadow.
• Dropped the .pmd-card-title, .pmd-card-title-text, .pmd-card-subtitle-text, .pmd-card-body and .pmd-card-actions classes and used the Bootstrap 4 classes .card-header, .card-title, .card-subtitle, .card-body and .card-footer classes respectively.
• To use icons as media in the cards, wrap the icon with a div having class .pmd-card-icon
• Dropped class .pmd-card-inverse. Now to create inverse card use classes .card-dark and .text-white.
• Add .pmd-card-bordered class to the .card-header or .card-footer to add borders below or above the header or footer respectively.

Variations:

• Added the Image Overlay Card variation in the User Manual
• Added the Card Groups, Card Decks and Card Columns variation in the User Manual.
• Created a lot of handy card variations like Team Member / Client’s Details Card, Testimonials Card, Blog Listing Card etc. for you so that you don’t need to code the variation on your own.

Data Tables

Propeller Pro

• Used the updated version of the Bootstrap Datatable - v1.10.16
• Used the updated version of the Responsive Bootstrap Datatables - v2.2.1
• In Propeller Pro, you don’t need to wrap the table with class .table-responsive
• Renamed .responsive class to .dt-responsive class for Responsive Data Table
• Renamed .table-inverse to .table-dark.

DateTimePicker

Propeller Pro:

• Used the updated version of the Bootstrap Datetimepicker - 4.17.47

Variations:

• Added the option of only Date Picker in the User Manual.

Range Slider

Variations:

• Added the Vertical Range Slider with the Tooltip on Right variation.

Carousel

Propeller Pro:

This is a completely new third party component we have introduced in Propeller Pro. We are using Owl Carousel v2.2.1 as the base for the component.

• Use .pmd-card-carousel class followed by .owl-carousel to convert any carousel into a Propeller Carousel.

Rating

This is a completely new third party component we have introduced in Propeller Pro. We are using jQuery Raty as the base for the component.

Propeller Pro:

• Use the .pmd-material-rating class to the div followed by .rating to create a rating component that follows material design standards.