How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta

Saturday, August 12, 2017

How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta

After two years in the making, Bootstrap creators finally released first beta of Bootstrap 4. In latest version of Bootstrap 4 more then 650 files was changed, 67k lines was added, and 82k lines was deleted.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Following CSS classes was changed in Bootstrap 4 beta

{:.table.table-striped}

Bootstrap 4 alpha 6	Bootstrap 4 beta
`.badge-default`	`.badge-dark`
`.bg-faded`	`.bg-light`
`.bg-inverse`	`.bg-dark`
`.card-block`	`.card-body`
`.card-block`	`.card-body`
`.card-outline-*`	`.border-*`
`.card-outline-primary`	`.border-primary`
`.card-outline-secondary`	`.border-secondary`
`.card-outline-success`	`.border-success`
`.card-outline-info`	`.border-info`
`.card-outline-warning`	`.border-warning`
`.card-(color)`	`.bg-(color)`
`.card-primary`	`.bg-primary`
`.card-success`	`.bg-success`
`.card-info`	`.bg-info`
`.card-warning`	`.bg-warning`
`.card-danger`	`.bg-danger`
`.hidden-xs-down`	`.d-none .d-sm-block`
`.hidden-sm-down`	`.d-none .d-md-block`
`.hidden-md-down`	`.d-none .d-lg-block`
`.hidden-lg-down`	`.d-none .d-xl-block`
`.hidden-xs-up`	`.d-none`
`.hidden-sm-up`	`.d-sm-none`
`.hidden-md-up`	`.d-md-none`
`.hidden-lg-up`	`.d-lg-none`
`.hidden-xl-up`	`.d-xl-none`
`.navbar-toggleable-*`	`.navbar-expand-*`
`.navbar-toggleable-sm`	`.navbar-expand-sm`
`.navbar-toggleable-md`	`.navbar-expand-md`
`.navbar-toggleable-lg`	`.navbar-expand-lg`

Improved auto-placement of tooltips, popovers, and dropdowns

Bootstrap 4 no longer uses Tether.js. This library was replaced by library called Popper.js

About the Author

Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.

With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.

Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.

Learn more about CoreUI’s solutions and see how your business can benefit from working with us.

How to upgrade Bootstrap 4 alpha 6 to Bootstrap 4 beta

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Following CSS classes was changed in Bootstrap 4 beta

Improved auto-placement of tooltips, popovers, and dropdowns

About the Author

How to convert a string to boolean in JavaScript

How to limit items in a .map loop in JavaScript

What is the Difference Between Null and Undefined in JavaScript

How to loop inside React JSX

Answers by CoreUI Core Team