7 equal columns in bootstrap

Html Css Twitter Bootstrap Twitter Bootstrap-3

Html Problem Overview

I was wondering if anyone could explain how I can get 7 equal columns in bootstrap? I am trying to make a calendar. This code seems to do 5:

div class="row">
    <div class="col-md-2 col-md-offset-1"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>

My main content has the following class, so I would like the 7 columns to sit within this:

> col-lg-12

Can anyone explain if this is possible, or if I have to stick to even numbers instead?

Html Solutions

Solution 1 - Html

Well, IMO you probably need to override the width of the columns by using CSS3 @media query.

Here is my attempt to create a 7-col grid system:

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

/**
 *  The following is not really needed in this case
 *  Only to demonstrate the usage of @media for large screens
 */    
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

The value of width comes from:

width = 100% / 7 column-number = 14.285714285714285714285714285714%

###WORKING DEMO - (jsbin) Run the code snippet and click on the "Full page".

.col-md-1 {
  background-color: gold;
}

@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}


@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}


@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
    *width: 14.285714285714285714285714285714%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

Other options

Also, you could build your own 7-columns version of Twitter Bootstrap by using the Custom Builder (Changing the @grid-columns, ...).

If you are using less compiler, you could download the less version of Twitter Bootstrap (from Github) and edit the variables.less file instead.

Solution 2 - Html

An almost equal, quick solution. Without custom css.

.cell {
  border: 1px solid black;
  text-align: center;
  flex-basis: 33.3333%;
  flex-grow: 0;
  flex-shrink: 0;
  -webkit-box-flex: 0;
  -webkit-tap-highlight-color: #0000;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
  <div class="col-md-4">
    <div class="row">
    	<div class="col-md-4"></div> <!-- this column empty -->
    	<div class="col-md-4 cell"> 1 </div>
    	<div class="col-md-4 cell"> 2 </div>
    </div>
  </div>
  <div class="col-md-8">
    <div class="row">
    	<div class="col-md-2 cell"> 3 </div>
    	<div class="col-md-2 cell"> 4 </div>
    	<div class="col-md-2 cell"> 5 </div>
    	<div class="col-md-2 cell"> 6 </div>
    	<div class="col-md-2 cell"> 7 </div>
    	<div class="col-md-2"></div> <!-- this column empty -->
    </div>
  </div>
</div>

Solution 3 - Html

Upgrading to Bootstrap 4 is probably a good option.

Comes with a class col for equal width columns

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width

Tips: If you want to break columns in new lines when screen is lower than md, add this div after each column:

<div class='w-100 d-md-none'></div>

.w-100 breaks to a new line and .d-md-done hides the div on screens wider than md

So it would give:

<div class="row">
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
  <div class='w-100 d-md-none'></div>
  <div class="col"></div>
</div>

Solution 4 - Html

I wanted a more precise solution to this, so I made a special row/col class set (semantically tied to the concept of a calendar).

This rips off the way Bootstrap builds the base grid (in grid-framework.less). It retains the xs, sm, md, and lg classes for customizing the grid at different viewports.

Note: this just includes the grid styling; you'll still have to write the rest to make it actually look like a calendar.

The Markup

<div class="row">
	<div class="col-xs-7">
		<div class="calendar">
			<div class="calendar-row">
				<div class="calendar-xs-1">Sunday</div>
				<div class="calendar-xs-1">Monday</div>
				<div class="calendar-xs-1">Tuesday</div>
				<div class="calendar-xs-1">Wednesday</div>
				<div class="calendar-xs-1">Thursday</div>
				<div class="calendar-xs-1">Friday</div>
				<div class="calendar-xs-1">Saturday</div>
			</div>
		</div>
	</div>
	<div class="col-xs-5">
		This container intentionally left blank.
	</div>
</div>

The `.less`

/*
 * Calendar grid
 */

@calendar-columns:		7;
@calendar-gutter-width:	0px;

.make-calendar-columns() {
  // Common styles for all sizes of calendar columns, widths 1-12
  .cal(@index) when (@index = 1) { // initial
    @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general; "=<" isn't a typo
    @item: ~".calendar-xs-@{index}, .calendar-sm-@{index}, .calendar-md-@{index}, .calendar-lg-@{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      // Inner gutter via padding
      padding-left:  (@calendar-gutter-width / 2);
      padding-right: (@calendar-gutter-width / 2);
    }
  }
  .cal(1); // kickstart it
}
.float-calendar-columns(@class) {
  .cal(@index) when (@index = 1) { // initial
    @item: ~".calendar-@{class}-@{index}";
    .cal((@index + 1), @item);
  }
  .cal(@index, @list) when (@index =< @calendar-columns) { // general
    @item: ~".calendar-@{class}-@{index}";
    .cal((@index + 1), ~"@{list}, @{item}");
  }
  .cal(@index, @list) when (@index > @calendar-columns) { // terminal
    @{list} {
      float: left;
    }
  }
  .cal(1); // kickstart it
}

.calc-calendar-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .calendar-@{class}-@{index} {
    width: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .calendar-@{class}-push-@{index} {
    left: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .calendar-@{class}-push-0 {
    left: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .calendar-@{class}-pull-@{index} {
    right: percentage((@index / @calendar-columns));
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .calendar-@{class}-pull-0 {
    right: auto;
  }
}
.calc-calendar-column(@index, @class, @type) when (@type = offset) {
  .calendar-@{class}-offset-@{index} {
    margin-left: percentage((@index / @calendar-columns));
  }
}

// Basic looping in LESS
.loop-calendar-columns(@index, @class, @type) when (@index >= 0) {
  .calc-calendar-column(@index, @class, @type);
  // next iteration
  .loop-calendar-columns((@index - 1), @class, @type);
}

// Create grid for specific class
.make-calendar(@class) {
  .float-calendar-columns(@class);
  .loop-calendar-columns(@grid-columns, @class, width);
  .loop-calendar-columns(@grid-columns, @class, pull);
  .loop-calendar-columns(@grid-columns, @class, push);
  .loop-calendar-columns(@grid-columns, @class, offset);
}


// Row
//
// Rows contain and clear the floats of your columns.

.calendar-row {
	.make-row(@calendar-gutter-width);
}


// Columns
//
// Common styles for small and large grid columns

.make-calendar-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-calendar(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-calendar(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-calendar(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-calendar(lg);
}

Solution 5 - Html

Following Antony Gibbs answer, you can simply use Boostrap 4 "col" css class:

<div class="row">
  <div class="col">Mon</div>
  <div class="col">Tue</div>
  <div class="col">Wen</div>
  <div class="col">Thu</div>
  <div class="col">Fri</div>
  <div class="col">Sat</div>
  <div class="col">Sun</div>
</div>

You don't necessarily need Bootstrap 4, you can always simply copy the css declarations from BS4 into your own style-sheet.

/* Equal width */
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

/* Add gutters */
.col {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

This has the advantage of being BS4 ready once you migrate and it also gives the possibility of using 5, 7, 9 or 11 columns.

https://getbootstrap.com/docs/4.0/layout/grid/#equal-width

Solution 6 - Html

@Brad your answer was brilliant and elegant, I modified it slightly for those using sass. Please note the comments in the code are not mine they are simply those from the github bootstrap code base. I left them intact for reference.

HTML

<div class="row">
    <div class="col-xs-12">
        <div class="calendar">
            <div class="calendar-row header">
                <div class="calendar-xs-1">Sunday</div>
                <div class="calendar-xs-1">Monday</div>
                <div class="calendar-xs-1">Tuesday</div>
                <div class="calendar-xs-1">Wednesday</div>
                <div class="calendar-xs-1">Thursday</div>
                <div class="calendar-xs-1">Friday</div>
                <div class="calendar-xs-1">Saturday</div>
             </div>
        </div>
    </div>
 </div>

SASS

// Calendar grid generation
//

$calendar-columns: 7;
$calendar-gutter-width: $grid-gutter-width;

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin make-calendar-columns() {
  $list: '';
  $i: 1;
  $list: ".calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
  @for $i from (1 + 1) through $calendar-columns {
    $list: "#{$list}, .calendar-xs-#{$i}, .calendar-sm-#{$i}, .calendar-md-#{$i}, .calendar-lg-#{$i}";
  }
  #{$list} {
    position: relative;
    // Prevent columns from collapsing when empty
    min-height: 1px;
    // Inner gutter via padding
    padding-left:  ($calendar-gutter-width / 2);
    padding-right: ($calendar-gutter-width / 2);
  }
}


// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin float-calendar-columns($class) {
  $list: '';
  $i: 1;
  $list: ".calendar-#{$class}-#{$i}";
  @for $i from (1 + 1) through $calendar-columns {
    $list: "#{$list}, .calendar-#{$class}-#{$i}";
  }
  #{$list} {
    float: left;
  }
}


@mixin calc-calendar-column($index, $class, $type) {
  @if ($type == width) and ($index > 0) {
    .calendar-#{$class}-#{$index} {
      width: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == push) and ($index > 0) {
    .calendar-#{$class}-push-#{$index} {
      left: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == push) and ($index == 0) {
    .calendar-#{$class}-push-0 {
      left: auto;
    }
  }
  @if ($type == pull) and ($index > 0) {
    .calendar-#{$class}-pull-#{$index} {
      right: percentage(($index / $calendar-columns));
    }
  }
  @if ($type == pull) and ($index == 0) {
    .calendar-#{$class}-pull-0 {
      right: auto;
    }
  }
  @if ($type == offset) {
    .calendar-#{$class}-offset-#{$index} {
      margin-left: percentage(($index / $calendar-columns));
    }
  }
}

