O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Bootstrap 4 From Scratch With 5 Projects

Video Description

Master the latest version of Bootstrap (4.0.0 Beta) and build 5 real-world themes while learning HTML5 semantics & CSS3

About This Video

  • Very easy to follow.
  • This course was created for the beta version of Bootstrap but its applicable for the latest version.

In Detail

You do NOT need to know Bootstrap 3 for this course. Even if you already know Bootstrap 4, skip the learning sections and head right for section 6 to create the custom workflow and start the projects. Everything is completely modular! The author has created a completely custom HTML learning environment for the first few sections of this course. Each lecture has an HTML page associated with it and has a start state. As we move along through the lectures, you code along with me learning all that Bootstrap 4 offers including helpers/utilities, components, widgets, flexbox and more.Bootstrap Starter Pack - Once you get through the sandbox, we will setup the starter pack which I also created for this course. This will give us a real development workflow to compile Bootstrap 4 from source and compile Sass. It will even give us a dev server with autoload. This is what we will use for the 5 projects. We will use the Starter pack to create 5 real-world themes including:

LoopLap - A social UI Theme

Mizuxe - A Book/Product Showcase Theme

Blogen - A blog admin area UI

Glozzom - A multi-page theme with a carousel and some 3rd party scripts

Portfoligrid - A portfolio theme using the grid, flexbox and the collapse widget

Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

Table of Contents

  1. Chapter 1 : Intro & Getting Started
    1. Welcome To the Course 00:04:48
    2. What Is Bootstrap & Why Use It? 00:07:21
    3. What's New In Bootstrap 4? 00:05:23
    4. Initial Environment Setup 00:08:58
    5. Bootstrap Sandbox Setup 00:05:50
  2. Chapter 2 : Typography & Utilities
    1. Section Introduction 00:02:29
    2. Headings & Basic Typography 00:09:14
    3. Text Alignment & Display 00:09:24
    4. Floats & Fixed Positions 00:06:15
    5. Colors & Background 00:09:08
    6. Margin & Padding Spacing 00:10:28
    7. Sizing & Borders 00:06:53
    8. CSS Breakpoints 00:05:26
  3. Chapter 3 : CSS Components
    1. Section Intro 00:02:19
    2. Buttons & Button Groups 00:14:48
    3. Navbar & Navs 00:21:22
    4. List Groups & Badges 00:08:46
    5. Forms & Input 00:13:13
    6. Input Groups 00:08:09
    7. Alerts & Progress Bars 00:09:39
    8. Tables & Pagination 00:09:48
    9. Working with Cards 00:21:16
    10. Media Objects 00:07:55
    11. Jumbotron 00:04:17
  4. Chapter 4 : Grid System & Flexbox
    1. Section Introduction 00:02:10
    2. Grid System 00:16:56
    3. Grid Alignment 00:06:02
    4. Flexbox Classes 00:09:18
    5. Auto Margin, Wrap & Ordering 00:03:40
  5. Chapter 5 : JavaScript Widgets
    1. Section Introduction 00:01:32
    2. Carousel Slider 00:16:11
    3. Collapse & Accordion 00:07:18
    4. Tooltips 00:08:40
    5. Popovers 00:06:38
    6. Modals 00:06:56
    7. ScrollSpy & Smooth Scolling 00:07:34
  6. Chapter 6 : Simple Theme Boiler Plate Setup
    1. Creating the Boiler 00:06:13
  7. Chapter 7 : Project 1 - LoopLab Social Theme
    1. Project Intro 00:02:43
    2. Setup & Navbar 00:07:19
    3. Home Section Area 00:18:51
    4. Explore Section Area 00:09:37
    5. Create & Share Section Areas 00:07:37
    6. Footer, Contact Modal & Responsiveness 00:10:25
  8. Chapter 8 : Project 2 - Mizuxe Book Theme
    1. Project Intro 00:02:47
    2. Setting Up Sass with Koala 00:10:55
    3. Custom Navbar & Logo 00:09:34
    4. Showcase & Primary Color Change 00:06:40
    5. Newsletter & Boxes 00:14:20
    6. About Section with Accordion 00:07:13
    7. Authors Area 00:09:39
    8. Contact & Footer 00:11:27
  9. Chapter 9 : Project 3 - Glozzom Multi Page Them
    1. Project Intro 00:03:20
    2. Showcase with Carousel 00:20:08
    3. Home Icons, Heading & Info Sections 00:11:31
    4. Video Section with Autoplay Modal 00:08:57
    5. Photo Gallery & Newsletter 00:13:15
    6. Page Header & About Section 00:10:42
    7. Icon Boxes & Testimonial Slider 00:10:22
    8. Services Page with FAQ Accordion 00:13:33
    9. Blog Page with Cards 00:09:54
    10. Contact & Staff Sections 00:12:58
  10. Chapter 10 : Project 4 - Glozzom Multi Page Theme
    1. Project Intro 00:03:54
    2. Navbar & Main Header 00:10:20
    3. Add Buttons & Modals 00:15:41
    4. Finishing the Dashboard 00:12:06
    5. Resource Table Pages 00:12:16
    6. Details & Settings Pages 00:11:40
    7. Profile & Login Page 00:12:35
  11. Chapter 11 : Project 5 – Portfoligrid
    1. Project Intro 00:02:13
    2. Main Header 00:17:21
    3. Home Collapse Content 00:06:08
    4. Resume Collapse Content 00:07:18
    5. Work Collapse Content 00:08:16
    6. Contact Collapse Content 00:05:57