The Complete Bootstrap Masterclass Course - Build 4 Projects
4.2 (780 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
49,037 students enrolled

The Complete Bootstrap Masterclass Course - Build 4 Projects

In this complete course students will learn how to build 4 projects using bootstrap and other website development tools
4.2 (780 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
49,037 students enrolled
Last updated 8/2016
English [Auto]
Current price: $129.99 Original price: $199.99 Discount: 35% off
13 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Completely Understand What is Bootstrap and How to Work on Bootstrap
  • You'll be able to Customize Bootstrap.
  • You'll be able to Create Profesional Websites using Bootstrap
Course content
Expand all 67 lectures 06:58:00
+ Bootstrap Tools and Elements
39 lectures 03:45:15

Welcome to the complete bootstrap masterclass course! Here you will learn all of the benefits to taking this course and what you are going to learn! We are here to help so feel free to message us anytime!

Preview 03:23

Bootstrap Download and Installation!

Download and Install Bootstrap and jQuery
Bootstrap Theory: Is Bootstrap For All Devices?

Shahzaib, can we REN this lecture again please? Same background humming.

In this Lecture, We'll Discuss how Bootstrap actually works on our website. and what arr the Bootstrap Classes.

How Bootstrap Works
There are two type of Container Bootstrap has. We'll discuss both of them
Bootstrap Container

This is the most important Lecture in Bootstrap. You'll be learning about the Bootstrap Grid System. Generally Bootstrap support 12 columns.

Bootstrap Grid System

Bootstrap has many Text Styles We'll learn all of them.

Text Styles

Some More Bootstrap Text style which are necessary to learn.

More on Text Styles

For Creating Perfect Tables, Bootstrap has some Table specified classes.

Bootstrap Tables

Bootstrap support 3 classes of images to convert the image into circle, thumbnail or responsive.

Bootstrap Images

Bootstrap is workable on Buttons as well. It has many button styles which can make our buttons beautiful.

Bootstrap Buttons

By using the Bootstrap, We can make Button Groups too.

Bootstrap Button Group

Creating the Drop Down menu is so easy now, because of the bootstrap, we don't need to create any jQuery or Bootstrap for this.

Bootstrap Drop Down Button

Glyphicons are the important and interesting part of Bootstrap. Basically its a font which has many icons. We have to buy the Glyphicons but now, if you download the Bootstrap, you can get the Glyphicon for free.

Bootstrap Glyphicon

Let's make a Perfect header by using the Jumbotron or the Page Header.

Page-header and Jumbotron

The Bootstrap is Just like the Jumbotron but Well are Paragraph Specified. and the writing won't be too big if you put inside the Well.

Bootstrap Wells

Bootstrap Alerts can be very helpful if you're using a programming language and want to show the result of execution of any command.

Bootstrap Alerts

Labels and Badges are very Amazing Elements to add label with specific designing. We can Apply the Badge or Label according to the need.

Labels and Badges

Bootstrap Panels can be very helpful if you want to create a panel or the area where you can put any of your data with an specific heading and footer.


Before the Bootstrap we have to Use the jQuery or JavaScript to create the Collapsible Element. But with the Bootstrap, we just need to put some classes and attributes.


We can Apply the Collapsibles on Panels too.

Collapsible on Panels

By Using List Groups, we can create A Beautiful group of list with some bootstrap CSS effects.


We can apply the Collapsible to the list groups too and we can make Accordion as well.

Collapsible List Group and Accordion

For Creating Tabs, We don't need to use jQuery Anymore. We can use Bootstrap classes to make Tabs.


Pills are Just Like Tabs and we can apply the Pills on Bootstrap Using the Same Techniques.


We'll add the Dynamic features to the Tabs and Pills in this Lectures

Dynamic Pills and Tabs

For Going to the Next or Previous Page, or sorting Page like in Numbers, we use pagers and Paginations.

Pager and Pagination

In this Lecture, we'll create a Complete Navigation bar by using Bootstrap.

Navbar Complete

We can Apply the Bootstrap to the Form Elements as well.

Bootstrap Form

In this Lecture, we'll learn to make a Horizontal Form.

Horizontal Form

Some more Bootstrap Feature on the HTML Form.

More on Form

We can apply the specific Bootstrap Styles upon the Form Validations.

Form Validation Styles

Bootstrap Modal is Popup Box. But it's very Beautiful with specific header, body and footer.


For Creating the Carousel Slider, We only need to Apply some Bootstrap Classes. No need to download, Install the Plugin and Creating jQuery Script Anymore.


Here, we'll learn to add caption to every Carousel Slide.

Carousel With Caption

ScrollSpy is an Interesting Plugin which is built-in in the Bootstrap.js. When we scroll the screen down or up it changes the navigation element's active status according to the opened element.


By Using Tooltip, we can create the Beatiful Title. Actually we add a title attribute with some paragraphs or words in HTML which needs definitions. So when use hovers the mouse over that element, the Title shows the text which we inserted. But by using the Bootstrap ToolTip, we can design the Title as well.
But we have to use jQuery for this.


Popover is Just like the Tooltip but it has the heading as well with the content. It also needs jQuery script to work.

Quiz 1
2 questions
+ PortFolio Project
4 lectures 29:47

Creating Navigation and Home Area for the Portfolio Project.

Creating Navigation and Home Area

Creating the Second section for the Project which is my Work Area.

Creating My Work Area

This is the Third Section of the Portfolio website which is the ABOUT Area.

Creating About Area

This is the last Area of the the Portfolio Website where we'll create the Contact form.

Creating Contact Area
Quiz 2
1 question
+ Photo Gallery Project
7 lectures 41:30

In this Lecture, we're starting the make the Photo Gallery.

Creating Navbar

Applying Carousel Slider to the Photo Gallery.

Creating Carousel Slider

Creating Thumbnails of images for the Photo Gallery.

Creating Thumbnails

Creating Footer for the Photo Gallery Project.

Creating Footer

Applying Modals to the thumbnails to make them viewable perfectly.

Creating Modal

Downloading and Using LightBox Plugin to the photo Gallery.

Using Lightbox plugin with bootstrap

Adding Captions to the LightBox Elements in the Photo Gallery.

Adding Caption to the LightBox Elements
Quiz 3
2 questions
+ Blog Project
7 lectures 55:15

Here in this Lecture, we are starting to create the blog website.

Creating HTML Syntax

In this Lecture, we'll learn to Customize Bootstrap by Customizing Bootstrp's navbar and some other Elements.

Creating Navbar and Customizing Bootstrap

Creating Header and Search bar for the Blog Website.

Creating Header and Search Bar

In this Lecture, We're About to Creating the Post Area for the Blog.

Creating Posts Area

Creating Footer with some CSS.

Creating Footer

Creating Posts Page.

Creating Posts Page

Creating About page for learning some other Techniques.

Creating About Page
Quiz 4
1 question
+ Creating eCommerce Website
10 lectures 01:06:14
Creating Syntax and Navbar
Creating Carousel
Adding Caption to Carousel
Creating aside and Product Area
Editing Aside Area with New Style
Creating Product Page
Creating Related Search Area
Creating Modal for Form
Creating Order Form

Our special bonus lecture only for students enrolled in our course! 

Want More?! Watch Our Special Bonus Lecture & Continue Learning With Us Today!
  • Basic HTML & CSS Knowledge
  • Notes and Note Sheets
  • A Computer with internet access
  • An open mind and willingness to learn a new skill!

Welcome To The Complete Bootstrap Masterclass - Build 4 Projects

⇉ Watch the promo video to see How You Can Begin Mastering Bootstrap To Build You Next Professional Website Today!

⇉ This Course is MASSIVE! You receive over 7+ hours of video content & 60+ lectures!

⇉ Join Over 275,000+ Students Who Have Enrolled In My Udemy Courses This Year!

⇉ 7,500+ Five Star Reviews on our courses prove Students Who Enrolling Are Getting Real Results!

Then this course is for you! Click "Take This Course Now" For Instant Life-Time Access!

"Complete bootstrap course....well explained.....After searching so many courses in udemy,this course taught me complete bootstrap and it is for beginner to advanced...Thank you very much..." -Pratrap

"This was one of the best courses I've ever joined" -Tariq Alkhassa


Learn the basic concepts, tools, and functions that you will need to build beautiful, fully functional, professional landing pages within the bootstrap framework. But that is not all you will learn from enrolling in our course...

You Will Learn:

  • Bootstrap components
  • Grid System
  • Customizing Bootstrap
  • Glyphicon icons
  • So Much More!

This course will help you create a perfect bootstrap responsive landing page for your app, business, portfolio or blog. Having a little knowledge of HTML & CSS is ideal to get you started on the quicker route to Bootstrap, however it isn't essential. I will walk you through every step of code to ensure you have the right understanding and tools to further your learning after you have completed the course.

You will not only create a clean, modern professional looking bootstrap landing page, you will also add scroll spy, animation and Google Webfonts to make sure your website stands our from the crowd. We start by understanding the basics of bootstrap, how it works and how it is implemented. We will cover the famous grid system and media queries to ensure your new page looks it's best on all devices.

You will learn-by-doing which will help you understand all aspects of bootstrap and give you the tools to re-design our template or build an entirely new landing page specifically how you want it. You will be able to download project files throughout the course, which will be yours to keep and work on at your leisure


With the right mindset, understanding, and application of the teachings in this course, you will instantly begin to move towards Mastering Bootstrap To Build You Next Professional Websites Today!

When we learn something new, I add it to the course - at no additional cost to you! This is a course that will continue to add more and more to every aspect of your life.

In addition to the Udemy 30-day money back guarantee, you have my personal guarantee that you will love what you learn in this course.


What I can't do in this Course..

I can't guarantee your success – this course does take work on your part. But You Can Do It!

I am also not responsible for your actions. You are responsible for 100% of the decisions and actions you make while using this course.


This course will not remain this price forever! It's time to take action!

Click the "take this course" button at the top right now!

...every hour you delay is costing you money...

See you in the course!


Joe Parys & Shahzaib Kamal

Who this course is for:
  • Anyone looking to improve their web development skill set
  • Anyone looking to learn more about web development and design
  • Who want to Make thier Career on Web Designing
  • Who want to sharpen their Skills as a Professional Web designer