// [converter] This is defined recursively in LESS, but Sass supports real loops
@mixin loop-calendar-columns($calendar-columns, $class, $type) {
  @for $i from 0 through $calendar-columns {
    @include calc-calendar-column($i, $class, $type);
  }
}


// Create grid for specific class
@mixin make-calendar($class) {
  @include float-calendar-columns($class);
  @include loop-calendar-columns($calendar-columns, $class, width);
  @include loop-calendar-columns($calendar-columns, $class, pull);
  @include loop-calendar-columns($calendar-columns, $class, push);
  @include loop-calendar-columns($calendar-columns, $class, offset);
}

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  @include make-row($calendar-gutter-width);
}


// Columns
//
// Common styles for small and large grid columns

@include make-calendar-columns();


// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

@include make-calendar(xs);


// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: $screen-sm-min) {
  @include make-calendar(sm);
}


// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: $screen-md-min) {
  @include make-calendar(md);
}


// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: $screen-lg-min) {
  @include make-calendar(lg);
}

Solution 7 - Html

Your problem here is that you have an odd number of columns and thus you cannot achieve symmetry. Because every column is one day of the week, you could say that all weekdays have the col-md-2 class and the other two have the col-md-1 class.

This approach will work based on the assumption that Saturday and Sunday need less space, but I don't know if this fits in your scenario.

<div class="row">
    <div class="col-md-2">Mon</div>
    <div class="col-md-2">Tue</div>
    <div class="col-md-2">Wen</div>
    <div class="col-md-2">Thu</div>
    <div class="col-md-2">Fri</div>
    <div class="col-md-1">Sat</div>
    <div class="col-md-1">Sun</div>
</div>
<div class="row">
    <div class="col-md-2">1</div>
    <div class="col-md-2">2</div>
    <div class="col-md-2">3</div>
    <div class="col-md-2">4</div>
    <div class="col-md-2">5</div>
    <div class="col-md-1">6</div>
    <div class="col-md-1">7</div>
</div>

A demo is here

Solution 8 - Html

For the question "I was wondering if anyone could explain how I can get 7 equal columns in bootstrap?" The short answer is NO, bootstrap provide a layout with 12 division regarding the width.

It will work well with any 12/n = Int. but out of that it simply can't.

*i.e. 12/3 = 4, so it can do a 3 items division, that's ok. It works with 1, 2, 3, 4, 6 and 12, but having 5, 7, 8, 9, 10 or 11 as divisors causes this headaches, because 12/ any of these equals a Float.

You'll need custom code to reach that, thus you can either fight against overrides trying to address this inside bootstrap classes or simply create your own styles for that. Flex does a great job in creating responsive elements, check the following snippets:

.flexrow {
    display: flex;
    flex-flow: row wrap;
}
 
.flexrow.row-7-el > .element  {
    flex: 0 1 calc(100%/7);
    max-width: calc(100%/7);
}

.outline {
  outline: auto green;
}
.element {
  text-align: center;
}

<div class="flexrow row-7-el">
    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>
</div>

if you want to give some space between elements you can simply add this space to the calcs and on elements as margin like this:

.flexrow {
    display: flex;
    flex-flow: row wrap;
}
 
.flexrow.row-7-el > .element  {
    flex: 0 1 calc(100%/7  - 16px);
    max-width: calc(100%/7  - 16px);
}
.element {
  margin: 8px;
  text-align: center;
}

.outline {
  outline: auto green;
}

<div class="flexrow row-7-el">
    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>

    <div class="element outline">item</div>
</div>

And of course, you can set this:

.flexrow.row-7-el > .element  {
    flex: 0 1 calc(100%/7);
    max-width: calc(100%/7);
}

inside media queries and add semantic classnames to it if you want different behavior depending on the viewport width, such:

@media(min-width: 360px) {
  .flexrow.xs-row-7-el > .element  {
        flex: 0 1 calc(100%/7);
        max-width: calc(100%/7);
  }
}

this way you can state something like

<div class="flexrow row-3-el xs-row-4-el md-row-6-el">

You can check a full grid system with this and another approach here in which I created those classes for equal width items inside a given row (as you asked) and percentage columns as well. (Of course it should be better to use mixins, don't blame me, I'll refactor it somewhere in a future, or not...)

