Please note
This instruction present migration path for Inspinia HTML5 project. In any step of migration you need to have in mind your own changes in theme. We don't know how your project look like and what custom code you have, so please keep that in mind that we can only provide migration for Inspinia code, not for custom code. This instruction was created based on clear Inspinia 2.7.1 project.

Please also note that migration to BS4 is not an easy task and take some time. It require some global find and replace as well as some local replace and upgrades. If you will have any problems do not hesitate and contact with us. This migration is created only for basic Left to Right orientation. There is no support for RTL layout yet.
If you find any issue or bug in the migration or in the new version, please send instruction how to reproduce it on support@webapplayers.com.

Upgrade Bootstrap library

*All new resource you can get form the HTML5_BS4_Version folder.

Replace all bootstrap resource:

• css/bootstrap.css
• css/bootstrap.css.map
• css/bootstrap.min.css
• css/bootstrap.min.css.map
• js/bootstrap.js
• js/bootstrap.js.map
• js/bootstrap.min.js
• js/bootstrap.min.js.map

Upgrade Inspinia core style and script

Replace all Inspinia resource:

• css/style.css
• js/inspinia.js

New popper file

Bootstrap 4 require https://popper.js.org/ library. Add new popper.min.js file to your js folder.

• js/popper.min.js

You need to also include the popper.min.js file in your html script section before bootstrap:

<script src="js/popper.min.js"></script>

Bootstrap key changes by component

Typography

• .dl-horizontal has been dropped. Instead, use .row on <dl> and use grid column classes (or mixins) on its <dt> and <dd> children.
• .list-inline now requires that its children list items have the new .list-inline-item class applied to them.
• Dropped .page-header as, aside from the border, all its styles can be applied via utilities.

Images

• Renamed .img-responsive to .img-fluid.
• Renamed .img-rounded to .rounded
• Renamed .img-circle to .rounded-circle

Tables

• Responsive tables no longer require a wrapping element. Instead, just put the .table-responsive right on the <table>.
• Renamed .table-condensed to .table-sm for consistency.

Forms

• Renamed .control-label to .col-form-label.
• Renamed .input-lg and .input-sm to .form-control-lg and .form-control-sm, respectively.
• Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.
• 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.
• Dropped .radio-inline and .checkbox-inline.
• Consolidated .checkbox and .radio into .form-check and the various .form-check-* classes.
• Horizontal forms overhauled:
  • Dropped the .form-horizontal class requirement.
  • .form-group no longer applies styles from the .row via mixin, so .row is now required for horizontal grid layouts (e.g., <div class="form-group row">).
• Replaced .has-error, .has-warning, and .has-success classes with HTML5 form validation via CSS’s :invalid and :valid pseudo-classes.
• Renamed .form-control-static to .form-control-plaintext.

Buttons

• Renamed .btn-default to .btn-secondary. (Inspinia left btn-default class)
• Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s. (Inspinia left btn-xs class)

Button group

• Rewrote component with flexbox.
• Removed .btn-group-justified. As a replacement you can use <div class="btn-group d-flex" role="group"></div> as a wrapper around elements with .w-100.
• Removed explicit spacing between button groups in button toolbars; use margin utilities now.

Dropdowns

• Dropdowns can be built with <div>s or <ul>s now.
• Rebuilt dropdown styles and markup to provide easy, built-in support for <a> and <button> based dropdown items.
• Renamed .divider to .dropdown-divider.
• Dropdown items now require .dropdown-item.
• Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.

Grid system

• Added a new 576px grid breakpoint as sm, meaning there are now five total tiers (xs, sm, md, lg, and xl).
• Renamed the responsive grid modifier classes from .col-{breakpoint}-{modifier}-{size} to .{modifier}-{breakpoint}-{size} for simpler grid classes.
• Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.
• Updated grid class names and a new grid tier.
  • Added a new sm grid tier below 768px for more granular control. We now have xs, sm, md, lg, and xl. This also means every tier has been bumped up one level (so .col-md-6 in v3 is now .col-lg-6 in v4).
  • xs grid classes have been modified to not require the infix to more accurately represent that they start applying styles at min-width: 0 and not a set pixel value. Instead of .col-xs-6, it’s now .col-6. All other grid tiers require the infix (e.g., sm).

List groups

• Replaced a.list-group-item with an explicit class, .list-group-item-action, for styling link and button versions of list group items.

Modal

• The remote option (which could be used to automatically load and inject external content into a modal) and the corresponding loaded.bs.modal event were removed. We recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself.

Navs

• Dropped nearly all > selectors for simpler styling via un-nested classes.
• Instead of HTML-specific selectors like .nav > li > a, we use separate classes for .navs, .nav-items, and .nav-links. This makes your HTML more flexible while bringing along increased extensibility.

Navbar

• .navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three <span>s).
• Dropped the .navbar-form class entirely. It’s no longer necessary; instead, just use .form-inline and apply margin utilities as necessary.
• Navbars no longer include margin-bottom or border-radius by default. Use utilities as necessary.

Pagination

• Explicit classes (.page-item, .page-link) are now required on the descendants of .paginations
• Dropped the .pager component entirely as it was little more than customized outline buttons.

Breadcrumb

• An explicit class, .breadcrumb-item, is now required on the descendants of .breadcrumbs

Labels and budges

• Consolidated .label and .badge to disambiguate from the <label> element and simplify related components.
• Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.
• .badge-default has been dropped and .badge-secondary added to match component modifier classes used elsewhere.

Panels

Tabs

• Upgrade <a> element by adding .nav-link class.
• Move .active from <li> to <a> element.

Progress

• Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".
• Replaced .active for animated progress bars with .progress-bar-animated.

Carousel

• All CSS has been un-nested and renamed, ensuring each class is prefixed with .carousel-.
  • For carousel items, .next, .prev, .left, and .right are now .carousel-item-next, .carousel-item-prev, .carousel-item-left, and .carousel-item-right.
  • .item is also now .carousel-item.
  • For prev/next controls, .carousel-control.right and .carousel-control.left are now .carousel-control-next and .carousel-control-prev, meaning they no longer require a specific base class.
• Removed all responsive styling, deferring to utilities (e.g., showing captions on certain viewports) and custom styles as needed.
• Removed image overrides for images in carousel items, deferring to utilities.

Utilities

• Display, hidden, and more:
  • Made display utilities responsive (e.g., .d-none and d-{sm,md,lg,xl}-none).
  • Dropped the bulk of .hidden-* utilities for new display utilities. For example, instead of .hidden-sm-up, use .d-sm-none. Renamed the .hidden-print utilities to use the display utility naming scheme. More info under the Responsive utilities section of this page.
  • Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
• Type:
  • Added responsive variations to our text alignment classes .text-{sm,md,lg,xl}-{left,center,right}.
• Alignment and spacing:
  • Dropped .center-block for the new .mx-auto class.
• Clearfix updated to drop support for older browser versions.

Inspinia cleanups

• Add href propertie to all links (<a> elements).
• Clean .float-e-margins class in theme. It was only needed in buttons example page.
• Upgrade Summernote library - js and css files.
• Upgrade Tour library - js and css files
• Add DataTables support for Bootstrap 4 - dataTables.bootstrap4.min.js
• Upgrade pdf.js files
• Upgrade metisMenu library
• Upgrade incorrect class structure
• Fix .footer position and place place at the end of #page-wrapper in several views
• Fix several bugs and issues in styles