Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Breakpoints Explained in Bootstrap 5

Breakpoints: The building blocks of responsive design in Bootstrap 5.

What are Breakpoints?

Breakpoints are the screen size thresholds where your website"s layout changes to adapt to different devices. Bootstrap uses CSS media queries to apply styles at specific breakpoints.

📱

Mobile-First

Bootstrap uses a mobile-first approach. Styles apply to mobile first, then larger breakpoints override as needed.

🎯

6 Breakpoints

Bootstrap 5 has six default breakpoints ranging from extra small phones to extra large desktops.

Bootstrap 5 Breakpoint System

Complete Breakpoint Chart

Breakpoint	Class Prefix	Dimensions	Media Query	Devices	Example Class
Extra small	`xs` (default)	<576px	`@media (min-width: 0px)`	Small phones	`.col-6`
Small	`sm`	≥576px	`@media (min-width: 576px)`	Large phones	`.col-sm-6`
Medium	`md`	≥768px	`@media (min-width: 768px)`	Tablets	`.col-md-6`
Large	`lg`	≥992px	`@media (min-width: 992px)`	Laptops	`.col-lg-6`
Extra large	`xl`	≥1200px	`@media (min-width: 1200px)`	Desktops	`.col-xl-6`
Extra extra large	`xxl`	≥1400px	`@media (min-width: 1400px)`	Large desktops	`.col-xxl-6`

Note: The xs breakpoint doesn"t have a prefix in class names. Classes without a breakpoint prefix apply to all screen sizes.

Breakpoint Visualization

Screen Size Ranges

xs<576px

Mobile

sm576px+

Large Phones

md768px+

Tablets

lg992px+

Laptops

xl1200px+

Desktops

xxl1400px+

Large Desktops

📱

xsPhones

📱

smLarge Phones

📱

mdTablets

💻

lgLaptops

🖥️

xlDesktops

🖥️

xxlLarge Desktops

Breakpoint Usage in Grid System

Responsive Grid Examples

Example 1: Basic Responsive Grid

Item

Breakpoint	Class Applied	Columns per Row	Width per Column
xs (<576px)	`col-12`	1	100%
sm (≥576px)	`col-sm-6`	2	50%
md (≥768px)	`col-md-4`	3	33.33%
lg (≥992px)	`col-lg-3`	4	25%
xl (≥1200px)	`col-xl-2`	6	16.66%

Example 2: Container Breakpoints

.container-md - Fluid until md breakpoint (768px), then becomes fixed width.

<!-- Responsive container -->
            <div class="container-md">
            <!-- Fluid on mobile, fixed on tablet+ -->
            </div>

            <!-- Responsive grid -->
            <div class="row">
            <div class="col-12 col-md-8">
                <!-- Full width on mobile, 66% on tablet+ -->
            </div>
            <div class="col-12 col-md-4">
                <!-- Full width on mobile, 33% on tablet+ -->
            </div>
            </div>

Breakpoints in Utility Classes

Display Utilities

Class	Breakpoint	Effect
`d-none`	All screens	Hide element
`d-sm-block`	sm and up	Show as block
`d-md-none`	md and up	Hide on tablet+
`d-lg-flex`	lg and up	Flex on desktop+

Visible only on mobile

Visible only on tablet+

Spacing Utilities

Class	Breakpoint	Effect
`mt-3`	All screens	Margin top
`mt-md-4`	md and up	Margin top on tablet+
`px-lg-5`	lg and up	Padding x on desktop+
`py-sm-2`	sm and up	Padding y on large phones+

More padding on larger screens

Custom Breakpoints (SCSS)

Customizing Breakpoints

You can customize breakpoints in your SCSS variables file:

// Custom breakpoints in SCSS
            $grid-breakpoints: (
            xs: 0,
            sm: 576px,
            md: 768px,
            lg: 992px,
            xl: 1200px,
            xxl: 1400px
            );

            // Custom container max-widths
            $container-max-widths: (
            sm: 540px,
            md: 720px,
            lg: 960px,
            xl: 1140px,
            xxl: 1320px
            );

            // Add custom breakpoint
            $grid-breakpoints: map-merge(
            $grid-breakpoints,
            (
                "xxxl": 1600px  // Custom extra extra extra large
            )
            );

            @import "bootstrap/scss/bootstrap";

Note: Changing breakpoints requires recompiling Bootstrap from SCSS source and may affect all responsive components.

Breakpoint Logic Explained

How Breakpoint Classes Work

Mobile-First CSS

/* Base styles apply to ALL screens */
            .col-md-6 {
            /* Mobile styles here */
            }

            /* Medium breakpoint and up */
            @media (min-width: 768px) {
            .col-md-6 {
                width: 50%; /* Override for tablet+ */
            }
            }

            /* Large breakpoint and up */
            @media (min-width: 992px) {
            .col-md-6 {
                /* Can add more overrides */
            }
            }

Class Inheritance

.col-md-6 .col-lg-4
• On mobile: 100% (default)
• On tablet: 50% (md breakpoint)
• On desktop: 33% (lg breakpoint)

Class Combination	Mobile	Tablet	Desktop	Logic
`col-12 col-md-6`	100%	50%	50%	md applies to md and larger
`col-md-6 col-lg-4`	100%	50%	33%	lg overrides md on larger screens
`d-none d-md-block`	Hidden	Visible	Visible	md applies to md and larger

Practical Breakpoint Strategies

Strategy 1: Content-Based

Choose breakpoints based on content layout needs, not specific devices.

/* When content looks crowded */
            @media (min-width: 850px) {
            /* Custom breakpoint */
            }

Strategy 2: Device-Oriented

Use Bootstrap"s default breakpoints for common device coverage.

<div class="col-12 col-sm-6 col-md-4">
            /* Covers phones, tablets, desktops */
            </div>

Strategy 3: Performance-Focused

Use fewer breakpoints to reduce CSS size and complexity.

<div class="col-12 col-md-6">
            /* Mobile and desktop only */
            /* Skip sm breakpoint */
            </div>

Common Breakpoint Patterns

Layout Type	Recommended Breakpoints	Example	Use Case
Simple Blog	`md` only	`col-12 col-md-8`	Mobile/Desktop toggle
E-commerce	`sm, md, lg`	`col-6 col-md-4 col-lg-3`	Product grids
Dashboard	`lg, xl`	`col-12 col-lg-6 col-xl-4`	Data visualization
Landing Page	All breakpoints	`col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2`	Feature showcases

Testing Breakpoints

How to Test Your Breakpoints

Browser DevTools: Use device toolbar in Chrome/Firefox
Real Devices: Test on actual phones and tablets
Online Tools: BrowserStack, Responsinator
Manual Testing: Resize browser window slowly
Breakpoint Indicators: Add visual cues during development

Breakpoint Debugging Tip

Add this CSS during development to see current breakpoint:

/* Add to your CSS for debugging */
            body::after {
            content: "xs";
            position: fixed;
            top: 0;
            right: 0;
            background: red;
            color: white;
            padding: 5px;
            z-index: 9999;
            }

            @media (min-width: 576px) { body::after { content: "sm"; } }
            @media (min-width: 768px) { body::after { content: "md"; } }
            @media (min-width: 992px) { body::after { content: "lg"; } }
            @media (min-width: 1200px) { body::after { content: "xl"; } }
            @media (min-width: 1400px) { body::after { content: "xxl"; } }

Breakpoint Best Practices

✅ Do

Design mobile-first
Use Bootstrap"s default breakpoints
Test on actual devices
Consider content, not just screen size
Use meaningful breakpoint names
Keep breakpoint logic simple

❌ Don"t

Target specific devices only
Create too many breakpoints
Forget to test edge cases
Use breakpoints for everything
Ignore performance impact
Make breakpoints too close together

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial