Create a responsive three‑column layout with Bootstrap grid offsets

Solution Overview

Use Bootstrap’s responsive grid with offset utilities to build a three‑column layout that stacks vertically on medium screens and shifts left on large viewports. The answer is a ready‑to‑copy HTML snippet that you can open in any browser.

Worked Example

Place the following code in an HTML file and load it in a browser. No special permissions are required; just ensure the Bootstrap CSS is loaded before any custom styles.

<!-- HTML file -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-4 col-lg-3 offset-lg-1">Content</div>
    <div class="col-md-4 col-lg-3">Sidebar</div>
    <div class="col-md-4 col-lg-3">Main</div>
  </div>
</div>

How the Grid Works

The outer .container sets a max‑width that centers the content. Inside, .row creates a flexbox container. Each column uses col-md-4 to take 4 of the 12 columns on medium (≥768 px) and larger screens, causing three equal columns. On large screens (≥992 px) the classes change: col-lg-3 gives each column 3 columns width, and offset-lg-1 pushes the first column right by one column, creating a left margin. When the viewport drops below the medium breakpoint, the col-md-4 forces each element to occupy the full width, so they stack vertically.

Limits and Common Mistakes

• The grid only functions when Bootstrap’s CSS is present; missing or overridden CSS will cause the layout to fall back to normal block flow.
• Column counts inside a single .row must not exceed 12; exceeding this wraps to a new line unintentionally.
• Forgetting the .row wrapper removes the flex context, so column classes have no effect.
• Using fixed‑width containers (e.g., width: 800px) alongside the grid can break the responsive behavior.
• Bootstrap’s grid relies on flexbox; Internet Explorer 10 and earlier lack full flexbox support and will not render the layout correctly.

Verification Steps

1. Open the page in a browser and resize the viewport. Observe that at widths ≥992 px the three columns appear with a left margin on the first column, while between 768 px and 991 px they sit flush left, and below 768 px they stack.
2. Open DevTools, inspect one of the column elements, and check the computed flex-basis value; it should match the expected fraction (e.g., 25 % for col-lg-3).
3. Look at the console for any CSS loading errors; a 404 on the Bootstrap link will cause the layout to display as plain blocks.