EDIT: I've just remembered there were something called offset that allows you to deal with those situations in Bootstrap, check the doc to see if this can help you as well.

Solution 9 - Html

You need to divide a 12-column bootstrap layout into 7 equal parts. If you go around changing the css layout, you will face the same problems with say breaking a screen into 13 equal parts with a 14-column layout.

Besides, changing the column layout will also make you do a lot of redesign. So, I would suggest you use table instead. Like this

<div class='container-fuid'>
 <table class='table'> <!-- add style="table-layout:fixed;" so that table do not vary in width due to text size variations -->
  <tr>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
    <td>Content</td>
  </tr>
 </table>
</div>

Has the same effect as the cols, buts its faster for case-by-case basis where you need arbitary number of equal blocks to be printed on the screen programmatic by PHP or otherwise.

Like in a process flow display, the following script can give idea of how one can break a standard 12-column screen into as many columns/display units as you want :

$cols = 15;     /* arbitary number of columns */

/* generate data array */

$data_array = array();

for($i=0 ; $i<$cols ; $i++){
        $data_array[] = 'Value : '.$i ;
}

/* use the array to get the screen in that many columns */

echo "<div class='container'>";
echo "<table class='table'>";
echo "<tr>";
foreach($data_array as $key => $value){
        echo "<td>".$value."</td>";
}
echo "</tr>";
echo "</table>";
echo "</div>";

Solution 10 - Html

I solved it in a simple way. i just used justified button group of bootstrap, just 7 justified buttons but instead of the actual button i used span in the buttons container div and neutralized the unnecessary classes. it looks like this (it was for a weekly calendar too)

<div class="col-xs-12">
  <div class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">אי</span>
        <span class="day">26/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">בי</span>
        <span class="day">27/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">גי</span>
        <span class="day">28/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">די</span>
        <span class="day">29/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding nocurs">
        <span class="day">הי</span>
        <span class="day">30/06</span>
        <div class="status closed">מלה</div>
      </div>
    </div>
    <div class="btn-group day" role="group">
      <div class="btn btn-default nopadding">
        <span class="day">שי</span>
        <span class="day">31/06</span>
        <div class="status">פנוי</div>
      </div>
    </div>
  </div>
</div>

Solution 11 - Html

Just in case you want a 2/7 or 3/7 column and you are using LESS CSS for your development. Reference: https://gist.github.com/kanakiyajay/15e4fc98248956614643

HTML

<div class="seven-cols">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
  <div class="col-md-3"></div>
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

LESS

/* CSS for 7 column responsive
-------------------------------------------------- */
@media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1,
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2,
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 100%*(1/7);
    *width: 100%*(1/7);
  }
  .seven-cols .col-md-2,
  .seven-cols .col-sm-2,
  .seven-cols .col-lg-2 {
    width: 100%*(2/7);
    *width: 100%*(2/7);
  }
  .seven-cols .col-md-3,
  .seven-cols .col-sm-3,
  .seven-cols .col-lg-3 {
    width: 100%*(3/7);
    *width: 100%*(3/7);
  }
}

Solution 12 - Html

If you don't have to use 100% of the width, you can split your column into 9 equal pieces and use only those inside:

<div class="row" style="border: solid 1px black; height: 200px;">
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4 col-md-offset-4" id="Col1" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col2" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col3" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col4" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col5" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="row">
            <div class="col-md-4" id="Col6" style="border: solid 1px black; height: 200px;"></div>
            <div class="col-md-4" id="Col7" style="border: solid 1px black; height: 200px;"></div>
        </div>
    </div>
</div>

Solution 13 - Html

You're already using Bootstrap, so if you are comfortable with SCSS, you can leverage one of Bootstrap's existing mixins for creating a custom 7-column grid system with classes that are scoped to a specific container.

my_custom_app.scss:

//include bootstrap SCSS (for variables and mixins)
@import '../node_modules/bootstrap/scss/bootstrap';

//overwrite 2 bootstrap variables
$grid-columns: 7;
$grid-gutter-width: 4px;

//define your custom container
#task_week {
    //call bootstrap's mixin
    @include make-grid-columns();
}

