How this will help you

  • Cheat sheets and glyphicons will help you save time referencing the class names.
  • Project template files will give you a real world example to see how things work at the code level.
  • Photoshop grids and sketch sheets for Bootstrap 4 will help you design sites that adhere to the new breakpoints and typography system.

Who This is For

You have used Bootstrap 3 and just need to get up to speed with the new version.

This migration guide does not cover Sass/SCSS source code updates.

Bootstrap 4 Migration Guide and Reference Tools

Bootstrap 4 tutorial pdf

Bootstrap 4 Quick Start - Migration guide [pdf eBook]

This guide will quickly bring you up to speed to what is new in Bootstrap 4. Identify the class names that were renamed, removed, and added to help you migrate from Bootstrap 3 to Bootstrap 4.

fontawesome icons cheat sheet

Glyphicons to FontAwesome Icon Cheat Sheet [pdf]

Bootstrap 4 no longer has glyphicons so this reference will help you use a great alternative, FontAwesome. The icons are listed in the exact same order as the v3 documentation so its easier to find the icon you are wanting to use.

bootstrap 4 components visual reference

Bootstrap 4 Components Visual Reference [pdf]

Learn the components visually and common use cases for each with this reference guide. If printed, it could work as Bootstrap flash cards. Also, each component is linked for a deep dive into the documentation.

bootstrap 4 reference

Robin - Responsive Breakpoint Preview Tool [html]

Chrome DevTools provides a responsive breakpoint preview but it only shows one breakpoint at a time. Online testing tools often won't work due to cross-origin sharing errors. This tool will help you locally test multiple responsive breakpoints in one browser window.

bootstrap 4 classes cheat sheet

Bootstrap 4 Classes Cheat Sheet and CSS Default Values Reference [pdf]

A quick reference for the most commonly used components and CSS classes. This is already a free resource but I am including this for your convenience in case you don't have it yet.

Bootstrap 4 Grid Design Templates

Bootstrap 4 Grid PSD Photoshop Templates and Device Mockup [psd]

Bootstrap 4 Adobe Photoshop grid templates for designers. Each PSD template contains color swatches, image placeholders, and typography styles that match the code. Also includes a design comp mockup template with smart objects to show your design in context.

Bootstrap 4 Printable Sketch Sheets for Design Wireframing

Bootstrap 4 Printable Sketch Sheets for Design Wireframing [pdf]

Now you can sketch how your design will perform across responsive breakpoints. A sizing key helps you sketch your design in proper proportions. Includes a design overview page, navbar, and device specific sketch sheets.

Bootstrap 4 HEX Colors Reference

Bootstrap 4 Colors Reference [pdf]

This guide will help you quickly reference all of the default colors used by Bootstrap 4. Bootstrap 4 HEX and RGBA color values are provided so you can easily reuse or override these values in your CSS.

project files zip

Project Template Files [zip]

Download all of the project template files, code snippets, and a responsive breakpoint tester to locally view various responsive breakpoints on one screen.

Who made this and why?

I learned frontend development a few years after graduating college as a graphic designer. I now build marketing sites, emails, and landing pages for a software company in Troy, Michigan. I understand how updating old websites and systems can be a challenge so I created this guide and templates to help make your job a little easier.

Let's build a responsive web together!
- Jacob Lett, your teacher

P.S. If you ever have any questions, you can call/text me directly at (586) 894-8024.

Pricing v4.0.0

Migration Package

No fluff. Just the highlights.

For experienced developers

  • A brief overview of what's new in Bootstrap 4 and how it has changed
  • Get a collection of cheat sheets, reference, and templates to learn the new components
  • Get Photoshop grid templates, printable sketch sheets, and colors reference to help improve the frontend of your sites

  • Bootstrap 4 Quick Start - Migration Guidepdf
  • Bootstrap 4 Classes Reference pdf
  • Bootstrap 4 Grid Design PSD Templates and Device Mockup Photoshop
  • Bootstrap 4 Colors Reference pdf
  • Bootstrap 4 Printable Sketch Sheets for Design Wireframing pdf
  • Project Template Files zip
  • Robin Responsive Design Testerhtml
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • FREE Minor Version Updates
  • Access to Facebook Group

$80 - Buy

The Boomerang Guarantee

If you purchase and are unsatisfied. I will refund your account quicker than a boomerang. No questions asked.

Have a question?

Email me and I will answer you as soon as I can. Thank you.

Are you ready to update to Bootstrap 4?

See Pricing

Bootstrap 4 Migration Guide BootstrapCreative 1.0.0