Bootstrap 4 From Scratch With 5 Projects

Bootstrap 4 From Scratch With 5 Projects

by Brad Traversy
Released May 2018
Publisher(s): Packt Publishing
ISBN: 9781789535457

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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

What You Will Learn

  • Learn and create amazing high-quality Bootstrap 4 themes and UIs from scratch
  • Learn the Bootstrap 4 utilities, classes, components & JS widgets using a custom sandbox environment
  • Create a professional workflow & dev server to build from source and compile Sass
  • Learn semantic HTML5 & modern CSS3 techniques

Audience

Anyone that wants to learn & master Bootstrap 4 and build real world themes

About The Author

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

Table of contents

  1. Chapter 1 : Intro Getting Started
    1. Welcome To the Course
    2. What Is Bootstrap Why Use It?
    3. What's New In Bootstrap 4?
    4. Initial Environment Setup
    5. Bootstrap Sandbox Setup
  2. Chapter 2 : Typography Utilities
    1. Section Introduction
    2. Headings Basic Typography
    3. Text Alignment Display
    4. Floats Fixed Positions
    5. Colors Background
    6. Margin Padding Spacing
    7. Sizing Borders
    8. CSS Breakpoints
  3. Chapter 3 : CSS Components
    1. Section Intro
    2. Buttons Button Groups
    3. Navbar Navs
    4. List Groups Badges
    5. Forms Input
    6. Input Groups
    7. Alerts Progress Bars
    8. Tables Pagination
    9. Working with Cards
    10. Media Objects
    11. Jumbotron
  4. Chapter 4 : Grid System Flexbox
    1. Section Introduction
    2. Grid System
    3. Grid Alignment
    4. Flexbox Classes
    5. Auto Margin, Wrap Ordering
  5. Chapter 5 : JavaScript Widgets
    1. Section Introduction
    2. Carousel Slider
    3. Collapse Accordion
    4. Tooltips
    5. Popovers
    6. Modals
    7. ScrollSpy Smooth Scolling
  6. Chapter 6 : Simple Theme Boiler Plate Setup
    1. Creating the Boiler
  7. Chapter 7 : Project 1 - LoopLab Social Theme
    1. Project Intro
    2. Setup Navbar
    3. Home Section Area
    4. Explore Section Area
    5. Create Share Section Areas
    6. Footer, Contact Modal Responsiveness
  8. Chapter 8 : Project 2 - Mizuxe Book Theme
    1. Project Intro
    2. Setting Up Sass with Koala
    3. Custom Navbar Logo
    4. Showcase Primary Color Change
    5. Newsletter Boxes
    6. About Section with Accordion
    7. Authors Area
    8. Contact Footer
  9. Chapter 9 : Project 3 - Glozzom Multi Page Them
    1. Project Intro
    2. Showcase with Carousel
    3. Home Icons, Heading Info Sections
    4. Video Section with Autoplay Modal
    5. Photo Gallery Newsletter
    6. Page Header About Section
    7. Icon Boxes Testimonial Slider
    8. Services Page with FAQ Accordion
    9. Blog Page with Cards
    10. Contact Staff Sections
  10. Chapter 10 : Project 4 - Glozzom Multi Page Theme
    1. Project Intro
    2. Navbar Main Header
    3. Add Buttons Modals
    4. Finishing the Dashboard
    5. Resource Table Pages
    6. Details Settings Pages
    7. Profile Login Page
  11. Chapter 11 : Project 5 – Portfoligrid
    1. Project Intro
    2. Main Header
    3. Home Collapse Content
    4. Resume Collapse Content
    5. Work Collapse Content
    6. Contact Collapse Content

Product information

  • Title: Bootstrap 4 From Scratch With 5 Projects
  • Author(s): Brad Traversy
  • Release date: May 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781789535457