Web Layouts with Flexbox and Bootstrap 4
Flexboxes make creating web page layouts quicker, easier, and offer greater flexibility than traditional columns. Bootstrap 4 introduced the ability to develop Flexboxes quickly and added several additional utilities that make layouts even easier
What you'll learn
Using rows and columns can work for most webpages, but you are typically restricted to working with twelve columns, especially in Bootstrap. In this course, Web Layouts with Flexbox and Bootstrap 4, you will gain the ability to create custom web page layouts without having to define columns or stick within the column layouts. First, you will learn how to get started with defining flex containers and the different types of containers. Next, you will discover how to combine vertical and horizontal flex containers to create complex layouts. Then, you will learn how to add additional classes to refine your website. Finally, you will explore how to create a custom game layout using nothing but Flexbox layouts. When you’re finished with this course, you will have the skills and knowledge of using Flexboxes to create custom web page layouts without a lot of CSS, which will help you become a more efferent web designer working on large scale web pages.
Table of contents
- Version Check 0m
- Module Introduction 1m
- What You Need to Know 2m
- The Struggle with Columns 2m
- Understanding Standard Flex Layouts 2m
- Exploring the Sample Files 5m
- Defining the Flex Container Layout 6m
- Exploring Flexbox Row vs. Flexbox Columns 5m
- Adjusting the Container Direction 2m
- Combining Flex Containers and Using Flex Wrap 6m
- Using Bootstrap Built-in Sizes 7m
- Module Conclusion 2m
- Module Introduction 1m
- Understanding Flex Axes 2m
- Aligning along Main Axis with Justify Content 5m
- Aligning along Cross Axis with Align Items 2m
- Aligning Specific Flexboxes 3m
- Applying Padding and Margin Classes 7m
- Using Fill, Grow, and Shrink 3m
- Using Auto Margins 3m
- Adapting Content Based on Size 5m
- Module Conclusion 1m