When you compile my_custom_app.scss, the mixin will auto-generate all the col-x classes you need in the resulting CSS file, which I've included here in it's entirety for those faint of heart:

    #task_week {}
  #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col-8, #task_week .col-9, #task_week .col-10, #task_week .col-11, #task_week .col-12, #task_week .col,
  #task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm-8, #task_week .col-sm-9, #task_week .col-sm-10, #task_week .col-sm-11, #task_week .col-sm-12, #task_week .col-sm,
  #task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md-8, #task_week .col-md-9, #task_week .col-md-10, #task_week .col-md-11, #task_week .col-md-12, #task_week .col-md,
  #task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg-8, #task_week .col-lg-9, #task_week .col-lg-10, #task_week .col-lg-11, #task_week .col-lg-12, #task_week .col-lg,
  #task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl-8, #task_week .col-xl-9, #task_week .col-xl-10, #task_week .col-xl-11, #task_week .col-xl-12, #task_week .col-xl,
  #task_week .col-xl-auto, #task_week .col-1, #task_week .col-2, #task_week .col-3, #task_week .col-4, #task_week .col-5, #task_week .col-6, #task_week .col-7, #task_week .col,
  #task_week .col-auto, #task_week .col-sm-1, #task_week .col-sm-2, #task_week .col-sm-3, #task_week .col-sm-4, #task_week .col-sm-5, #task_week .col-sm-6, #task_week .col-sm-7, #task_week .col-sm,
  #task_week .col-sm-auto, #task_week .col-md-1, #task_week .col-md-2, #task_week .col-md-3, #task_week .col-md-4, #task_week .col-md-5, #task_week .col-md-6, #task_week .col-md-7, #task_week .col-md,
  #task_week .col-md-auto, #task_week .col-lg-1, #task_week .col-lg-2, #task_week .col-lg-3, #task_week .col-lg-4, #task_week .col-lg-5, #task_week .col-lg-6, #task_week .col-lg-7, #task_week .col-lg,
  #task_week .col-lg-auto, #task_week .col-xl-1, #task_week .col-xl-2, #task_week .col-xl-3, #task_week .col-xl-4, #task_week .col-xl-5, #task_week .col-xl-6, #task_week .col-xl-7, #task_week .col-xl,
  #task_week .col-xl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 2px;
    padding-left: 2px; }
  #task_week .col {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%; }
  #task_week .col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: none; }
  #task_week .col-1 {
    flex: 0 0 14.2857142857%;
    max-width: 14.2857142857%; }
  #task_week .col-2 {
    flex: 0 0 28.5714285714%;
    max-width: 28.5714285714%; }
  #task_week .col-3 {
    flex: 0 0 42.8571428571%;
    max-width: 42.8571428571%; }
  #task_week .col-4 {
    flex: 0 0 57.1428571429%;
    max-width: 57.1428571429%; }
  #task_week .col-5 {
    flex: 0 0 71.4285714286%;
    max-width: 71.4285714286%; }
  #task_week .col-6 {
    flex: 0 0 85.7142857143%;
    max-width: 85.7142857143%; }
  #task_week .col-7 {
    flex: 0 0 100%;
    max-width: 100%; }
  #task_week .order-first {
    order: -1; }
  #task_week .order-last {
    order: 8; }
  #task_week .order-0 {
    order: 0; }
  #task_week .order-1 {
    order: 1; }
  #task_week .order-2 {
    order: 2; }
  #task_week .order-3 {
    order: 3; }
  #task_week .order-4 {
    order: 4; }
  #task_week .order-5 {
    order: 5; }
  #task_week .order-6 {
    order: 6; }
  #task_week .order-7 {
    order: 7; }
  #task_week .offset-1 {
    margin-left: 14.2857142857%; }
  #task_week .offset-2 {
    margin-left: 28.5714285714%; }
  #task_week .offset-3 {
    margin-left: 42.8571428571%; }
  #task_week .offset-4 {
    margin-left: 57.1428571429%; }
  #task_week .offset-5 {
    margin-left: 71.4285714286%; }
  #task_week .offset-6 {
    margin-left: 85.7142857143%; }
  @media (min-width: 576px) {
    #task_week .col-sm {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%; }
    #task_week .col-sm-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none; }
    #task_week .col-sm-1 {
      flex: 0 0 14.2857142857%;
      max-width: 14.2857142857%; }
    #task_week .col-sm-2 {
      flex: 0 0 28.5714285714%;
      max-width: 28.5714285714%; }
    #task_week .col-sm-3 {
      flex: 0 0 42.8571428571%;
      max-width: 42.8571428571%; }
    #task_week .col-sm-4 {
      flex: 0 0 57.1428571429%;
      max-width: 57.1428571429%; }
    #task_week .col-sm-5 {
      flex: 0 0 71.4285714286%;
      max-width: 71.4285714286%; }
    #task_week .col-sm-6 {
      flex: 0 0 85.7142857143%;
      max-width: 85.7142857143%; }
    #task_week .col-sm-7 {
      flex: 0 0 100%;
      max-width: 100%; }
    #task_week .order-sm-first {
      order: -1; }
    #task_week .order-sm-last {
      order: 8; }
    #task_week .order-sm-0 {
      order: 0; }
    #task_week .order-sm-1 {
      order: 1; }
    #task_week .order-sm-2 {
      order: 2; }
    #task_week .order-sm-3 {
      order: 3; }
    #task_week .order-sm-4 {
      order: 4; }
    #task_week .order-sm-5 {
      order: 5; }
    #task_week .order-sm-6 {
      order: 6; }
    #task_week .order-sm-7 {
      order: 7; }
    #task_week .offset-sm-0 {
      margin-left: 0; }
    #task_week .offset-sm-1 {
      margin-left: 14.2857142857%; }
    #task_week .offset-sm-2 {
      margin-left: 28.5714285714%; }
    #task_week .offset-sm-3 {
      margin-left: 42.8571428571%; }
    #task_week .offset-sm-4 {
      margin-left: 57.1428571429%; }
    #task_week .offset-sm-5 {
      margin-left: 71.4285714286%; }
    #task_week .offset-sm-6 {
      margin-left: 85.7142857143%; } }
  @media (min-width: 768px) {
    #task_week .col-md {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%; }
    #task_week .col-md-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none; }
    #task_week .col-md-1 {
      flex: 0 0 14.2857142857%;
      max-width: 14.2857142857%; }
    #task_week .col-md-2 {
      flex: 0 0 28.5714285714%;
      max-width: 28.5714285714%; }
    #task_week .col-md-3 {
      flex: 0 0 42.8571428571%;
      max-width: 42.8571428571%; }
    #task_week .col-md-4 {
      flex: 0 0 57.1428571429%;
      max-width: 57.1428571429%; }
    #task_week .col-md-5 {
      flex: 0 0 71.4285714286%;
      max-width: 71.4285714286%; }
    #task_week .col-md-6 {
      flex: 0 0 85.7142857143%;
      max-width: 85.7142857143%; }
    #task_week .col-md-7 {
      flex: 0 0 100%;
      max-width: 100%; }
    #task_week .order-md-first {
      order: -1; }
    #task_week .order-md-last {
      order: 8; }
    #task_week .order-md-0 {
      order: 0; }
    #task_week .order-md-1 {
      order: 1; }
    #task_week .order-md-2 {
      order: 2; }
    #task_week .order-md-3 {
      order: 3; }
    #task_week .order-md-4 {
      order: 4; }
    #task_week .order-md-5 {
      order: 5; }
    #task_week .order-md-6 {
      order: 6; }
    #task_week .order-md-7 {
      order: 7; }
    #task_week .offset-md-0 {
      margin-left: 0; }
    #task_week .offset-md-1 {
      margin-left: 14.2857142857%; }
    #task_week .offset-md-2 {
      margin-left: 28.5714285714%; }
    #task_week .offset-md-3 {
      margin-left: 42.8571428571%; }
    #task_week .offset-md-4 {
      margin-left: 57.1428571429%; }
    #task_week .offset-md-5 {
      margin-left: 71.4285714286%; }
    #task_week .offset-md-6 {
      margin-left: 85.7142857143%; } }
  @media (min-width: 992px) {
    #task_week .col-lg {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%; }
    #task_week .col-lg-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none; }
    #task_week .col-lg-1 {
      flex: 0 0 14.2857142857%;
      max-width: 14.2857142857%; }
    #task_week .col-lg-2 {
      flex: 0 0 28.5714285714%;
      max-width: 28.5714285714%; }
    #task_week .col-lg-3 {
      flex: 0 0 42.8571428571%;
      max-width: 42.8571428571%; }
    #task_week .col-lg-4 {
      flex: 0 0 57.1428571429%;
      max-width: 57.1428571429%; }
    #task_week .col-lg-5 {
      flex: 0 0 71.4285714286%;
      max-width: 71.4285714286%; }
    #task_week .col-lg-6 {
      flex: 0 0 85.7142857143%;
      max-width: 85.7142857143%; }
    #task_week .col-lg-7 {
      flex: 0 0 100%;
      max-width: 100%; }
    #task_week .order-lg-first {
      order: -1; }
    #task_week .order-lg-last {
      order: 8; }
    #task_week .order-lg-0 {
      order: 0; }
    #task_week .order-lg-1 {
      order: 1; }
    #task_week .order-lg-2 {
      order: 2; }
    #task_week .order-lg-3 {
      order: 3; }
    #task_week .order-lg-4 {
      order: 4; }
    #task_week .order-lg-5 {
      order: 5; }
    #task_week .order-lg-6 {
      order: 6; }
    #task_week .order-lg-7 {
      order: 7; }
    #task_week .offset-lg-0 {
      margin-left: 0; }
    #task_week .offset-lg-1 {
      margin-left: 14.2857142857%; }
    #task_week .offset-lg-2 {
      margin-left: 28.5714285714%; }
    #task_week .offset-lg-3 {
      margin-left: 42.8571428571%; }
    #task_week .offset-lg-4 {
      margin-left: 57.1428571429%; }
    #task_week .offset-lg-5 {
      margin-left: 71.4285714286%; }
    #task_week .offset-lg-6 {
      margin-left: 85.7142857143%; } }
  @media (min-width: 1200px) {
    #task_week .col-xl {
      flex-basis: 0;
      flex-grow: 1;
      max-width: 100%; }
    #task_week .col-xl-auto {
      flex: 0 0 auto;
      width: auto;
      max-width: none; }
    #task_week .col-xl-1 {
      flex: 0 0 14.2857142857%;
      max-width: 14.2857142857%; }
    #task_week .col-xl-2 {
      flex: 0 0 28.5714285714%;
      max-width: 28.5714285714%; }
    #task_week .col-xl-3 {
      flex: 0 0 42.8571428571%;
      max-width: 42.8571428571%; }
    #task_week .col-xl-4 {
      flex: 0 0 57.1428571429%;
      max-width: 57.1428571429%; }
    #task_week .col-xl-5 {
      flex: 0 0 71.4285714286%;
      max-width: 71.4285714286%; }
    #task_week .col-xl-6 {
      flex: 0 0 85.7142857143%;
      max-width: 85.7142857143%; }
    #task_week .col-xl-7 {
      flex: 0 0 100%;
      max-width: 100%; }
    #task_week .order-xl-first {
      order: -1; }
    #task_week .order-xl-last {
      order: 8; }
    #task_week .order-xl-0 {
      order: 0; }
    #task_week .order-xl-1 {
      order: 1; }
    #task_week .order-xl-2 {
      order: 2; }
    #task_week .order-xl-3 {
      order: 3; }
    #task_week .order-xl-4 {
      order: 4; }
    #task_week .order-xl-5 {
      order: 5; }
    #task_week .order-xl-6 {
      order: 6; }
    #task_week .order-xl-7 {
      order: 7; }
    #task_week .offset-xl-0 {
      margin-left: 0; }
    #task_week .offset-xl-1 {
      margin-left: 14.2857142857%; }
    #task_week .offset-xl-2 {
      margin-left: 28.5714285714%; }
    #task_week .offset-xl-3 {
      margin-left: 42.8571428571%; }
    #task_week .offset-xl-4 {
      margin-left: 57.1428571429%; }
    #task_week .offset-xl-5 {
      margin-left: 71.4285714286%; }
    #task_week .offset-xl-6 {
      margin-left: 85.7142857143%; } }
  #task_week div {
    text-align: center; }
    #task_week div .dow_day {
      display: block;
      font-size: 16px;
      color: #4be4ff;
      font-weight: normal; }
    #task_week div .dow_date {
      font-size: 12px;
      display: block;
      margin: 0;
      margin-bottom: 10px;
      font-weight: normal; }
  #task_week .list-group-item, #task_week .list-group-item * {
    cursor: pointer; }
  #task_week .list-group-item:hover {
    background-color: #161919; }
  #task_week .col:not(:last-child) {
    border-right: 1px solid #444;
    margin-bottom: 20px; }

