Bootstrap 4 is a major rewrite of the entire project.
Some of the biggest changes include:
- Grid System moved to Flexbox from BS3’s float layout
- 5 Tier Grid (xs, sm, md, lg, xl) with new breakpoint at 576px
- Dropped Panels, Thumbnails and Well components replaced by Cards
- Media Queries changed to mixins ( @include media-breakpoint-up/down/only )
- Affix plugin dropped, use position: sticky and Stickyfill.js for polyfill
- Vendor Prefix mixins no longer exist, with the inclusion of Autoprefixer the mixins are redundant
- Proper way to write checkbox and radio inputs changed See More
- Expanded utility classes to cover more display, type, alignment, and spacing as well as responsive classes.
See the full list of changes here. If you feel a video recap of changes would be more beneficial watch this Lynda.com video - Bootstrap 4 Migration. Lynda Credentials can be found here.
After reading up on the major changes from v3 to v4, I would recommend reading through the full documentation to learn:
- the new way to write rows and columns
- all the uses for the new card component
- the proper way to write media queries
- the endless ways to use Flexbox
- how to use spacer utility classes Note on spacers: I rewrote our variables file to include spacers numbered 0-10 with the base value of $spacer being 10px. So pt-1 would add
padding-top: 10px;while pt-9 would addpadding-top: 90px; - and everything in between
To help with the transition to Bootstrap 4 the Sublime Snippets that were created for Bootstrap 3 have been converted to the latest version of Bootstrap. Make sure to download and use these when working with Bootstrap 4. Find them here