Learn professional design techniques

Topics covered: responsive images, image cards, parallax background images, Google fonts, carousel cross-fade, and vertical centered text.
Click image for animated gif preview

Topics covered: 100% height sidebar, card deck, FontAwesome icons, responsive charts and tables, and custom navigation tree menu.

Table of Contents

  1. Introduction
    a. Prerequisites
  2. The Mobile Web and Bootstrap
    a. Mobile First, Responsive Design, and Progressive Enhancement
    b. Bootstrap CSS Framework - Style Guide
  3. What’s New in Bootstrap 4
    a. Flexbox Grid System
    b. Cards
    c. Spacing Utility Classes
    d. Other Updates
  4. The Design Process
    a. Strategy
    b. Prototype
    c. Design
    d. Delivery
  5. Build a Homepage
    a. Prototype
    b. Design
    c. Summary
  6. Build a Dashboard
    a. Prototype
    b. Design
    c. Summary
  7. Code Challenge: Build a Contact Form
    a. Instructions
    b. Get Feedback
  8. Conclusion
  9. Appendix
    a. Term Glossary
    b. Resources & Cheat Sheets
    c. Where to Go for Help
  10. View Packages Get a Book Sample
A helpful primer in developing interfaces with Bootstrap CSS. Dan Joseph, Software Engineer
bootstrap admin dashboard homepage and contact us form

Build Something Useful

Have you ever followed a tutorial with cat pictures and project examples you could never use? You spend your precious time building something that you can never really apply to a real world project. In this Bootstrap book pdf you will build common layouts for a professional services business: homepage, dashboard, and contact us form.

stack of books with code 404 error

No More Outdated Information

How many books have you read that have outdated information and code samples? You follow along and soon find out the section you just read is no longer true. That is lost time and now you have to spend time researching the missing information. This book will not be published and abandoned but will be constantly updated to stay up to date.

closed facebook group for bootstrap web designers

Get Help If You Need It

I am writing this Bootstrap guide for me just as much as I am for you. As a web designer, I use Bootstrap CSS everyday in my projects because it makes me more efficient. I want us both to learn how to use Bootstrap 4 effectively in our projects to save time and have consistent styles in our websites. You can also network with other designers and developers in the Web Design with Bootstrap Facebook group.

Extend Your Learning with Quick Reference Guides and Videos


fontawesome icons cheat sheet

FontAwesome Icon Cheat Sheet

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

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 Primer

A guide 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

bootstrap 4 classes cheat sheet

Robin - Responsive Breakpoint Preview Tool

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

Google Developer Tools - Inspect and Test CSS

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 Prototypes Fast

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

project files zip

Project Template Files

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

Design or Code Review

Do you want a second opinion on your design? Or would like some advice on how to build a particular layout? Share your project details with me and I will provide a printable guide of suggested changes and improvements.

bootstrap 4 classes cheat sheet

Bootstrap 4 Classes Cheat Sheet and CSS Default Values Reference

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.

member only content

Member Only Tutorials

I will continue to provide helpful tutorials and videos to encourage your learning and answer common questions that arise from the group.
Bootstrap parallax image

Responsive marketing homepage layout demo

Have You Asked Yourself These Questions?


How am I supposed to remember all of the classes?

Bootstrap 4 has a lot of components and classes to choose from but how are you supposed to remember everything? In the starter and complete packages, there are cheat sheets to make it easy for you to reference common components so you know what to look for in the documentation.

How do I customize Bootstrap's design and make my sites look less default?

In the Bootstrap tutorial I will show you how to use Chrome's Developer Tools to test sites and find Bootstrap's default styles so you can override them. I also share some design tips to help you make your sites look more professional and less like the default Bootstrap styles.

What is mobile first and what workflow should I follow?

There are plenty of books and articles explaining the importance of mobile first web design but they fall short explaining the workflow. In my book and resources I will show you how to build and test your sites with mobile first principles. This is extremely important if you are an experienced developer because its a whole new way of thinking and doing things.

Bootstrap CSS helps me build more responsive websites in less time.


I remember building my first few responsive websites. I wasted so much time writing the same type of styles over and over for each new project.

I then heard about Bootstrap 3 and I liked how it included javascript components. The documentation was extremely detailed and easy to follow. I tried it out on a few projects and was amazed at how quickly I could create a working prototype of a design.

Since it is open source, thousands of developers help to improve it and help minimize cross-browser compatibility issues. The time you save lets you earn more in less time. Or at a minimum, gives you more time to improve the other areas of the site like page speed or SEO.

Why I created this guide

