Case Multicolumn

Bootstrap 5 Case: Multicolumn Layout

Multicolumn Layout with Bootstrap 5 Grid

With Bootstrap 5, creating responsive multicolumn layouts is straightforward using its powerful 12-column grid system.

Bootstrap provides a responsive, mobile-first flexbox-based grid system. The columns will automatically rearrange themselves based on screen size, stacking vertically on smaller screens unless specified otherwise.

Key Grid System Rules:

• Layouts typically start with a container: <div class="container"> (fixed-width, responsive) or <div class="container-fluid"> (full-width).
• Create rows within containers using <div class="row">. Rows are wrappers for columns.
• Use predefined column classes like .col-md-4, .col-lg-6, etc., to define the width of your columns. md refers to medium devices (tablets, ≥768px), lg to large devices (desktops, ≥992px). There are also sm (small, ≥576px), xl (extra large, ≥1200px), and xxl (extra extra large, ≥1400px). The plain .col class creates equal-width columns.
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns on medium devices and up would use three .col-md-4 columns.
• The numbers in the .col-*-* classes within a single .row should ideally add up to 12. If they exceed 12, columns will wrap. If less than 12, they won’t fill the row unless using auto-layout classes (.col).
• Content should be placed directly inside grid columns.
• Gutters (spacing between columns) can be controlled using gutter classes like g-*, gx-* (horizontal), gy-* (vertical) on the .row element (e.g., <div class="row g-3">).

The following example shows how to create four columns of equal width on medium devices and larger. On small devices, they will stack.

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 2: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 3: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">Column 4: Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</div>
    </div>
  </div>
</div>

<!--
  Practical Application: This is great for feature lists, product showcases, or team member sections.
  Learning Tip: Experiment by changing 'col-md-3' to 'col-sm-6 col-lg-3' to see how layouts adapt across different screen sizes.
  For example, 'col-sm-6 col-lg-3' would mean: 2 columns on small screens, 4 columns on large screens.
  Resource: Bootstrap Grid Documentation: https://getbootstrap.com/docs/5.3/layout/grid/
-->

Columns With Different Widths

You can also create columns of different widths within the same row.

The following example creates a three-column layout where the middle column is wider than the first and last columns on medium devices and up:

<div class="container mt-3">
  <div class="row">
    <div class="col-md-3">
      <div class="p-3 border bg-light">
        <h5>Sidebar/Info</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
    <div class="col-md-6">
      <div class="p-3 border bg-success-subtle">
        <h5>Main Content Area</h5>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
    </div>
    <div class="col-md-3">
      <div class="p-3 border bg-light">
        <h5>Ads/Related Links</h5>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
</div>

<!--
  Note: The classes .p-3, .border, .bg-light, .bg-success-subtle, and .mt-3 are Bootstrap utility classes for padding, border, background color, and margin.
  Common Obstacle: Ensuring the sum of column units within a row makes sense for the layout. While Bootstrap is flexible, planning your column spans helps create predictable layouts.
-->