Finally, in your HTML, you simply define your wrapper div and columns just as you would the default 12-column grid:

<div id="task_week">
    <div class="row no-gutters">
        <div class="col-sm-7 col-lg-1">Monday</div>
        <div class="col-sm-7 col-lg-1">Tuesday</div>
        <div class="col-sm-7 col-lg-1">Wednesday</div>
        <div class="col-sm-7 col-lg-1">Thursday</div>
        <div class="col-sm-7 col-lg-1">Friday</div>
        <div class="col-sm-7 col-lg-1">Saturday</div>
        <div class="col-sm-7 col-lg-1">Sunday</div>
    </div>
</div>

Solution 14 - Html

<div class="col-sm-12">
				<div class="row">
					<div class="col-xs-5">
						<div class="row">
							<div class="col-sm-4">01</div>
							<div class="col-sm-4">02</div>
							<div class="col-sm-4">03</div>
						</div>
					</div>
					<div class="col-xs-2">
						<div class="row">
							<div class="col-sm-12">04</div>
						</div>
					</div>
					<div class="col-xs-5">
						<div class="row">
							<div class="col-sm-4">05</div>
							<div class="col-sm-4">06</div>
							<div class="col-sm-4">07</div>
						</div>
					</div>					
				</div>
			</div>
</div>

Solution 15 - Html

With Bootstrap 3's grid system you can wrap your seven columns in a div and use the "col-md-offset" class. For example:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10 col-md-offset-3">
      <div class="col-md-1 text-center">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>  
</div>

The downside is that you are limited to a column size of 10. If you'd like your 7 columns to take up the entire screen, you can alternatively use this:

  <div class="row text-center">
    <h1>CENTERED TEXT</h1>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN ONE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN TWO</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN THREE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FOUR</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN FIVE</p>
      </div>
      <div class="col-md-1 text-center" style="margin-right: 3%;margin-left: 3%;">
        <p>COLUMN SIX</p>
      </div>
      <div class="col-md-1 text-center" style="margin-left: 3%;">
        <p>COLUMN SEVEN</p>
      </div>
    </div>
  </div>

Code pen here: https://codepen.io/dylanprem/pen/BrzKxo?editors=1010

Solution 16 - Html

Update for Bootstrap 4

<div class="container">
  <div class="row seven-cols">
    <div class="col-md-1">Col 1</div>
    <div class="col-md-1">Col 2</div>
    <div class="col-md-1">Col 3</div>
    <div class="col-md-1">Col 4</div>
    <div class="col-md-1">Col 5</div>
    <div class="col-md-1">Col 6</div>
    <div class="col-md-1">Col 7</div>
  </div>
