book

Designing Web Layouts with Bootstrap 5: Mastering Responsive Web Design with the Open Source CSS Framework

Name: Designing Web Layouts with Bootstrap 5: Mastering Responsive Web Design with the Open Source CSS Framework
Author: Ajdin Imsirovic
ISBN: 9798868819049

by Ajdin Imsirovic

January 2026

Intermediate to advanced

329 pages

5h 15m

English

Apress

Read now

Unlock full access

Designing Web Layouts with Bootstrap 5
Introduction
What This Book Is AboutWho This Book Is ForThe Structure of This BookChapter OverviewA Practical Approach
Table of Contents
About the Author
About the Technical Reviewers
Part I: Your First Layout: Portfolio Page
1. What You Need to Know: Revision of HTML, CSS, and JavaScript
1.1 Understanding File Extensions1.1.1 Exercise 1: Add a New File with the txt Extension, and Then Change It to the Html Extension1.2 Opening a File with the Html Extension in Your Browser1.3 Editing a File Using Notepad1.4 Making Our index.html File Look Better1.4.1 Exercise 2: Adding Your First Tags1.5 How Does the Browser Know How to Display Annotated Text?1.5.1 What Is Whitespace?1.5.2 Exercise 3: How Does the Browser Deal with Whitespace in html Files?1.5.3 Whitespace Collapsing in HTML1.5.3.1 What Is  ?1.5.3.2 HTML Elements1.6 Heading Tags in HTML1.7 HTML Attributes1.7.1 The Style Attribute in HTML1.7.1.1 Exercise 4: Practice Using the Style Attribute1.8 HTML Is for Structure and CSS Is for Display1.9 Multiple Property-Value CSS Pairs in the Style Attribute1.10 Block vs. Inline Elements1.11 Making Block Elements Inline and Vice-versa1.12 Using External Style Sheets in HTML Pages1.12.1 HTML DOCTYPE and Metadata1.12.2 Can Browsers Work Without DOCTYPE and Metadata?1.13 Using devtools1.13.1 Testing If the External Stylesheet Is Properly Linked1.13.2 The Anatomy of a CSS Declaration1.14 Moving Inline Styles to an External Stylesheet File1.14.1 Moving the h1 Styles to an External Stylesheet1.14.2 Moving the p Styles to an External Stylesheet1.14.3 Moving the Span Styles to an External Stylesheet1.15 CSS Specificity1.16 CSS Class Selectors and CSS id Selectors1.17 Adding an Interactive Button with the Help of JavaScript1.18 Using the Button HTML Element and the Onclick Attribute to Add Interactivity with JS1.19 How Browsers Work with Web Pages1.20 Conclusion
2. Containers and Rows in Bootstrap 5.3
2.1 Introduction2.2 The Box Model2.3 Containers in Bootstrap 5.32.4 Understanding Breakpoints2.4.1 What Are Breakpoints?2.4.2 Why Do We Need Breakpoints?2.4.3 Bootstrap’s Breakpoint System2.5 Understanding Containers2.5.1 Fixed-Width Container (.container)2.5.2 Fluid Container (.container-fluid)2.5.3 Responsive Containers (.container-{breakpoint})2.6 Rows in Bootstrap 5.32.6.1 Key Features of Rows2.7 How to Use Breakpoints in Bootstrap2.8 Bootstrap Contextual Colors2.8.1 Background Primary (.bg-primary)2.8.2 Background Success (.bg-success)2.9 Practical Example2.10 Common Pitfalls to Avoid2.10.1 Container Nesting Rules2.10.1.1 The Container-Fluid Exception2.10.1.2 Bootstrap’s Official Position2.10.1.3 Practical Recommendation2.11 Conclusion
3. Columns, Breakpoints, and the Grid in Bootstrap 5.3
3.1 Introduction3.2 Historical Background – What Shaped the Development of Bootstrap?3.2.1 The Evolution of CSS Display Properties3.2.2 The First Grid-Based Web Layout System: 960.gs3.2.3 Early Grid Systems and Bootstrap’s Innovation3.2.4 Another Piece of the Puzzle: The Rise of Responsive Web Design3.3 Understanding the Building Blocks: Flexbox and CSS Grid3.3.1 Flexbox: The One-Dimensional Layout Model3.3.2 CSS Grid: The Two-Dimensional Layout Model3.3.3 One-Dimensional vs. Two-Dimensional Layouts: What’s the Difference?3.3.4 Bootstrap Grid: An Abstraction Layer3.4 Bootstrap’s Column System and Breakpoints in Action3.4.1 The Full Spectrum of Contextual Colors3.4.2 A Responsive Portfolio Example3.4.3 How the Layout “Shape-Shifts”3.5 Building with Bootstrap: What We’ve Learned and What’s Next3.6 Summary
4. Utilities, Typography, Images, and Tables in Bootstrap 5.3
4.1 Introduction4.2 Our Starting Website4.3 Understanding Bootstrap’s Utility Classes4.3.1 Utility Classes Already in Our Layout4.4 Enhancing Our Portfolio with Additional Utility Classes4.4.1 Improving the Header4.4.2 Enhancing the Sidebar4.4.3 Improving the Projects Section4.4.4 Enhancing the Footer4.5 The Power of Bootstrap’s Utility Classes4.5.1 Common Utility Class Categories4.6 Typography in Bootstrap4.6.1 Understanding Bootstrap’s Typography System4.6.2 Typography Classes in Bootstrap4.6.3 Enhancing Our Portfolio with Typography Classes4.6.3.1 Improving Text in the Header4.6.3.2 Enhancing Typography in the Sidebar4.6.3.3 Improving Typography in the Projects Section4.6.3.4 Improving Typography in the Footer4.6.4 Bootstrap Typography Classes Reference4.7 Images in Bootstrap4.7.1 Bootstrap’s Image Classes4.7.2 Enhancing Our Portfolio with Better Images4.7.2.1 Updating the Profile Image4.7.2.2 Adding Project Images4.7.2.3 Demonstrating Different Image Shapes4.7.3 Using Figure and Figure Caption4.7.4 Bootstrap Image Classes Reference4.8 Tables in Bootstrap4.8.1 Bootstrap’s Table Classes4.8.2 Adding Tables to Our Portfolio4.8.2.1 Skills and Proficiency Table4.8.2.2 Project Timeline Table4.8.2.3 Education and Certifications Table4.8.3 Bootstrap Table Classes Reference4.9 Conclusion

