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. Build a Homepage
    A. Layout
    B. Customization
    C. Summary
  5. Build a Dashboard
    A. Layout
    B. Customization
    C. Summary
  6. Code Challenge: Build a Contact Form
    A. Instructions
    B. Get Feedback
  7. Conclusion
  8. Appendix
    A. Term Glossary
    B. Resources & Cheat Sheets
    C. Where to Go for Help
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 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 tutorial 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 Videos and Quick Reference Guides


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.

bootstrap 4 components visual reference

Bootstrap 4 Components Visual Reference

Quickly learn the component names and common use cases for them.

folder structure

Folder Structure, Hierarchy, and Naming Conventions Worksheet

A quick reference to help you achieve code consistency that adheres to best practices.

bootstrap 4 classes cheat sheet

Bootstrap 4 Classes Cheat Sheet

A quick reference for the most commonly used components and CSS classes.

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.

github pages prototypes

How to Share Prototypes Fast

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

project files zip

Project Template Files

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

Get Answers to Common Bootstrap 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.

A helpful primer in developing interfaces with Bootstrap CSS. Dan Joseph, Software Engineer

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.
I am writing this book for me just as much as I am for you. I use Bootstrap everyday in my projects. Jacob Lett, Author

About the Author

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 more I used Bootstrap, the more I felt like it could be a global standard.

The biggest struggle I faced learning Bootstrap was some of the documentation seemed written for people with a computer science degree. I have a design and marketing background so some of the developer language didn't make much sense. This is why I have decided to create this book and resources. To help make it easier for beginners to learn the framework.

My goal is to make it easy for you to start using Bootstrap because it will help you be more efficient and spend less time fixing cross browser style bugs.

Jacob Lett

Packages Overview

For a limited time, Save 20% when you pre-order before May 17, 2017.


No-risk Money Back Guarantee

If you are unsatisfied for any reason I will offer you a full refund. Expires 30 days after purchase.

Starter Package

Learn what's new and how to get started

$23 / Save $6

Pre-order Now & Save 20%

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

Pro Package

Quickly learn and reference the classes

$79 / Save $20

Pre-order Now & Save 20%

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 Version Updates
  • Access to Facebook Group
  • Bootstrap 4 Classes Reference
  • CSS Classes Default Values Reference

Design Package

Improve your design or code quality

$199 / Save $50

Pre-order Now & Save 20%

Package Includes
  • 1 hour Coaching Session or Code Review
  • 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 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.

Questions?


How will this book be different?

  • 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.
  • Use real-world examples (dashboard and website homepage) you can use in your own projects
  • I won't duplicate the official documentation but try and fill in the knowledge gaps for beginners.
  • Ask questions and share ideas with other Bootstrap web designers in the closed Facebook Group

Who is this book intended for for?

  • Someone brand new to Bootstrap who wants to save time getting started.

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 Mac or Windows desktop with Google Chrome installed
  • You will just need a text editor like sublime and an internet connection.

What if I don't like the book?

If you are unsatisfied for any reason I will offer you a full refund. Just reply with your receipt within 30 days.

Have a question?

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

Save time learning Bootstrap 4




Pre-order Now Book Sample

A Step by Step Bootstrap 4 Tutorial for Beginners

The goal of this Bootstrap tutorial pdf is to introduce you to the most used components and how to reference the official documentation. You will become familiar with common components, setting up a grid, and how to customize the look and feel.

  • Build two real world examples. Follow along step-by-step to build a web application dashboard and homepage for a services business.
  • Always up to date. Receive free book updates for each minor version release.
  • Saves you time. I cut to the chase and teach you exactly what you need to know.
Coming soon