Web Development Fundamentals — Part 6: Bootstrap — Responsive Layouts Made Easy

Posted Jun 19, 2025

By Bengt Hedberg

4 min read

Series Overview

This is an 8-part series covering the core technologies of web development:

HTML — The Structure of the Web — Elements, attributes, block vs inline, and document structure
CSS — Styling the Web — Selectors, properties, the box model, and layout basics
JavaScript — Adding Interactivity — Variables, data types, functions, arrays, and control flow
The DOM — Connecting JavaScript to HTML — Selecting elements, changing styles, and modifying attributes
jQuery — Write Less, Do More — Selectors, events, and DOM manipulation with jQuery
Bootstrap — Responsive Layouts Made Easy (this article) — Grid system, responsive breakpoints, and rapid prototyping
HTTP — How the Web Communicates — Requests, responses, methods, and status codes
React — Building Modern User Interfaces — Components, JSX, props, state, hooks, and thinking in React

What Is Bootstrap?

Bootstrap is a powerful front-end framework for faster and easier web development. It includes HTML and CSS-based design templates for creating common UI components — forms, buttons, navigations, dropdowns, alerts, modals, tabs, accordions, carousels, tooltips, and more.

Bootstrap gives you the ability to create flexible and responsive web layouts with much less effort than writing CSS from scratch.

Setting Up Bootstrap

The quickest way to get started is using a CDN. Add these links to your HTML:

  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bootstrap Template</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet"
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
          crossorigin="anonymous">
</head>
<body>
    <h1>Hello, world!</h1>

    <!-- jQuery, Popper.js, Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</body>
</html>

Bootstrap’s JavaScript plugins require jQuery and Popper.js — include them in the correct order.

Alternatively, download the files and host them locally.

The Grid System

Bootstrap’s grid system is its most powerful feature. It provides a responsive, mobile-first, 12-column layout system that scales based on device width.

How It Works

The grid uses three building blocks:

Container (.container or .container-fluid) — centres and pads your content
Row (.row) — a horizontal group of columns
Columns (.col-*) — the actual content areas that add up to 12

Breakpoints

Bootstrap 4 defines five responsive breakpoints:

Breakpoint	Class Prefix	Min Width	Target
Extra small	`.col-`	< 576px	Mobile (portrait)
Small	`.col-sm-`	>= 576px	Mobile (landscape)
Medium	`.col-md-`	>= 768px	Tablets
Large	`.col-lg-`	>= 992px	Laptops
Extra large	`.col-xl-`	>= 1200px	Desktops

Classes apply upward — .col-md-6 affects medium screens and everything larger, unless overridden by .col-lg-* or .col-xl-*.

Two-Column Layouts

  
<div class="container">
    <!-- Equal columns -->
    <div class="row">
        <div class="col-md-6">Column left</div>
        <div class="col-md-6">Column right</div>
    </div>

    <!-- 1:2 ratio -->
    <div class="row">
        <div class="col-md-4">Sidebar</div>
        <div class="col-md-8">Main content</div>
    </div>

    <!-- 1:3 ratio -->
    <div class="row">
        <div class="col-md-3">Sidebar</div>
        <div class="col-md-9">Main content</div>
    </div>
</div>

Column numbers within a row should add up to 12.

Responsive Multi-Column Layout

This is where Bootstrap really shines. A single set of classes can create different layouts on different screen sizes:

  
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 1</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 2</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 3</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 4</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 5</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 6</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 7</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 8</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 9</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 10</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 11</p></div>
        <div class="col-lg-4 col-md-6 col-xl-3"><p>Box 12</p></div>
    </div>
</div>

This creates:

Extra large screens (desktops): 4 boxes per row (col-xl-3 = 12/3 = 4 columns)
Large screens (laptops): 3 boxes per row (col-lg-4 = 12/4 = 3 columns)
Medium screens (tablets): 2 boxes per row (col-md-6 = 12/6 = 2 columns)
Small screens (mobile): 1 box per row (default full-width stacking)

No .col- or .col-sm- classes are needed for mobile — columns automatically stack vertically at small widths.

Grid Rules

Content must be placed inside columns (.col and .col-*)
Only columns may be immediate children of rows (.row)
Rows should be placed inside a .container (fixed-width) or .container-fluid (full-width)
Each column has 15px padding on each side (30px gutter total)
Grids are nestable — you can put a .row inside a column

Container Types

Class	Behaviour
`.container`	Fixed max-width that changes at each breakpoint (540px, 720px, 960px, 1140px)
`.container-fluid`	Always 100% width

What’s Next?

Bootstrap handles the visual layer of web applications, but there’s one more fundamental topic every web developer needs to understand: how the browser and server actually communicate. In Part 7, we’ll cover the HTTP protocol — requests, responses, methods, and status codes.

References

Web Development

This post is licensed under CC BY 4.0 by the author.