The Bootstrap 4 Toolkit
Templates, Cheat Sheets, Quick Reference Guides, and Code Files


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.

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.

folder structure

Web Design and Development Primer [pdf]

A web development tutorial for beginners to help you achieve code consistency that adheres to best practices. Sections include: What is a URL?, Naming Conventions, Project Folder Structure, Code Guide, Images Guide, and Things I wish I Knew Upfront

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.

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.

Chrome Developer Tools Tutorial - Inspect and Test CSS [video]

Learn how to inspect HTML elements and view the styles applied to various components. Get useful tips and tricks to make testing styles easier.

github pages prototypes

How to Share Website Prototypes, Fast [video]

Learn how to host and share a site prototype using GitHub pages and DropBox.

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.

Pricing

Bootstrap 4 Toolkit

Tools and reference to improve your workflow and save you time

Buy Now | $40 USD

Limited time offer: Save 50% - $USD Use coupon code B4QS50

  • Project Template Code Files - zip
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Robin Responsive Design Testerhtml
  • Web Design Primer pdf
  • Chrome Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Grid Design PSD Templates and Device Mockup Photoshop
  • Bootstrap 4 Colors Reference pdf
  • Bootstrap 4 Printable Sketch Sheets for Design Wireframing pdf

The Boomerang Guarantee

If you are unsatisfied for any reason I will refund your account quicker than a boomerang. No questions asked.


Need help?
Email me or you can call/text me directly at (586) 894-8024

Are you ready to save time using Bootstrap 4?




See Pricing

Related Products

Bootstrap 4 Toolkit BootstrapCreative
60.00