Explore Bootstrap 4 and learn how to apply layouts, use components, and employ utilities for rapid website design and development
About This Video
In Detail
This course uses Bootstrap 4.0.0-beta, the latest version. Learn about the Bootstrap Grid and new changes that make it easier to use. Find out how to use Bootstrap 4 navbars by making them …
Explore Bootstrap 4 and learn how to apply layouts, use components, and employ utilities for rapid website design and development
About This Video
In Detail
This course uses Bootstrap 4.0.0-beta, the latest version. Learn about the Bootstrap Grid and new changes that make it easier to use. Find out how to use Bootstrap 4 navbars by making them responsive. Structure content in tables, lists, and cards. Make text stand out with amazing Bootstrap 4 utilities. Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. Build responsive, mobile-first projects on the web with the world's most popular front-end component library. Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app, a responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. Add to the library and then you are ready to bring the power of Bootstrap into your web pages! It's simple and easy to use and facilitates web design and development. This is all available within Bootstrap. You will be amazed at how easy it is to create modern websites using Bootstrap.
Chapter 1 : Introduction to Bootstrap
Welcome to Bootstrap 4 00:08:40
What is Bootstrap introduction to Bootstrap 4 00:05:45
New Bootstrap 4 Features 00:03:36
Course editor and resources overview 00:04:28
Chapter 2 : Getting Started with Bootstrap
Setup Bootstrap on your computer 00:07:34
Try out Bootstrap adding classes 00:03:38
Bootstrap Containers to Hold Elements 00:04:10
Media sizes in Bootstrap 00:03:16
Chapter 3 : Bootstraps grid
Bootstrap Grid columns 00:11:43
Bootstrap Column Auto Sizing 00:11:15
Grid Column Order and spacing 00:10:23
nested rows within rows 00:05:07
Chapter 4 : Bootstrap Rapid Design
standout text typography 00:05:02
List group items 00:08:28
Bootstrap responsive images 00:07:03
Bootstrap JumboTron 00:03:40
Badges in Bootstrap 00:02:28
Chapter 5 : Bootstrap Buttons
Buttons in Bootstrap 00:09:06
Bootstrap Button Groups 00:05:24
Button Radio Buttons and check boxes 00:09:15
Chapter 6 : Bootstrap Common Components and utilities
Bootstrap Progress bar 00:10:09
Font and Background color 00:03:50
Bootstrap Utility Classes 00:09:28
Chapter 7 : Bootstrap structure
Bootstrap tables 00:10:36
Bootstrap Cards 00:04:34
Card Structure and grouping 00:11:57
Bootstrap Forms Grid 00:07:24
Input Group Addons 00:08:13
Form Select and File Input 00:03:06
Drop down menu Bootstrap 00:06:22
Chapter 8 : Navigation Bootstrap component
Bootstrap Nav Component 00:09:54
Bootstrap NavBar Responsive 00:12:10
Navbar options Bootstrap 00:04:50
Chapter 9 : Bootstrap interactive components
Bootstrap Alerts 00:04:42
Popover and Tooltip 00:05:37
Collapse and show elements 00:04:12
Bootstrap Modals 00:09:43
Bootstrap Image Carousel 00:09:57
Chapter 10 : Conclusion
Bootstrap conclusion 00:04:13
Section Overview Website 1 00:01:31
Chapter 11 : Rapid Web development create a quick website
Section Preview Website 2 00:01:48
Build a Default Bootstrap template 00:06:13
Build responsive navbar 00:06:22
Responsive NavBar Bootstrap 4 00:08:41
Full Height Section 00:08:05
Build section 00:06:17
Bootstrap Buttons Section 00:05:25
Bootstrap 4 Cards in Action 00:06:40
Bootstrap 4 Forms 00:04:42
Add new section with background image 00:05:00
Footer Styling Bootstrap 4 00:05:04
Bootstrap ScrollSpy 00:04:06
Bonus jQuery Animate Method 00:10:23
Website Build Overview 00:04:23
Chapter 12 : Multiple Page Image header Bootstrap 4 website
Section Preview Website 3 00:01:46
Project Introduction 00:02:09
Create Bootstrap template 00:04:22
Design Website Structure 00:07:16
Setup NavBar Structure 00:03:10
Create a Responsive Navbar Bootstrap 4 00:09:30
Build image Background Section 00:11:58
Bootstrap 4 Footer Structure 00:06:33
Adding Font Awesome Icons 00:05:44
Design Home Page 00:04:49
Build Home Page 00:10:37
Design Planning About Page 00:04:27
Bootstrap List and Grid about Page 00:11:24
Plan and Design Services Page 00:03:07
Services Page using Cards 00:07:00
Setup Contact Page Design 00:04:40
Build Contact Form Bootstrap 4 00:08:34
Multiple Page Bootstrap 4 Website review 00:03:43
Chapter 13 : Build Multiple Page Website from scratch portfolio site
Section Preview Website 4 00:01:55
Project Introduction 00:02:20
Quick Bootstrap 4 Setup 00:07:35
Build Bootstrap Page Structure 00:02:20
Build Bootstrap Responsive NavBar 00:11:45
Build Footer Structure 00:07:13
Build Footer at Font Awesome 00:07:08
Complete WebPage Layout 00:05:09
Design Index Page Layout 00:04:51
Setup Bootstrap 4 Grid 00:05:48
Home Page Carousel 00:09:21
Add Call to Action Section 00:02:12
Bootstrap 4 Cards 00:05:44
Plan about Page Design 00:02:06
Collapse Elements Build about Page 00:06:23
Plan and Design Portfolio Page 00:02:01
Bootstrap Cards Portfolio Page 00:06:02
Plan Contact Page 00:02:09
Build Contact Form 00:10:25
Webpage overview and Review 00:02:52
Chapter 14 : Bootstrap Parallax Style Single Page Website
Section Preview Website 5 00:02:17
Basic Bootstrap 4 Template Creation 00:03:20
Create Bootstrap NavBar 00:11:09
Header Section 00:06:31
Build another Section 00:07:56
Add About Me Section 00:07:41
Bootstrap Cards and Grid 00:07:55
Create a contact form 00:07:08
Add a Footer 00:03:13
Bonus animate with jQuery 00:07:31
Project Overview 00:02:37