Part II: Your Second Layout: Invoice Maker
5. Forms in Bootstrap 5.3
5.1 Introduction5.2 HTML Forms: The Foundation5.2.1 The Form Element5.2.2 Form Controls5.2.2.1 Text Inputs5.2.2.2 Selection Controls5.2.2.3 Buttons5.2.2.4 Other Form Elements5.2.3 Form Attributes5.2.4 Accessibility with Labels5.3 The Challenges of Styling Forms with CSS5.3.1 Inconsistent Browser Defaults5.3.2 Complex Pseudo-elements5.3.3 Shadow DOM Elements5.3.4 Focus States and Accessibility5.3.5 Responsive Design Challenges5.3.6 Cross-Browser Compatibility5.4 How Bootstrap Simplifies Form Styling5.5 Bootstrap 5.3 Forms in Depth5.5.1 The Overarching Approach5.5.2 BEM Methodology in Bootstrap Forms5.5.3 Form Layout Options5.5.3.1 Default Stacked Form5.5.3.2 Horizontal Form5.5.3.3 Inline Form5.5.4 Form Controls in Bootstrap5.5.4.1 Text Inputs5.5.4.2 Select Dropdowns5.5.4.3 Checkboxes and Radio Buttons5.5.4.4 Input Groups5.5.4.5 Floating Labels5.5.5 Form Validation5.6 Components vs. Form Elements in Bootstrap5.6.1 What are Components?5.6.2 Are Forms Components?5.7 Building the Invoice Maker Project5.7.1 Project Overview5.7.2 HTML Structure5.7.3 Client Information Section5.7.4 Invoice Details Section5.7.5 Item Entry Form5.7.6 Items Table5.7.7 Totals Section5.7.8 The Complete Invoice Maker5.8 What’s Next?
6. Components in Bootstrap 5.3
6.1 Introduction6.2 The Evolution of Web UI Patterns6.3 Component-Based Design6.4 Categorizing Bootstrap Components6.4.1 Base Components (Primitive Components)6.4.2 Compound/Dynamic Components6.5 Additional Component Categories6.5.1 Form Components6.5.2 Layout Components6.5.3 Utility Components6.6 Practical Application: Enhancing Our Invoice App6.7 Deep Dive: The Navbar Component6.7.1 Responsive Behavior6.7.2 Navbar Architecture6.7.3 Placement Options6.7.4 Color Schemes and Customization6.7.5 Further Accessibility Considerations6.7.6 Adding a Navbar6.8 Deep Dive: The Card Component6.8.1 The Anatomy of a Card6.8.2 Card Variants and Styling6.8.2.1 Contextual Variants6.8.2.2 Border Variants6.8.2.3 Card Layout Options6.8.3 Cards as Content Containers6.8.4 Card Design Principles6.8.5 Using Cards for Content Organization6.8.6 Implementing a Theme Toggle6.9 The Finished Example6.10 The Art of Component Composition6.10.1 Principles of Effective Component Composition6.10.2 Common Component Combinations6.10.2.1 Navbar + Dropdown6.10.2.2 Card + List Group6.10.2.3 Button + Badge6.10.2.4 Input Group + Button + Dropdown6.10.3 Nested Components in Our Invoice App6.10.4 Advanced Component Composition Techniques6.11 Conclusion
7. JavaScript-Powered Components in Bootstrap 5.3
7.1 Introduction7.2 Implementing Tab Navigation7.2.1 Understanding Bootstrap’s Tab Component7.2.2 Adding Tabs to Our Invoice Items Section7.2.3 How the Tab System Works7.2.4 The Card View Layout7.2.5 Making the Tabs Interactive7.2.6 Testing Our Tab Navigation7.3 Implementing a Modal Form7.3.1 Understanding Bootstrap Modals7.3.2 Creating the Add Item Modal7.3.3 Connecting the Modal to Our Buttons7.3.4 Handling Form Submission7.3.5 Form Validation7.3.6 Understanding Dynamic DOM Manipulation7.3.7 Testing the Modal Form7.4 Implementing a Loading Indicator7.4.1 Understanding Bootstrap Spinners7.4.2 Adding the Reset Button7.4.3 Implementing the Loading State7.4.4 Understanding setTimeout7.4.5 The Spinner Component7.4.6 Testing the Loading Indicator7.4.7 Variations of the Spinner Component7.4.7.1 Different Sizes7.4.7.2 Different Colors7.4.7.3 Growing Spinner7.4.8 Best Practices for Loading Indicators7.5 Calculating and Displaying Invoice Totals7.5.1 Setting Up the Totals Section7.5.2 Implementing the updateTotals Function7.5.3 Understanding the DOM Traversal7.5.4 Calling updateTotals7.5.5 Testing the Totals Calculation7.5.6 Understanding Data Flow7.5.7 Enhancing the User Experience7.6 Conclusion
8. Sharing Your Invoice Maker App with the World
8.1 Introduction8.2 Understanding Git: Your Code’s Safety Net8.2.1 What Is Git?8.2.2 Git Basics: The Three-Step Process8.2.3 A Note on Best Practices8.3 GitHub: Your Code’s Home in the Cloud8.3.1 What Is GitHub?8.4 Netlify: From Code to Live Website8.4.1 What Is Netlify?8.5 Setting Up Git for Your Invoice Maker App (Optional)8.5.1 What Is Git Again?8.5.2 The Simplest Git Setup8.5.3 Why This Matters8.6 Creating a GitHub Repository8.6.1 Step 1: Create a GitHub Account8.6.2 Step 2: Create a New Repository8.6.3 Step 3: Upload Your Files to GitHub8.6.4 Step 4: Verify Your Repository8.7 Deploying Your App with Netlify8.7.1 Step 1: Create a Netlify Account8.7.2 Step 2: Create a New Site from Git8.7.3 Step 3: Configure Your Build Settings8.7.4 Step 4: Wait for Deployment8.7.5 Step 5: Customize Your Site Name (Optional)8.7.6 Step 6: Visit Your Live Site8.8 Making Updates to Your Live Site8.9 Conclusion
Part III: Your Third Layout: Bootstrap 5.3 and React
9. Modern Front-End Tooling
9.1 Introduction9.2 The Evolution of JavaScript: From ES5 to Modern Times9.3 The Module Revolution: Why JavaScript Needed a Better Way to Organize Code9.4 Enter Node.js: JavaScript Beyond the Browser9.5 The Client-Server Model and REST: How Websites Traditionally Work9.6 The Rise of React and the Virtual DOM9.7 npm: The Package Manager That Changed Everything9.8 Installing Node.js and npm9.8.1 Windows:9.8.2 macOS:9.8.3 Ubuntu/Debian Linux:9.9 Modern Project Starters: From Create React App to Vite9.9.1 The npm create and npx create Commands9.10 CDNs vs. npm: Different Ways to Include Dependencies9.11 Understanding Node Modules and Bundlers9.12 Bringing It All Together: The Modern Front-End Workflow9.13 What This Means for Bootstrap9.14 Conclusion: Staying on the Edge of Competence
10. React Concepts You Need to Know to Code Your Layout
10.1 Introduction10.2 Setting Up Your First React Project10.2.1 Option 1: Using an Online Code Editor10.2.2 Option 2: Using Vite Locally10.2.3 Understanding the Project Structure10.2.4 Adding Bootstrap to Our Project10.3 Understanding JSX: React’s Special Syntax10.3.1 What Is JSX?10.3.2 JSX Rules and Quirks10.3.3 JSX and HTML Attributes10.4 Creating Your First React Component10.4.1 Basic Component Structure10.4.2 Creating a Header Component10.4.3 Using the Header Component10.4.4 Creating a Hero Section Component10.4.5 Adding the Hero Component to Our App10.5 Understanding Props: Passing Data to Components10.5.1 What Are Props?10.5.2 A Quick Refresher on JavaScript Objects10.5.3 How Props Work in React10.5.4 Creating a Reusable PizzaCard Component10.5.5 Creating a Menu Section Component10.5.6 Adding the Menu to Our App10.5.7 Understanding Props in More Detail10.5.8 Props vs. Hardcoded Values10.5.9 Props Are Read-Only10.6 Building a Testimonials Section10.6.1 Creating a Testimonial Component10.6.2 Creating a Testimonials Section Component10.6.3 Adding the Testimonials to Our App10.7 Creating a Footer Component10.7.1 Adding the Footer to Our App10.8 Importing Assets in React10.8.1 Adding Images to Your Project10.8.2 Adding CSS Files10.9 Conclusion: Bringing It All Together10.9.1 What’s Next: Adding Interactivity
11. Adding Interactivity to Your React Restaurant Website
11.1 Introduction11.2 Understanding State in React11.2.1 Props vs. Internal State11.3 Introducing React Hooks and useState11.3.1 Understanding Destructuring in JavaScript11.3.1.1 Object Destructuring11.3.1.2 Array Destructuring11.3.2 Object vs. Array Destructuring: Why React Uses Array Destructuring for useState11.3.3 How useState Works11.3.4 Using Multiple State Variables11.3.5 Using Objects with useState11.4 Event Handling in React11.4.1 Common Events in React11.4.2 Handling Form Inputs11.4.3 Adding Interactivity to Our Pizza Paradise Website11.5 Component Hierarchy and State Flow in React11.5.1 State Lifting11.5.2 Understanding the Flow of Data11.5.3 Child-to-Parent Communication11.5.4 Grandparent-to-Grandchild Communication11.6 Building a Shopping Cart Component11.7 Passing Event Handlers as Props11.8 Conclusion
12. Improving Your Restaurant Website Using the React-Bootstrap npm Package
12.1 Introduction12.2 Understanding React-Bootstrap12.2.1 What Is React-Bootstrap?12.2.2 How Does React-Bootstrap Work?12.2.3 React-Bootstrap vs. Bootstrap12.2.4 Completeness and Community12.3 Setting Up React-Bootstrap in Our Project12.3.1 Step 1: Install the Dependencies12.3.2 Step 2: Import the Bootstrap CSS12.4 Refactoring Our Components with React-Bootstrap12.4.1 Refactoring the Header Component12.4.2 Key Changes and Benefits12.4.3 Refactoring the Hero Component12.4.4 Refactoring the PizzaCard Component12.4.5 Refactoring the PizzaCustomizer Component12.4.6 Refactoring the Menu Component12.4.7 Refactoring the App Component12.5 Benefits of Using React-Bootstrap12.5.1 Declarative Component API12.5.2 Component Composition12.5.3 Improved Type Safety12.5.4 Accessibility Improvements12.5.5 Reduced Bundle Size12.5.6 Better Integration with React Patterns12.6 Common Pitfalls and How to Avoid Them12.6.1 Mixing Bootstrap Classes with React-Bootstrap Components12.6.2 Not Importing the Bootstrap CSS12.6.3 Using Imperative Code with React-Bootstrap Components12.7 Conclusion12.8 Things That We Didn’t Discuss12.8.1 State Management Solutions12.8.2 Type Systems and Tooling12.8.3 Build Tools and Module Bundlers12.8.4 CSS Solutions12.8.5 UI Component Libraries12.8.6 Modern React Patterns12.8.7 State-Driven UI Approaches12.9 Conclusion
Index

Content preview from Designing Web Layouts with Bootstrap 5: Mastering Responsive Web Design with the Open Source CSS Framework

A. ImsirovicDesigning Web Layouts with Bootstrap 5https://doi.org/10.1007/979-8-8688-1904-9_11

11. Adding Interactivity to Your React Restaurant Website

Ajdin Imsirovic¹

(1)

Tuzla, Bosnia and Herzegovina

11.1 Introduction

In the previous chapter, we built a static restaurant website using React components, JSX, and props. While the site looks good, it doesn’t actually do anything yet. A user can’t interact with it in any meaningful way – they can’t order food, customize their pizzas, or add items to a cart.

In this chapter, we’ll transform our static website into an interactive application by introducing a fundamental React concept: state. Before we dive in, ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Modern CSS: Master the Key Concepts of CSS for Modern Web Development

Publisher Resources

ISBN: 9798868819049Purchase Link Publisher Website

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Designing Web Layouts with Bootstrap 5: Mastering Responsive Web Design with the Open Source CSS Framework

by Ajdin Imsirovic

11. Adding Interactivity to Your React Restaurant Website

11.1 Introduction

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.