Bootstrap 5: Layout basics

Included in the course

What you'll learn

• Use a 12-column grid mechanism
• Work with text and tables using Bootstrap's features
• Use standard components
• Apply the built-in utilities when creating a template
• Create your components

Description

This course focuses on Bootstrap 5, one of the most popular frameworks for layout designers. Its versatility allows you to create complex layouts quickly. Built-in adaptability and accessibility mechanisms remove a lot of coders' problems. This course explains how Bootstrap works: mesh, adaptivity, and utilities. You'll learn how to create your components using Bootstrap's built-in mechanisms.

Course program

• 1

  Introduction

  Getting to know the Bootstrap framework and exploring the course outline

  theory
• 2

  Why Bootstrap

  Learning about the areas of use of Bootstrap and its pros and cons

  theory
• 3

  Bootstrap installation

  Learning about the different ways to add Bootstrap to a page and the tools to do so

  theory

  quiz

• 4

  Grid

  Introducing the concept of grids and container types in Bootstrap

  theory

  quiz

  exercise

• 5

  Adaptability

  Learning about the principles of adaptability in Bootstrap

  theory

  quiz

  exercise

• 6

  Working with texts

  Exploring options for working with text, RFS, and the default project fonts in Bootstrap

  theory

  quiz

  exercise

• 7

  Tables

  Learning how to work with tables and table accessibility using Bootstrap's features

  theory

  quiz

• 8

  Components

  Learning about Bootstrap components and how they work

  theory

  quiz

  exercise

• 9

  Creating a custom component

  Develop a custom quote component using Bootstrap features

  theory

  exercise

• 10

  Utilities

  Learning to work with utilities and create custom utilities using standard Bootstrap 5 tools

  theory

  quiz

  exercise

• 11

  Do it yourself

  Some additional tasks to help you consolidate the theory you've learned
• 12

  Additional resources

  Some materials the Hexlet team have picked up. This will give you a more in-depth understanding of the topic

Challenges

We recommend working on these challenges after completing the course. They'll help you obtain more experience in programming and strengthen your new skills.