</div>

 @media (min-width: 768px){
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
    *width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    max-width: 14.285714285714285714285714285714%;
    flex: 0 0 14.285714285714285714285714285714%;
  }
}
   
@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    max-width: 14.285714285714285714285714285714%;
    flex: 0 0 14.285714285714285714285714285714%;
  }
}

Solution 17 - Html

<div class="row">
  <div class="col-lg-1">Mon</div>
  <div class="col-lg-2">Tue</div>
  <div class="col-lg-2">Wen</div>
  <div class="col-lg-2">Thu</div>
  <div class="col-lg-2">Fri</div>
  <div class="col-lg-2">Sat</div>
  <div class="col-lg-1">Sun</div>
</div>

Will this solve your problem? The initial and last column space will be reduced, but it doesn't seem to make too much of a difference.

Content Type	Original Author	Original Content on Stackoverflow
Question	Jimmy	View Question on Stackoverflow
Solution 1 - Html	Hashem Qolami	View Answer on Stackoverflow
Solution 2 - Html	PJ3	View Answer on Stackoverflow
Solution 3 - Html	Antony Gibbs	View Answer on Stackoverflow
Solution 4 - Html	Brad	View Answer on Stackoverflow
Solution 5 - Html	jBelanger	View Answer on Stackoverflow
Solution 6 - Html	Zanderi	View Answer on Stackoverflow
Solution 7 - Html	Tasos K.	View Answer on Stackoverflow
Solution 8 - Html	Joel Bonet	View Answer on Stackoverflow
Solution 9 - Html	Arpan Dubey	View Answer on Stackoverflow
Solution 10 - Html	katerina katz	View Answer on Stackoverflow
Solution 11 - Html	Eddy Goh	View Answer on Stackoverflow
Solution 12 - Html	Thifall	View Answer on Stackoverflow
Solution 13 - Html	rmirabelle	View Answer on Stackoverflow
Solution 14 - Html	Meisterunner	View Answer on Stackoverflow
Solution 15 - Html	Dylan Prem	View Answer on Stackoverflow
Solution 16 - Html	đức chung nguyễn	View Answer on Stackoverflow
Solution 17 - Html	Jagan	View Answer on Stackoverflow

7 equal columns in bootstrap

Html Problem Overview

Html Solutions

Solution 1 - Html

Other options

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

The Markup

The `.less`

Solution 5 - Html

Solution 6 - Html

Solution 7 - Html

Solution 8 - Html

Solution 9 - Html

Solution 10 - Html

Solution 11 - Html

Solution 12 - Html

Solution 13 - Html

Solution 14 - Html

Solution 15 - Html

Solution 16 - Html

Solution 17 - Html

Creating a reusable UIView with xib (and loading from storyboard)

How to implement referral program in mobile Apps for both Android and iPhone

Attributions

Html Problem Overview

Html Solutions

Solution 1 - Html

Other options

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

The Markup

The .less

Solution 5 - Html

Solution 6 - Html

Solution 7 - Html

Solution 8 - Html

Solution 9 - Html

Solution 10 - Html

Solution 11 - Html

Solution 12 - Html

Solution 13 - Html

Solution 14 - Html

Solution 15 - Html

Solution 16 - Html

Solution 17 - Html

Creating a reusable UIView with xib (and loading from storyboard)

How to implement referral program in mobile Apps for both Android and iPhone

Attributions

The `.less`