Bootstrap Basics

Summary

Below you will find a collection of tutorials teaching the basics of the Bootstrap grid system. Note: These tutorials work for both Bootstrap 4 and Bootstrap 5.

Before You Start

These tutorials assume you have a basic understanding of HTML and CSS.

Exercises

You can download exercises to go along with these tutorials on our Bootstrap exercises GitHub repo. Just click the green Code button in the corner and click the Download ZIP option.

Tutorials

Introduction

• Why should I use Bootstrap?

Setup

• Add Bootstrap to project
• Add custom CSS and JS
• How to update Bootstrap
• The basic rules of Bootstrap: Containers, Rows, and Columns

Bootstrap Grid System

• Equal width columns
• Setting one column width
• Responsive columns
• Multiple column classes

Layouts

• Side by side layout
• 3 column layout
• Grid

Utility classes

• Margin classes
• Padding classes
• Shadows
• Text classes
• Images

Components

• Buttons
• Navbar

Project

• Bootstrap Project