Skip to content

Instantly share code, notes, and snippets.

@usaphp
Last active February 1, 2018 07:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save usaphp/ec327c019953da5037a2a63afe465879 to your computer and use it in GitHub Desktop.
Save usaphp/ec327c019953da5037a2a63afe465879 to your computer and use it in GitHub Desktop.
Explanation of changes from Bootstrap 4 alpha 6 to Bootstrap 4.0.0 Final for Light Admin Template

For a full list of updates from alpha to final version of Bootstrap 4.0.0 you can read official bootstrap blog: http://blog.getbootstrap.com/

These are the changes I've made inside the template due to updates of Bootstrap 4.0.0 Final:

  • card-block class renamed to card-body

  • popover-title class renamed to popover-header

  • popover-content class renamed to popover-body

  • $brand-primary and other $brand- variables renamed to $primary etc...

  • $nav-disabled-link-color renamed to $nav-link-disabled-color

  • $font-size-h1 and other font-size-h_ variables renamed to h1-font-size etc...

  • $nav-tabs-active-link-hover-color renamed to $nav-tabs-link-active-color

  • $nav-tabs-active-link-hover-bg -> $nav-tabs-link-active-bg

  • $nav-tabs-active-link-hover-border-color -> $nav-tabs-link-active-border-color

  • $nav-pills-active-link-color -> $nav-pills-link-active-color

  • $nav-pills-active-link-bg -> $nav-pills-link-active-bg

  • $font-family-serif variable is removed

  • $modal-content-sm-up-box-shadow renamed to $modal-content-box-shadow-sm-up

  • @button-size mixin now requires additional line-height argument

  • input-group-addon is now input-group-prepend and text inside on prepend should be wrapped in input-group-text class

  • Renamed __alerts.scss to __alert.scss in /scss/bootstrap-override/ folder

  • Renamed __badges.scss to __badge.scss in /scss/bootstrap-override/ folder

  • Removed from v4 alphas: .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down

  • Now if you want your button to have uppercased text like in previous version - you should add class .btn-upper to it.

  • Added popper.js (https://github.com/FezVrasta/popper.js/) to the list of assets since it's required in bootstrap 4 for popups

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment