7 equal columns in bootstrap

html

responsive-design

css

grid-system

byAnton Shumikhin·Dec 2, 2024

Create 7 equal columns in Bootstrap by adjusting its default 12-column system. We'll use CSS Flexbox to achieve equal widths. Use below code to generate a perfect 7-column layout:

<div class="d-flex flex-wrap">
  <div style="flex: 0 0 14.2857%;">Col 1</div>
  <div style="flex: 0 0 14.2857%;">Col 2</div>
  <div style="flex: 0 0 14.2857%;">Col 3</div>
  <div style="flex: 0 0 14.2857%;">Col 4</div>
  <div style="flex: 0 0 14.2857%;">Col 5</div>
  <div style="flex: 0 0 14.2857%;">Col 6</div>
  <div style="flex: 0 0 14.2857%;">Col 7</div>
</div>

Each div will occupy an equal portion of the block, thanks to flexbox and our friend, the flex property.

Detailed method: Bootstrap customization

Tweak Bootstrap's grid

Override Bootstrap's 12-column tradition and slide into a custom grid. Tweak @grid-columns parameter in LESS or SASS file:

@grid-columns: 7; // From a "baker's dozen" to a "lucky seven"

The Custom Builder is also at your service. Set column number to 7 and let it generate the required CSS.

Responsive columns: Every pixel counts

Conjure responsive design magic with CSS media queries for a pixel-perfect 7-column layout. Direct the .w-100 and .d-*-* classes to stack columns vertically on smaller screens - the perfect recipe for mobile compatibility.

Flexbox vs Floats: May the best box win

In the red corner, traditional floats, demanding clear fixes and width calculations. In the blue corner, Flexbox, the modern alternative celebrating container-item relationship. Bootstrap 4 is team Flexbox, ensuring powerful and flexible grids.

Visual tools for Bootstrap grids

Amplify your 7-column layout with contrasting borders or distinct background colors - a visual treat for your viewers. Tools like LayoutIt! also serve as your sidekick, creating responsive grids interactively.

Navigating through 7-column challenges

The calendar situation

A calendar layout demands custom mixins. Here's a LESS mixin to create a row:

.make-calendar-row() {
  .make-row();
  > div {
    .make-xs-column(1); // 7 days a week, 7 columns
  }
}

Gutters: The invisible heroes

Maintain space between columns using gutters. Padding each column emulates Bootstrap's gutters, ensuring uniformity even in a 7-column layout.

Achieving euphoria with equal heights

With variety of content lengths, maintaining equal column heights is a must. Flexbox properties - flex-grow, flex-shrink and flex-basis - to the rescue!

Border control and color theory

Borders accentuate the distinction between columns. Opt for a 1px or 2px border, and remember to adjust width calculations for the extra pixels. Apply different shades of a color to each column for a pleasing gradient effect.