Learn Bootstrap 4 The Complete Guide by Building 8 Projects

One of the most powerful features in bootstrap is the grid, let's see how it works

Let's continue working with the grid

Let's review some of the typography classes available in the framework

Let's start working with images and some classes that the framework provides

Let's continue learning more about the framework, it also has several classes for margins and paddings

Let's review tables in bootstrap!

The framework provides several classes for buttons, let's review those in this video

One of my favorites components is the Card component, let see it in action!

You can also create a masonry effect really easy, let's see how!

Let's review the carousel Component!

In this video we're going to finish the carousel!

In this video we're building an example with the collapse or accordion component

Let's review the modal component, or lightbox :)

Let's review the classes that the framework provides to create navigations and menus

Let's review the scrollspy component

In this video we're going to look the tooltip component in action

Let's review the DropDown Component

Let's take a look at the Jumbotron Component

Let's start building the home page of our site

Let's add the content to the HTML

Time to create the Main Nav :)

Let's override some of the CSS 

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

Let's add our carousel

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

Let's continue the development of this website

Let's add some CSS for this section

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

Let's style the Images

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

Let's start working with the Schedule section

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

Let's style the working hours

Let's create the HTML for this Products section

Let's style the Products for this website

Let's create the appointment section

Time to add some cool effects to the Appointments section

Let's start working with the footer

Let's add a social networks menu

Let's add Font awesome to print our 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

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

Let's add the About Us Page

Let's add a hero image 

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

Let's create a gallery with Modals

Let's add some CSS to the Services Section

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

Let's create the page for the products

Let's add a single product page

Let's create a simple contact form for this project

Let's add some Styling to the Contact Form!

Let's create a Database in PHPMYADMIN

Let's add some contents to the database

Let's connect a Database with PHP 

Let's print the Products in our homepage

Let's print the products to our Products Page

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

Let's add a simple validation with jQuery

Let's improve this code :)

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

Let's validate the other fields

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

Let's add the AJAX Code to this form

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

Let's finish our AJAX Function!

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

Let's create a hamburger menu for this project

Let's add some styling to our new hamburger menu