All courses
Hamburger Icon
  • Labs icon Lab
  • Core Tech
Labs

Guided: Build a Responsive Layout with Bootstrap

In this Code Lab, you'll learn to build a responsive, mobile-first web page using Bootstrap by creating a project that includes core layout features like containers, rows, and cards. You'll structure the page with the Bootstrap grid system, apply utility classes for typography and visibility control, and incorporate Bootstrap's production-ready CSS via a CDN link. Throughout the lab, you'll also practice responsive design techniques such as hiding and showing elements across different screen sizes. By the end, you'll have the skills to confidently create clean, responsive layouts suitable for real-world websites and portfolios.

Get started Contact sales
Labs

Path Info

Level
Clock icon Beginner
Duration
Clock icon 41m
Published
Clock icon May 01, 2025

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    Description

    Build a Responsive Layout with Bootstrap

    Bootstrap is a powerful and feature-rich frontend framework that helps developers build responsive and mobile-first user interfaces quickly and efficiently.

    What You Need to Know

    🧑‍💻 To complete this codelab, learners should have a basic understanding of HTML and CSS, and be comfortable navigating the Bootstrap documentation to explore components, layout systems, and utility classes. ## What Will You Do:

    🛠️ In this hands-on codelab, you will:

    • Display a simple heading: “My Portfolio” using appropriate typography utilities;
    • Include the viewport <meta> tag in the <head> section to ensure proper responsive behavior;
    • Include Bootstrap CSS and JavaScript using the official CDN links.
    • Build a responsive layout using the Bootstrap Grid System;
    • Use visibility utility classes to show or hide elements based on screen size (e.g.,.d-none, .d-md-block);
    • Use typography utility classes to enhance readability and improve visual hierarchy (e.g., t.ext-center, .fw-bold, .text-muted).

    Project : Getting Started

    • The starter project includes a portfolio.html file. You can edit this file to complete the codelab ;

    • The project also includes an example.html file that serves as a guide ;

    • Whenever necessary, you can consult the Bootstrap Documentation as a reference.

  2. Challenge

    Step 1: Set Up The Project

    Your tasks

    We get started by setting it up the web projects by including :

    1. the viewport <meta> tag;
    2. a project's title
    3. the Bootstrap’s production-ready CSS via CDN links. > ### ❓ Why
    • You need to Include the <meta> name="viewport"> tag for proper responsive behavior on mobile devices;
    • The viewport meta tag tag is essential for making websites responsive — meaning they look and work well on all screen sizes, especially mobile devices.

    Example:

    The viewport meta tag tag tells the browser. <meta name="viewport" content="width=device-width, initial-scale=1">

    • width=device-width: The width of the page should match the width of the device's screen;
    • On a phone, that might be 375px;
    • On a desktop, 1440px, etc.

    🔤 Production-ready CSS CDN in Bootstrap refers to the precompiled, minified CSS files that are compressed to reduce file size and improve load times for responsiveness by default, consistent design language and cross-browser compatibility.

    What is a CDN?

    • CDN stands for Content Delivery Network. It's a network of distributed servers that deliver web content ;
    • CDNs are commonly used by websites and web apps to ensure content is delivered quickly and efficiently to users all over the world.

    When and how to use It?

    The main goals of a CDN are to:

    • improve performance by reducing latency and load times;
    • enhance reliability by distributing the load;
    • increase availability by mitigating issues like server failures or traffic spikes.

    That is why CDNs are used for production-ready deployments.

    📝 Example : Production-ready CSS in the <head> section of your HTML document:

    <link href="https://cdn ...">

    Learn more

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title> 
		<link href="https://cdn ...">
  </head>
  [...]
</html>

  3. Challenge

    Step 2: Set Up the Portfolio Header

    Your tasks

    The next steps include:

    1. adding a page title <h1> in the <header>section
    2. using Typography classes to improve readability;

    🔤 Bootstrap Typography Overview

    Bootstrap provides a set of utility Typography classes to style and align text easily and consistently. These include font sizes, weights, alignment, line height, colors, and more.

    Example with the .leadclass to make the paragraph stand out. .lead example Read Documentation

    📝 The following example uses:

    • .text-center: to center text horizontally;
    • .display-5 to apply a large font size to grab attention;
    • .lead: to make the paragraph stand out an increased font size and lighter weight;
    <div class="container text-center">
   <h2 class="display-5">My Portfolio</h2>
   <p class="lead">Welcome to my portfolio. Here you'll find projects that showcase my skills and creativity.</p>
 </div>

    Read Documentation:

  4. Challenge

    Step 3: Create The Basic Page Structure

    Your tasks

    The next steps include:

    1. setting up the basic page structure using ready-to-use responsive components : Card Components;
    2. creating a responsive layout using the Grid System. 🔤 Bootstrap: Ready-to-Use Responsive Components

    Bootstrap provides pre-built, responsive UI components that adjust automatically to different screen sizes (mobile, tablet, desktop) using its mobile-first design strategy and responsive grid system.

    In this codelab, we use Card Components.

    Card Components

    ❓ Boostrap Grid System :

    • To make your layout responsive, insert your content inside a <div>with the class .container(or .container-fluid). This sets up a flexible grid system that automatically adapts the layout to different screen sizes;
    • Inside the container, use a <div class="row">to create a horizontal group of columns.
    • The.row class ensures that columns are aligned properly and that spacing between them is managed automatically.

  5. Challenge

    Step 4: Implement a Responsive Layout Using The Bootstrap Grid System

    Your tasks

    1. implementing a responsive layout using the Grid System and the breakpoints;
    2. using the Mobile-first approach to design for small screens first and progressively enhance the layout for larger screens;
    3. testing the layout responsiveness in the browser. > ### 🔤 Breakpoint explained
    • Breakpoint are specific screen width where the layout or component behavior changes to provide the best user experience across different devices (mobile, tablet, desktop, etc.);
    • Bootstrap uses CSS media queries tied to these breakpoints;
    • Learn More: Responsive breakpoints <div class="col-12 col-sm-6 col-lg-3">...</div>

    📝 This example uses:

    • col-12for full width on extra small devices;
    • col-sm-6 for half-width on medium devices ;
    • col-lg-3 for one-quarter width on large screens (adjust as needed).

    This approach ensures that on small screens, the cards stack vertically, while on larger screens, they arrange into rows.

    On large screens:

    • 3 cards visibles
    • 2 cards on top use half-width, arranged into rows, with .col-sm-6 desktop breakpoint

    On smallers screens:

    • 2 cards visibles using full width with .col-12, stacked vertically;
    • 1 card hidden with .d-noneand .d-sm-block
    • small screen and visibility classes

    Learn More: All breakpoints reference Bootstrap uses a mobile-first approach.

    ❓ Bootstrap’s Mobile-First Approach:

    • by designing for smaller screens (like smartphones).
    • Then, we gradually enhance the layout and features for larger screens (like tablets and desktops) using .col classes;
    • This sets up a flexible grid system that automatically adapts the layout to different screen sizes.

    This is to ensure the site is accessible and usable on all devices, starting with the most constrained ones.

  6. Challenge

    Step 5: Use Visibility Classes to Control Content Appearance and Hide Elements

    ❓

    Why hiding elements on mobile devices?

    • To improve readability, usability, user experience and visual balance;
    • To hide non-essential elements on mobile screens with limited space;
    • For faster mobile-friendly development;
    • To Help users focus on key content;
    • To Learn More 📝 Examples with Display properties:
    • This example uses classes.d-none to hide elements on all devices:

    <div class="d-none">Hidden on all devices</div>

    • This example uses classes.d-none .d-sm-block to hide elements on small devices only (xs):

    <div class="d-none d-sm-block">Hidden on extra-small devices only</div>

    Read documentation

  7. Challenge

    Step 6: Use Typography Utility Classes

    ❓

    Why using Typography classes?

    • typography classes are also used to style and format text consistently and responsively,
    • To Learn More The following example uses classes:
    • .lead enlarges the text to make the paragraph stand out;
    • .text-body-secondaryto give the element a muted or less prominent appearance than regular body text or simply for color/style preferences;
    • .py-2 and mb-4adds vertical padding and spacing with Bootstrap spacing utilities, mb-4: stands for "margin-bottom", spacing utility class used to apply bottom margin to an element
    • p = padding
    • y= vertical (top and bottom)
    • value(e.g: 2) = scale (0.5rem).

    <p class="lead text-body-secondary py-2 mb-4">...</p>

    lead, typography and spacing classes

    Read Documentation:

Sandy Ludosky - Labs - Sandy L.
Author
Sandy Ludosky

Sandy is a passionate and experienced interface designer, developer, and digital entrepreneur hailing from Toronto, in Ontario, Canada. She specializes in front-end development with HTML, CSS, CSS3 Animation, Javascript, JQuery, Sass, and Less.

What's a lab?

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.
Ready to get started?
View individual plans View team plans