Download appDownload App

Bootstrap 4 From Scratch With 5 Projects

Learn the newest version of Bootstrap, version 4, with the only Bootstrap 4 course on the web! Designing complex websites that are responsive enough to work on desktops, tablets and mobiles aren’t...

  • All levels
  • English

Course Description

Learn the newest version of Bootstrap, version 4, with the only Bootstrap 4 course on the web! Designing complex websites that are responsive enough to work on desktops, tablets and mobiles aren’t always the easiest websites to design, but what if you could do that and so much more with the least amount of coding possible? And these websites would work across different operating systems and env...

Learn the newest version of Bootstrap, version 4, with the only Bootstrap 4 course on the web! Designing complex websites that are responsive enough to work on desktops, tablets and mobiles aren’t always the easiest websites to design, but what if you could do that and so much more with the least amount of coding possible? And these websites would work across different operating systems and environments and you won’t even need to learn new languages? This is exactly what Bootstrap offers! Boostrap is an open source front-end framework that allows developing with HTML, CSS, and JS. Using a resourceful toolkit and pre-built components, developers can design and create entire responsive websites from the ground up. Bootstrap includes Sass variables and mixins, responsive grid system, extensive pre-built components, and powerful plugins built on jQuery.

What you’ll learn
  • LoopLap – In this project you will design a complete social UI Theme
  • Mizuxe – This project will include a Book/Product Showcase Theme
  • Blogen – In this project, you will create a blog admin area UI
  • Glozzom – You will learn how to create a multi page theme with a carousel and some 3rd party scripts in this project.
  • Portfoligrid – Learn how to design a portfolio theme using the grid, flexbox and the collapse widget

Covering Topics

1
Section 1 : Intro & Getting Started
2
Section 2 : Typography & Utilities
3
Section 3 : CSS Components
4
Section 4 : Grid System & Flexbox
5
Section 5 : JavaScript Widgets
6
Section 6 : Bootstrap Starter Pack Setup
7
Section 7 : Project 1 - LoopLab Social Theme
8
Section 8 : Project 2 - Mizuxe Book Theme
9
Section 9 : Project 3 - Blogen Admin UI
10
Section 10 : Project 4 - Glozzom Multi Page Theme
11
Section 11 : Project 5 - Portfoligrid

Curriculum

      Section 1 : Intro & Getting Started
1
Welcome To The Course Preview
2
What Is Bootstrap?
3
Whats New In Bootstrap 4? Preview
4
Initial Environment Setup
5
Bootstrap Sandbox Setup
      Section 2 : Typography & Utilities
6
Section Introduction
7
Headings & Basic Typography Preview
8
Text Alignment & Display
9
Floats & Fixed Positions
10
Colors & Background Preview
11
Margin & Padding Spacing
12
Sizing & Borders
13
CSS Breakpoints
      Section 3 : CSS Components
14
Section Intro
15
Buttons & Button Groups
16
Navbar & Navs Preview
17
List Groups & Badges
18
Forms & Input
19
Input Groups
20
Alerts & Progress Bars Preview
21
Tables & Pagination
22
Working With Cards
23
Media Objects
      Section 4 : Grid System & Flexbox
24
Section Introduction
25
Grid System
26
Grid Alignment Preview
27
Flexbox Classes
28
Auto Margin Wrap & Ordering
      Section 5 : JavaScript Widgets
29
Section Introduction
30
Carousel Slider
31
Collapse & Accordion
32
Tooltips
33
Popovers
34
Modals
      Section 6 : Bootstrap Starter Pack Setup
35
Section Introduction
36
Install NPM Dependencies
37
Creating The Gulpfile.js
38
Completing The Starter Pack
      Section 7 : Project 1 - LoopLab Social Theme
39
Project Intro
40
Setup & Navbar
41
Home Section Area
42
Explore Section Area
43
Create & Share Section Areas
44
Footer Contact Modal & Responsiveness
      Section 8 : Project 2 - Mizuxe Book Theme
45
Project Intro
46
Custom Navbar & Logo
47
Showcase & Primary Color Change
48
Newsletter & Boxes
49
About Section With Accordion
50
Authors Area
51
Contact & Footer
      Section 9 : Project 3 - Blogen Admin UI
52
Project Intro
53
Navbar & Main Header
54
Add Buttons & Modals
55
Finishing The Dashboard
56
Resource Table Pages
57
Details & Settings Pages
58
Profile & Login Page
      Section 10 : Project 4 - Glozzom Multi Page Theme
59
Project Intro
60
Navbar & Carousel
61
Home Icons Heading & Info Sections
62
Video Section With Autoplay Modal
63
Photo Gallery & Newsletter
64
Page Header & About Section
65
Icon Boxes & Testimonial Slider
66
Services Page
67
Blog Page With Cards
68
Contact & Staff Sections
      Section 11 : Project 5 - Portfoligrid
69
Project Intro
70
Main Header
71
Home Collapse Content
72
Resume Collapse Content
73
Work Collapse Content
74
Contact Collapse Content

Frequently Asked Questions

It is an online tutorial that covers a specific part of a topic in several sections. An Expert teaches the students with theoretical knowledge as well as with practical examples which makes it easy for students to understand.

A Course helps the user understand a specific part of a concept. While a path and E-Degrees are broader aspects and help the user understand more than just a small area of the concept.

A Course will help you understand any particular topic. For instance, if you are a beginner and want to learn about the basics of any topic in a fluent manner within a short period of time, a Course would be best for you to choose.

We have an inbuilt question-answer system to help you with your queries. Our support staff will be answering all your questions regarding the content of the Course.