Learn Bootstrap 4 by Example

Skip those boring courses full of slides and learn Bootstrap 4 by doing!

Created byGary Simon

Last updated 6/2017

English

What you'll learn

How to Integrate a Bootstrap 4 Project
How to Create a Development Environment using Gulp
Customize Bootstrap 4 Sass
Build a layout using Bootstrap 4

Course content

1 section • 9 lectures • 1h 6m total length

Introduction & Project Files0:49
Welcome to this course! This introduction video will serve as a very quick overview of what we will be learning.
Project Preview1:26
In this video, we're going to take a look at the exact project that we will use to learn Bootstrap 4.
Installing Bootstrap 45:42
In this lesson, we will discuss the various methods from which you can install Bootstrap 4. This includes using a CDN, and a package manager such as NPM.
Setting up a Development Environment11:26
In this video, we're going to use the Gulp task runner to set up a development environment. Gulp will allow us to use browserSync to reload the browser upon file changes, compile sass, and perform other needed functions.
Customizing Bootstrap 45:39
In this video, we will take a look at the proper way of redefining Bootstrap 4's sass settings.
Navigation10:35
In this video, we will begin writing out the HTML for the project, and this will include defining a Bootstrap 4 navbar and nav.
Hero Section11:07
In this video, we will quickly define a hero section underneath the navigation we just created. This will include a heading, subheading and a supporting graphic.
Using the Grid9:47
In this lesson, we will define a feature container with a responsive grid using Bootstrap 4's grid system.
Form Section9:38
In the final section of our layout, we're going to create an area for an email capture using Bootstrap 4's form classes.

Requirements

Understand HTML
Understand CSS

Description

If you're anything like me, you like learning by example and actually getting your hands dirty. That's why I created this quick and easy course on leraning Bootstrap 4 by Example.

You're going to learn how to get up and running with a Bootstrap 4 project using the Node Package Manager. This is the most robust way of integrating Bootstrap 4, as it gives you access to Sass! Don't worry, if you don't know what all of that means, I explain it all.

Then, you're going to learn about the core fundamentals of Bootstrap 4 while we develop a single, responsive layout.

This will give you the confidence you need going forward to start integrating Bootstrap 4 within your own projects.

So, let's get started!

Who this course is for:

Web Designers
Front-end Developers