Boot Bootstrap CSS

Create responsive layouts quickly with Bootstrap grid, utilities, components, and theming.

Lessons

1 Bootstrap Tutorial 2 Bootstrap HOME 3 Bootstrap Introduction 4 Get Started with Bootstrap 5 CDN vs Download vs npm 6 Bootstrap Versions 7 Bootstrap Starter Template 8 Containers 9 Responsive Breakpoints 10 Bootstrap Grid & Containers 11 The 12-Column Grid 12 Grid Columns 13 Auto-Layout Columns 14 Column Offsets 15 Nesting Grids 16 Column Ordering 17 Grid Gutters 18 Row Columns 19 Spacing, Display & Flex Utilities 20 Spacing Utilities 21 Sizing Utilities 22 Display Utilities 23 Flex Utilities 24 Text Utilities 25 Color Utilities 26 Background Utilities 27 Border Utilities 28 Shadow Utilities 29 Position Utilities 30 Overflow Utilities 31 Visibility Utilities 32 Typography 33 Headings & Display Headings 34 Lists 35 Images 36 Figures 37 Tables 38 Responsive Tables 39 Buttons, Cards, Navbars & Forms 40 Buttons 41 Button Groups 42 Badges 43 Alerts 44 Cards 45 Card Layouts 46 List Groups 47 Navbar 48 Responsive Navbar Toggle 49 Nav & Tabs 50 Breadcrumb 51 Pagination 52 Dropdowns 53 Button Dropdowns 54 Collapse 55 Accordion 56 Progress Bars 57 Spinners 58 Placeholders 59 Hero & Jumbotron 60 Icons, Modals & Interactive UI 61 Bootstrap Icons 62 Modals 63 Modal Forms 64 Offcanvas 65 Tooltips 66 Popovers 67 Toasts 68 Carousel 69 Scrollspy 70 Forms 71 Form Controls 72 Select Menus 73 Checkboxes & Radios 74 Range Inputs 75 Input Groups 76 Floating Labels 77 Form Layout 78 Form Validation 79 Form Help Text 80 Disabled & Readonly Fields 81 Customizing Bootstrap Theme 82 CSS Variables 83 Customizing with Sass 84 The Color System 85 Dark Mode 86 Custom Button Styles 87 Utilities API 88 Right-to-Left Support 89 Bootstrap Accessibility Patterns 90 ARIA Roles in Components 91 Keyboard Navigation 92 Screen Reader Support 93 Focus Management 94 Bootstrap JavaScript 95 JS via Data Attributes 96 Programmatic JavaScript API 97 Component Events 98 Bundle vs Separate JS 99 Bootstrap with React 100 Bootstrap with Vue 101 Build Tools & Bundling 102 Removing Unused CSS 103 Responsive Design Patterns 104 Build a Landing Page 105 Build a Dashboard Layout 106 Build a Login Page 107 Build a Pricing Page 108 Bootstrap Best Practices 109 Common Bootstrap Mistakes 110 Bootstrap Cheatsheet 111 Bootstrap Interview Questions 112 Bootstrap Quiz 113 Bootstrap Exercises 114 Bootstrap Practice Problems 115 Bootstrap Project Ideas 116 Bootstrap Syllabus 117 Bootstrap Study Plan 118 Bootstrap Bootcamp

Offcanvas

Bootstrap CSS Lesson 64 of 118 ~1 min read

Overview

Slide hidden panels in from the edge of the screen.

Offcanvas is easiest to learn by reading the example, changing it, and observing the result.

Core Ideas

Understand what Offcanvas changes.
Run the example.
Change one value.
Explain the result.

Step by Step

Read the Offcanvas example.
Run it.
Change it.
Explain it.

Code Example

<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#menu">
  Open menu
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="menu" aria-labelledby="menuLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="menuLabel">Menu</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <a class="d-block py-2" href="#">Dashboard</a>
    <a class="d-block py-2" href="#">Settings</a>
  </div>
</div>

Checklist

Read the example and change one value.
Check the result in the browser.
Write down the rule you learned.

Common Mistakes

Skipping the example.
Changing many things at once.
Not checking the result.

Practice Challenge

Practice the Offcanvas example in a small scratch file, then explain what changed and why.

Mastery Check

You can explain Offcanvas.
You can change the example.
You can debug the result.

Create a free account to save which lessons you've finished. Save my progress

← Previous Next lesson →