Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework
4.5 (60 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
480 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework to your Wishlist.

Add to Wishlist

Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework

Bootstrap to WordPress just added! Create an amazing website with the new Bootstrap version, 100% practical course!
4.5 (60 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
480 students enrolled
Last updated 8/2017
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
  • 10.5 hours on-demand video
  • 9 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Build Websites with the New Bootstrap Version
  • Connect PHP / MySQL with a Bootstrap Website
  • Learn almost all the Components and Bootstrap Classes with a Hands On Training Course
  • Take your existing site into a fully dynamic WordPress site
  • Convert a Bootstrap site into a WordPress Theme!
View Curriculum
  • Basic Knowledge of CSS and HTML if you have ever write a little HTML or CSS you will be fine!
  • A Text Editor i will be using ATOM but Visual studio Code, Brackets or Sublime Text are free too and available for Windows, Mac and Linux
  • A Local Server will be needed for the PHP section, i will be using MAMP, for the WordPress section i will show you a great tool called Local
  • 6 Photoshop files are included, but if you don't have photoshop don't worry, i'll provide the images, colors and everything you need to complete the course
  • A great desire to learn with a REAL WORLD PROJECT


I added one video about how to migrate your Bootstrap 4 website into the latest Beta Version!


Just Added 40 new videos where you will learn how to transform your static bootstrap site into a dynamic WordPress Theme! 

If you're looking for an in depth Bootstrap and WordPress course look no more!!

Learn Bootstrap 4 The Most Popular HTML5 CSS3 & JS Framework!

This Course contains the Basics of the new Bootstrap 4 Framework + Building a Complete Project from Scratch.

The new version of Bootstrap contains a lot of new classes, helper utilities, a Flexbox powered grid and new components which all will be covered in this new course.

We're building a complete Website and i'm gonna show you how to integrate PHP / MySQL with Bootstrap 4.

You will also learn how to extend Bootstrap components with CSS to make them look the way that you need to.

6 Photoshop files (PSD) are included in this course that are going to be converted intro a Bootstrap 4 Website, so if you're looking for a PSD to Bootstrap course, this is the course that you should take!

Who is the target audience?
  • If you're a web designer that's trying to create responsive websites this course is for you
  • Bootstrap is really popular, and the new version is amazing, if you want to add bootstrap to your skills this course is for you
  • If you learn most by building real world projects this course is for you
Students Who Viewed This Course Also Viewed
Curriculum For This Course
121 Lectures
Course introduction
4 Lectures 09:52

Let's review the Final Project for this Course

Preview 04:54

Let's review the PSD Files for this Course

Preview 01:26

In this video you can download the starter and ending points for the exercises

The Code for this Course

In this video you can find the 2 .zip files with the images

Preview 01:16
Basics of Bootstrap 4
19 Lectures 01:41:45

One of the most popular components in Bootstrap is the Grid, let's learn more about this

Preview 09:25

Let's review more options in the Grid

Preview 05:21

In this video let's start working with Typography in bootstrap

Preview 05:48

Let's review more classes to work with Typography

More Typography Classes

Let's see how you can create responsive images and other classes for images

Working with Images

Let's review some of the classes to apply to tables

Working With Tables

Bootstrap provides a lot of classes for Buttons and Links, let's see some of them

Working with Buttons

One of the new components is the Card Component, let's see how it works

Working with the Card Component

Carousel is another really common Component, let's see the basic syntax

Carousel in Bootstrap 4

Let's add more code to our carousel

Adding Controls to the Carousel

In this video let's see how you can add captions to your slider

Adding Captions to the Carousel

Let's review the accordion component

The Accordion Component

Let's see how to create Modals in bootstrap

Working with Modals

You can add any element of the framework into a Modal, let's see a small example

Adding a Grid Inside Modal

Let's review some of the classes to create menus and navigations

Working with Menus and Navigations

Let's see what you need to apply the ScrollSpy component


Let's add a Tooltip

Adding a Tooltip

Dropdowns are really easy to create and the UI is amazing

Adding a Dropdown

The Jumbotron component is more used to showcase a big marketing message in your site, let's see the HTML and clases required to work with it

The Jumbotron Cumponent
PROJECT: Building the Home Page
24 Lectures 02:03:45

Let's start building the home page of our site

Starting our Project

Let's add the content to the HTML

Working With The Header

Time to create the Main Nav :)

Creating the Main Navigation

Let's override some of the CSS 

Styling the Main Navigation

Google fonts are great, free and you can choose from a wide variety

Adding Google Fonts

Let's add our carousel

Adding the Carousel

Overriden the CSS of the carousel is easy, let's see how

Styling the Carousel

Let's continue the development of this website

Working with the New Website Section

Let's add some CSS for this section

Styling the New Website Section

Let's add the Images that link to other sections of our website

Working With the Image Links Section

Let's style the Images

Styling the Image Links Section

You can add any CSS3 Property to your Bootstrap code, let's see an example

Adding CSS3 Transitions

Let's start working with the Schedule section

Working with the Business Hours Section

Let's add a table that will contain the working hours

Adding a Table

Let's style the working hours

Styling the Working Hours Section

Let's create the HTML for this Products section

Developing the Products Section

Let's style the Products for this website

Styling the Products

Let's create the appointment section

Working With The Appointment Section

Time to add some cool effects to the Appointments section

Styling the Appointments Section

Let's start working with the footer

Working with the Footer

Let's add a social networks menu

Working with the Social Networks Menu

Let's add Font awesome to print our icons

Printing the Social Icons

Let's move the working project to a Local Serve

make sure that you're opening your project using the localhost url

and finally make sure you're editing those files in your editor

Moving the File to a Local Server

Let's separate our website into different PHP Files so we can re use some of the components in other pages!

Splitting the Website into different PHP Files
PROJECT: Building the About Us Page
4 Lectures 22:28

Let's add the About Us Page

Adding the Main HTML For this Section

Let's add a hero image 

Styling the Hero Image & adding the main content

Let's re use other section of this website, the business hours table

Adding the Business Hours Table

Let's create a gallery with Modals

Adding a Gallery
PROJECT: Working with the Services Section
5 Lectures 20:50
Creating the services page

Printing the Services into a Tab / Collapse

Building the Coupon Sidebar

Let's add some CSS to the Services Section

Styling the Services Section

Let's re use the contents from the appointments section from the homepage

Re using the Appointments Section from the home page
PROJECT: Building the Shop / Products Section
2 Lectures 11:02

Let's create the page for the products

Creating the Main Products / Shop Page

Let's add a single product page

Adding the Single Page Product
PROJECT: Building the Contact Section
2 Lectures 09:00

Let's create a simple contact form for this project

Building the Contact Form

Let's add some Styling to the Contact Form!

Styling the Contact Form
PROJECT: PHP / MySQL - Creating the Database to display the Products
7 Lectures 35:21

Let's create a Database in PHPMYADMIN

Creating the Database

Let's add some contents to the database

Populating the Database

Let's connect a Database with PHP 

Creating the Connection to the Database

Let's print the Products in our homepage

Printing the Products in the Home Page

Let's print the products to our Products Page

Printing the Products in the Products page from the Database

Working with the Single Product Page

Let's add the code to print the content of the product that we're clicking

Printing the Information from the database to the Single Product Page
PROJECT: Building the Contact Form with jQuery, AJAX and PHP
9 Lectures 45:36

Let's add a simple validation with jQuery

Adding Validation with jQuery

Let's improve this code :)

Refactoring our Code

Let's print some feedback to the users of this website when they're filling the form

Printing feedback in the Contact Form

Let's validate the other fields

Validating the other fields

Before we send the form, let's check that there're no errors

Checking that there're no errors in our contact form

Let's add the AJAX Code to this form

Adding AJAX

Let's create the PHP file that will handle the emails

Building the Send PHP File

Let's finish our AJAX Function!

Finishing the AJAX function

Let's make a test to see if everything works!

Testing our Project
Adding a Responsive Navigation (Hamburger Menu)
3 Lectures 18:42

Let's create a hamburger menu for this project

Adding the markup (HTML)

Let's add some styling to our new hamburger menu

Styling our Hamburger Menu

Making the Menu Fixed when scrolling to the bottom of the page
9 More Sections
About the Instructor
Juan Pablo De la torre Valdez
4.5 Average rating
3,757 Reviews
13,422 Students
19 Courses
Freelance Web Developer and Owner of Easy-WebDev

My name is Juan Pablo De la torre Valdez, i´m from Guadalajara. Mexico.
For the last 10 years i been working with the web, i have a lot of experience in modern Web Technologies such as Foundation, Bootstrap, RWD, WordPress, Drupal, PHP, JavaScript & jQuery, HTML5, CSS3, SASS and Photoshop.

I started a company called CreativaWeb where i design and develop WordPress based websites.

I really like to design and develop websites, in the recent years i made hundreds of websites for Government, Universities, Startups and Medium-Size Companies from my city, the whole country and  from another countries.


Soy diseñador y programador web desde hace más de 10 años, tengo amplia experiencia y trabajo diariamente con tecnologías como Foundation,  Bootstrap, WordPress, Drupal, PHP,JavaScript y jQuery, HTML5, CSS3, SASS y Photoshop.

Comencé una compañia llamada CreativaWeb, donde principalmente diseño y desarrollo sitios web en WordPress.

Me gusta combinar mi trabajo en diseño y programación; en los años anteriores he hecho cientos de páginas para dependencias del Gobierno, Universidades, Pequeños y Medianos de negocios de mi ciudad, a nivel nacional y de otros países.