The biggest struggle I faced learning Bootstrap was understanding the terminology used in the documentation. It seemed written for software engineers. As a designer, a lot of the developer language didn't make much sense. I craved more visual examples and simple explanations. This is why I have decided to create this book and resources. To help make it easier for beginners like you to learn the framework.

- Jacob Lett, fellow bootstrapper

Packages Overview

Current version: v4.0.0-alpha.6

Starter Package

Learn what's new and how to get started

$29 - Buy Now

Guarantee: If you are unsatisfied for any reason I will offer you a refund.


Package Includes
  • Bootstrap 4 Quick Start Book
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference
  • CSS Classes Default Values Reference

Pro Package

Quickly learn and reference the classes

$89 - Buy Now

Guarantee: If you are unsatisfied for any reason I will offer you a refund.


Package Includes
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Project Template Files zip
  • Folder Structure, Hierarchy, and Naming Conventions Worksheet pdf
  • Google Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Quick Start Book
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference
  • CSS Classes Default Values Reference

Design Package

Improve your design or code quality

$249 - Buy Now

Guarantee: If you are unsatisfied for any reason I will offer you a refund.


Package Includes
  • Design or Code Review with Suggested Improvements
  • Bootstrap 4 Components Visual Reference pdf
  • FontAwesome Icon Cheat Sheet pdf
  • Project Template Files zip
  • Folder Structure, Hierarchy, and Naming Conventions Worksheet pdf
  • Google Developer Tools - Inspect and Test CSS video
  • How to Share Prototypes Fast video
  • Bootstrap 4 Quick Start Book
  • FREE Minor Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference
  • CSS Classes Default Values Reference

Want to share this with your team or classroom?

Contact me for more information.

It is clear and well structured. A good start for Bootstrap beginners with basic knowledge of HTML, CSS etc. But also for experienced webworkers. Uwe, webworker

Bootstrap 4 Quick Start - Book Sample

Look Inside

Sign up for my mailing list, and I’ll send you a free sample chapter of Bootstrap 4 Quick Start. With this sample you can follow along and build a cms dashboard. The final book will demonstrate how to customize the default Bootstrap styles as well as build an additional homepage layout.

bootstrap tutorial pdf
No spam and you can unsubscribe anytime.

Questions?


Why does it cost so much?

Setting price aside, do you want to buy this training material? If the answer is yes, I guarantee to refund your money if you are unsatisfied. You can download everything and start learning to see if the value is there. My goal is to help you learn and become a better web designer. So if I can't fulfill this promise I should not keep your money.

Compared to other books and courses my training does not teach what is already on the official documentation. It fills in the gaps and teaches you the overall landscape of responsive web design. I believe understanding these fundamental concepts will improve your design and save you time gathering scattered knowlege from other sources.

Who is this book intended for for?

  • You've used Bootstrap 3 in the past and want to learn what's new as quickly as possible.
  • You're brand new to Bootstrap CSS and want to save time getting started.
  • You want to learn responsive design and how the Bootstrap CSS framework can help you be more efficient.
  • You want to improve your design skills and better understand the design process.

How is this training different from other books and free YouTube vidoes?

  • I do not duplicate the official documentation but try and fill in the knowledge gaps for beginners. After learning the classes you will probably ask the question, "Now what?" My training answers that question and guides you to other areas to make your education more comprehensive.
  • Always updated to the latest version. When you purchase the book new minor release updates will be emailed to you. For major releases, you will get special pricing and the ability to review early drafts.
  • Build real-world examples (dashboard and website homepage) you can use in your own projects
  • You can ask questions and share ideas with other Bootstrap web designers in the closed Facebook Group

Any prerequisites?

  • Some experience with HTML and CSS is helpful but not necessary. Absolute beginners who have never written one line of HTML/CSS will be able to follow along the steps.
  • This training will not require knowing Sass, command line, or Photoshop.
  • A computer with Google Chrome installed
  • A text editor like sublime and an internet connection.

Can I try it out first?

Sure. If you purchase and are unsatisfied for any reason I will offer you a refund.

Have another question?

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

Why did you make this?

I am not a software engineer and build mostly marketing sites. So learning from the official documentation was very confusing. I also had a lot of unanswered questions like how to properly use the picture element for responsive images, what is the best workflow to follow the mobile-first principle, and is Bootstrap even necessary?

I have also had the desire to help people through teaching but never in a book form. So I decided to give it a try. :)

Are you ready to learn responsive web design with Bootstrap 4?




View Packages Book Sample

Bootstrap 4 Quick Start BootstrapCreative 1.0.0
30.00