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 Essentials

Video Description

Let's face it... We live in a world of many screens.

Many screen sizes. Many resolutions. Many different devices. The variety of screen characteristics has made things difficult for developers who want their content to look good on every device.

Now, with Bootstrap 4 and responsive design, dealing with multiple screen sizes is easy!

In this course , Dave Moran will take you through the foundations of the Bootstrap 4 Framework. Bootstrap is a responsive, mobile first framework. That means it's designed for a world where users see content on mobile screens, as well as larger computer or even television screens. Bootstrap will do the heavy lifting involved in Responsive Design allow you to spend your time (and focus) on creating great looking, usable interfaces.

There's a reason Bootstrap 4 provides the most popular component library on the market-- It looks great and is easy to learn.

And learn it you will!

Dave Moran is your instructor for this course. Dave has years of experience as a client side developer using Bootstrap 4 in conjunction with HTML5 and Javascript to create web and mobile sites for high dollar clientele. Dave is a born teacher and will make learning Boostrap 4 fun. In this course, you'll code along to engaging lectures and then complete several code assignments to make sure you're ready to apply Bootstrap 4 to your own everyday development work.

Table of Contents

  1. Chapter 1: Introduction to CSS Frameworks
    1. Welcome to Bootstrap 4 00:00:39
    2. About the Instructor 00:00:47
    3. Quick Introduction Activity to CSS Frameworks 00:09:49
    4. Bootstrap 00:09:10
    5. Foundation 00:06:40
    6. Materialize 00:09:20
    7. And the Rest 00:20:58
    8. Getting Set Up with Bootstrap 4 00:12:29
    9. All About Flexbox 00:00:33
  2. Chapter 2: Let's Get Flexible: A Flexbox Crash Course
    1. Inline, Block, Inline-Block? 00:00:29
    2. Display: Flex 00:08:36
    3. Flex, Direction, Wrap 00:07:51
    4. Flex shorthand, align and justify 00:11:30
    5. Creating a masonry grid 00:07:52
    6. Going from Flexbox grids to Bootstrap Grids 00:00:34
  3. Chapter 3: Components of the layout
    1. Layout & Content 00:00:24
    2. Bootstrap Grid 00:18:34
    3. Media Objects 00:13:00
    4. Spacing 00:11:21
    5. Reboot 00:07:19
    6. Figures 00:08:00
    7. Tables 00:07:11
    8. Code 00:06:41
    9. Students will be given instructions on how to properly lay out content on a page using a mixture of images, videos, and text. 00:13:44
    10. "Login and Registration " 00:00:30
  4. Chapter 4: Input and Feedback Components
    1. Bootstrap 4 Input and Feedback 00:00:38
    2. Alerts 00:12:03
    3. Buttons 00:14:12
    4. Input Groups 00:06:47
    5. Progress 00:07:56
    6. Tool Tips 00:08:48
    7. Login and Registration 00:15:00
    8. Grid-Based Components 00:00:31
  5. Chapter 5: Grid Based Components
    1. Bootstrap 4 Grid Layouts: Multiple Items 00:00:31
    2. Card 00:05:28
    3. Button Group 00:21:38
    4. Pagination 00:16:08
    5. Dropdowns 00:10:35
    6. More Flexible Blog Listing 00:19:44
    7. Content-Based Components 00:00:47
  6. Chapter 6: Breadcrumbs and Badges
    1. Single Blog Page 00:00:41
    2. Jumbotron 00:27:21
    3. Badges 00:12:37
    4. List Group 00:18:40
    5. Breadcrumbs 00:15:12
    6. Scrollspy 00:22:42
    7. A New Blog Page 00:32:06
    8. Last Project: Homepage 00:00:36
  7. Chapter 7: Website Navigation
    1. Landing Page 00:00:39
    2. Navbar 00:15:52
    3. Carousel 00:18:36
    4. Navs 00:26:33
    5. Modal 00:22:19
    6. Popover 00:13:32
    7. Landing Page v2 00:02:54
    8. Finale 00:00:37