Используйте пять div с классом span2 и присвойте первому класс offset1.

<div class="row-fluid">
    <div class="span2 offset1"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

Вуаля! Пять равноотстоящих и выровненных по центру столбцов.

В bootstrap 3.0 этот код выглядел бы так:

<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>

Для Bootstrap 4

Bootstrap 4 теперь по умолчанию использует flexbox, поэтому вы получаете доступ к его волшебным силам прямо из коробки. Ознакомьтесь с столбцами автоматического макета, которые динамически регулируют ширину в зависимости от на сколько столбцов вложено.

Вот пример:

<div class="row">
   <div class="col">
      1 of 5
   </div>
   <div class="col">
      2 of 5
   </div>
   <div class="col">
      3 of 5
   </div>
   <div class="col">
      4 of 5
   </div>
   <div class="col">
      5 of 5
   </div>
</div>

РАБОЧАЯ ДЕМО

Для Bootstrap 3

Был создан фантастический полноразмерный макет с 5 столбцами с Twitter Bootstrap здесь.

Это, безусловно, самое продвинутое решение, поскольку оно без проблем работает с Bootstrap 3. Оно позволяет повторно использовать классы снова и снова в паре с текущими классами Bootstrap для адаптивного дизайна.

CSS:
Добавьте это в свою глобальную таблицу стилей или даже в конец bootstrap.css документа.

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

Используйте его!
Например, если вы хотите создать элемент div, который ведет себя как макет из пяти столбцов на средних экранах и как два столбца на экранах меньшего размера, вам просто нужно использовать что-то вроде этого:

<div class="row">
    <div class="col-md-5ths col-xs-6">
       ...
    </div>
</div>

РАБОЧАЯ ДЕМО. Разверните фрейм, чтобы столбцы стали адаптивными.

ДРУГОЙ ДЕМО - объединение новых классов col-*-5ths с другими, такими как col-*-3 и col-*-2. Измените размер кадра, чтобы они все изменились на col-xs-6 в адаптивном представлении.

Для Bootstrap 3, если вы хотите полную ширину и используете LESS, SASS или что-то подобное, все, что вам нужно сделать, это использовать Функции микширования Bootstrap make-md-column, make-sm-column и т. д.

МЕНЬШЕ:

.col-lg-2-4{
  .make-lg-column(2.4)
}
.col-md-2-4{
  .make-md-column(2.4)
}
.col-sm-2-4{
  .make-sm-column(2.4)
}

SASS:

.col-lg-2-4{
  @include make-lg-column(2.4)
}
.col-md-2-4{
  @include make-md-column(2.4)
}
.col-sm-2-4{
  @include make-sm-column(2.4)
}

С помощью этих миксинов вы можете не только создавать истинные классы полноразмерных столбцов начальной загрузки, но также можете создавать все связанные вспомогательные классы, такие как .col-md-push-*, .col-md-pull-* и .col-md-offset-*:

МЕНЬШЕ:

.col-md-push-2-4{
  .make-md-column-push(2.4)
}
.col-md-pull-2-4{
  .make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  .make-md-column-offset(2.4)
}

SASS:

.col-md-push-2-4{
  @include make-md-column-push(2.4)
}
.col-md-pull-2-4{
  @include make-md-column-pull(2.4)
}
.col-md-offset-2-4{
  @include make-md-column-offset(2.4)
}

В других ответах говорится о настройке @gridColumns, которая совершенно допустима, но меняет ширину основного столбца для всей начальной загрузки. Использование вышеупомянутых функций миксина добавит макет из 5 столбцов поверх столбцов начальной загрузки по умолчанию, поэтому он не повредит какие-либо сторонние инструменты или существующие стили.

Обновление 2019

Bootstrap 4.1+

Вот 5 одинаковых столбцов полной ширины (без дополнительных CSS или SASS) с использованием сетка автоматического макета:

<div class="container-fluid">
    <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
    </div>
</div>

http://codeply.com/go/MJTglTsq9h

Это решение работает, потому что Bootstrap 4 теперь является flexbox. Вы можете поместить 5 столбцов в один и тот же .row, используя разрыв, такой как <div class="col-12"></div> или <div class="w-100"></div>, каждые 5 столбцов.

См. Также: Bootstrap - макет из 5 столбцов

Ниже приведена комбинация ответов @machineaddict и @Mafnah, переписанных для Bootstrap 3 (пока что работает для меня хорошо):

@media (min-width: 768px){
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .col-md-2, .fivecolumns .col-sm-2, .fivecolumns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}

Сохраните исходный бутстрап с 12 столбцами, не настраивайте его. Единственная модификация, которую вам нужно сделать, - это немного css после исходного адаптивного CSS, например:

Следующий код был протестирован для Bootstrap 2.3.2:

<style type="text/css">
/* start of modification for 5 columns */
@media (min-width: 768px){
    .fivecolumns .span2 {
        width: 18.297872340425532%;
        *width: 18.2234042553191494%;
    }
}
@media (min-width: 1200px) {
    .fivecolumns .span2 {
        width: 17.9487179487179488%;
        *width: 17.87424986361156592%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .fivecolumns .span2 {
        width: 17.79005524861878448%;
        *width: 17.7155871635124022%;
    }
}
/* end of modification for 5 columns */
</style>

И HTML:

<div class="row-fluid fivecolumns">
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span2">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
</div>

Примечание. Несмотря на то, что интервал 2 умноженный на 5 не равен 12 столбцам, вы поняли идею :)

Рабочий пример можно найти здесь http://jsfiddle.net/v3Uy5/6/.

Если вам не нужна точная ширина столбцов, вы можете попробовать создать 5 столбцов, используя вложение:

<div class="container">
    <div class="row">
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-6 column">Column 1</div>
                <div class="col-xs-6 column">Column 2</div>
            </div>
        </div>
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-4 column">Column 3</div>
                <div class="col-xs-4 column">Column 4</div>
                <div class="col-xs-4 column">Column 5</div>
            </div>
        </div>
    </div>
</div>

jsfiddle

Первые два столбца будут иметь ширину 5/12 * 1/2 ~ 20,83%.

Последние три столбца: 7/12 * 1/3 ~ 19,44%

Такой хак во многих случаях дает приемлемый результат и не требует изменений CSS (мы используем только собственные классы начальной загрузки).

Создайте собственную загрузку Bootstrap для макета из 5 столбцов

Перейдите к Bootstrap 2.3.2 (или Bootstrap 3) и установите следующие переменные (не вводите точки с запятой):

@gridColumns:           5;
@gridColumnWidth:       172px;
@gridColumnWidth1200:   210px;
@gridColumnWidth768:    128px;
@gridGutterWidth768:    21px;

Загрузите вашу сборку. Эта сетка вписалась бы в контейнеры по умолчанию, сохранив ширину желоба по умолчанию (почти).

Примечание. Если вы используете LESS, вместо этого обновите variables.less.

С помощью Flexbox http://output.jsbin.com/juziwu

.flexrow {
  display: flex;
  background: lightgray; /*for debug*/
}
.flexrow > * {
  flex: 1;
  margin: 1em;
  outline: auto green;
}

<div class="flexrow">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...<br>..</div>
  <div>...</div>
</div>

Я проголосовал за ответ Мафны, но, глядя на это снова, я бы предположил, что следующее лучше, если вы сохраняете поля по умолчанию и т. Д.

<div class="equal row-fluid">
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
    <div class="span2"></div>
</div>

.equal .span2 {
    width: 17.9%;
}

Создайте 5 элементов с классом col-sm-2 и добавьте к первому элементу также класс col-sm-offset-1

P.s. это не будет полная ширина (он будет с небольшим отступом справа и слева от экрана)

Код должен выглядеть примерно так

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

Bootstrap 4, переменное количество столбцов в строке

Если вы хотите иметь до пяти столбцов в строке, чтобы меньшее количество столбцов занимало только 1/5 строки каждая, решением является использование миксины:

SCSS:

.col-2-4 {
    @include make-col-ready(); // apply standard column margins, padding, etc.
    @include make-col(2.4); // 12/5 = 2.4
}
.col-sm-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(sm) {
        @include make-col(2.4);
    }
}
.col-md-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(md) {
        @include make-col(2.4);
    }
}
.col-lg-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(lg) {
        @include make-col(2.4);
    }
}
.col-xl-2-4 {
    @include make-col-ready();
    @include media-breakpoint-up(xl) {
        @include make-col(2.4);
    }
}

HTML:

<div class="container">    
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 5</div>
    <div class="col-12 col-sm-2-4">2 of 5</div>
    <div class="col-12 col-sm-2-4">3 of 5</div>
    <div class="col-12 col-sm-2-4">4 of 5</div>
    <div class="col-12 col-sm-2-4">5 of 5</div>
  </div>
  <div class="row">
    <div class="col-12 col-sm-2-4">1 of 2</div> <!-- same width as column "1 of 5" above -->
    <div class="col-12 col-sm-2-4">2 of 2</div> <!-- same width as column "2 of 5" above -->
  </div>
</div>

Другой способ включить 5 столбцов в Bootstrap 3 - изменить формат 12 столбцов, используемый по умолчанию в Bootstrap. Затем создайте сетку из 20 столбцов (используйте настройку на веб-сайте Bootstrap ИЛИ используйте версию LESS / SASS).

Чтобы выполнить настройку на веб-сайте начальной загрузки, перейдите на страницу Настройка и загрузка, обновите переменную @grid-columns с 12 до 20. Тогда вы сможете создать как 4, так и 5 столбцов.

Bootstrap по умолчанию может масштабировать до 12 столбцов? Это означает, что если мы хотим создать макет из 12 столбцов одинаковой ширины, мы должны написать внутри div class = "col-md-1" двенадцать раз.

<div class="row">
<div class="col-md-1"></div>    
<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"></div>
</div>

Для Bootstrap 4.4+

Используйте новые row-cols-n классы.

1. Добавьте row-cols-5 класс в свой .row div. Нет необходимости в настраиваемом CSS.
2. См. Документ 4.4 здесь для столбцов строк: https://getbootstrap.com/docs/4.4/layout/grid/#row-columns

Для версий Bootstrap 4 до Bootstrap 4.4

1. Скопируйте CSS ниже (отличный CSS от авторов Bootstrap) и добавьте его в свой проект.

2. Прочтите документы, указанные выше, чтобы использовать его правильно.

   .row-cols-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}@media (min-width:576px){.row-cols-sm-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-sm-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-sm-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-sm-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-sm-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-sm-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:768px){.row-cols-md-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-md-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-md-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-md-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-md-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-md-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:992px){.row-cols-lg-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-lg-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-lg-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-lg-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-lg-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-lg-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}@media (min-width:1200px){.row-cols-xl-1>*{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.row-cols-xl-2>*{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-cols-xl-3>*{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.row-cols-xl-4>*{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-cols-xl-5>*{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-cols-xl-6>*{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}}

Это можно сделать с помощью вложенности и небольшого переопределения css.

<div class="col-sm-12">
<div class="row">
  <div class="col-sm-7 five-three">
    <div class="row">
      <div class="col-sm-4">
      Column 1
      </div>
      <div class="col-sm-4">
      Column 2
      </div>
      <div class="col-sm-4">
      Column 3
      </div><!-- end inner row -->
    </div>
  </div>
  <div class="col-sm-5 five-two">
    <div class="row">
      <div class="col-sm-6">
        Col 4
      </div>
      <div class="col-sm-6">
      Col 5
      </div>
    </div><!-- end inner row -->
  </div>
</div>​<!-- end outer row -->

Then some css

@media  (min-width: 768px) {
div.col-sm-7.five-three {
width: 60% !important;
}

div.col-sm-5.five-two {
width: 40% !important;
}

}

Вот пример: Пример 5 равных столбцов

И вот моя полная запись на coderwall

Пять равных столбцов в bootstrap 3

На мой взгляд, лучше использовать это с синтаксисом Less. Этот ответ основан на ответе от @fizzix

Таким образом, столбцы используют переменные (@ grid-gutter-width, точки останова мультимедиа), которые пользователь может переопределить, а поведение пяти столбцов совпадает с поведением сетки из 12 столбцов.

/*
 * Special grid for ten columns, 
 * using its own scope 
 * so it does not interfere with the rest of the code
 */

& {
    @import (multiple) "../bootstrap-3.2.0/less/variables.less";
    @grid-columns: 5;
    @import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

    @column: 1;
    .col-xs-5ths {
        .make-xs-column(@column);
    }

    .col-sm-5ths {
        .make-sm-column(@column);
    }

    .col-md-5ths {
        .make-md-column(@column);
    }

    .col-lg-5ths {
        .make-lg-column(@column);
    }
}

/***************************************/
/* Using default bootstrap now
/***************************************/

@import  (multiple) "../bootstrap-3.2.0/less/variables.less";
@import  (multiple) "../bootstrap-3.2.0/less/mixins.less";

/* ... your normal less definitions */

Это потрясающе: http://www.ianmccullough.net/5-column-bootstrap-layout/

Просто делать:

<div class="col-xs-2 col-xs-15">

И CSS:

.col-xs-15{
    width:20%;
}

По умолчанию Bootstrap не предоставляет систему сеток, которая позволяет нам создавать макет из пяти столбцов, вам необходимо создать определение столбца по умолчанию так, как Bootstrap создает некоторые настраиваемые классы и медиа-запросы в вашем файле css.

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

и некоторый html-код

<div class="row">
    <div class="col-md-15 col-sm-3">
    ...
    </div>
</div>

Макет из 5 столбцов в стиле Twitter Bootstrap

.col-xs-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 100%;
    float: left;
}
@media (min-width: 768px) {
.col-xs-15 {
        width: 50%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-xs-15 {
        width: 20%;
        float: left;
    }
}

Решение, которое не требует большого количества CSS и настройки макета 12col по умолчанию для начальной загрузки:

http://jsfiddle.net/0ufdyeur/1/

HTML:

<div class="stretch">
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
  <div class="col-lg-2"></div>
</div>

CSS:

@media (min-width: 1200px) { /*if not lg, change this criteria*/
  .stretch{
    width: 120%; /*the actual trick*/
  }
}

Просто создайте новый класс и определите его поведение для каждого медиа-запроса по мере необходимости.

@media(min-width: 768px){
  .col-1-5{
    width: 20%;
    float: left;
    position: relative;
    min-height: 1px;
    padding-right: 5px;
    padding-left: 5px;
  }
}

<div class="container-fluid">
  <div class="row">
    <div class="col-1-5">col 1</div>
    <div class="col-1-5">col 2</div>
    <div class="col-1-5">col 3</div>
    <div class="col-1-5">col 4</div>
    <div class="col-1-5">col 5</div>
  </div>
</div>

вот рабочая демонстрация https://codepen.io/giorgosk/pen/BRVorW

В начальной загрузке 3, я думаю, мы можем сделать что-то подобное для удаления левого и правого поля:

<div class="row this_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>

и CSS

.this_row {
    margin: 0 -5%;
}

Как вы можете добавить сетку из 5 столбцов в бутстрапе

.col-lg-1-5,.col-md-1-5,.col-sm-1-5,.col-xs-1-5{min-height:1px;padding-left:15px;padding-right:15px;position:relative; width:100%;box-sizing:border-box;}
.item{width:100%;height:100px; background-color:#cfcfcf;}
.col-xs-1-5{width: 20%;float:left;} }

@media (min-width: 767px){ .col-sm-1-5{width: 20%;float:left;} }
@media (min-width: 992px){ .col-md-1-5{width: 20%;float:left;} }
@media (min-width: 1200px){ .col-lg-1-5{width: 20%;float:left;} }

<div class="row">
  <div class="col-sm-1-5">
    <div class="item">Item 1</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 2</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 3</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 4</div>
  </div>
  <div class="col-sm-1-5">
    <div class="item">Item 5</div>
  </div>
</div>

Самое простое решение без необходимости редактировать CSS:

<div class="row">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <div class="col-sm-12">Column 1</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 2</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 3</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 4</div>
    </div>
    <div class="btn-group">
      <div class="col-sm-12">Column 5</div>
    </div>
  </div>
</div>

И если вам нужно, чтобы они вышли за пределы любой точки останова, просто сделайте btn-group block. Надеюсь, это кому-то поможет.

Пять столбцов явно не являются частью бутстрапа по замыслу.

Но с Bootstrap v4 (альфа) есть 2 вещи, которые помогут со сложной компоновкой сетки.

1. Flex (http://v4-alpha.getbootstrap.com/getting-started/flexbox/), новый тип элемента (официальный - https://www.w3.org/TR/css-flexbox-1/).
2. Адаптивные утилиты (http://v4-alpha.getbootstrap.com/layout/responsive-utilities/)

Проще говоря, я использую

<style>
.flexc { display: flex; align-items: center; padding: 0; justify-content: center; }
.flexc a { display: block; flex: auto; text-align: center; flex-basis: 0; }
</style>
<div class="container flexc hidden-sm-down">
  <!-- content to show in MD and larger viewport -->
  <a href="#">Link/Col 1</a>
  <a href="#">Link/Col 2</a>
  <a href="#">Link/Col 3</a>
  <a href="#">Link/Col 4</a>
  <a href="#">Link/Col 5</a>
</div>
<div class="container hidden-md-up">
  <!-- content to show in SM and smaller viewport, I don't think 5 cols in smaller viewport are gonna be alright :) -->
</div>

Будь то 5,7,9,11,13 или что-то в этом роде, все будет хорошо. Я совершенно уверен, что стандарт с 12 сетками может обслуживать более 90% сценариев использования - так что давайте спроектировать таким образом - разрабатывать проще!

Хорошее руководство по гибкости находится здесь "https://css-tricks.com/snippets/css/a-guide-to-flexbox/ "

Я создал определения миксинов SASS на основе определений начальной загрузки для любого количества столбцов (лично, кроме 12, я использую 8, 10 и 24):

// Extended bootstrap grid system
//
// Framework grid generation
//
// Based on Bootstrap 'bootstrap/_grid-framework.scss'. Generates classes in form of `.col-(size)-x-num` of width x/num.

@mixin make-extended-grid-columns($num-columns, $i: 1, $list: ".col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-xs-#{$i}-#{$num-columns}, .col-sm-#{$i}-#{$num-columns}, .col-md-#{$i}-#{$num-columns}, .col-lg-#{$i}-#{$num-columns}";
    }
    #{$list} {
        position: relative;
        min-height: 1px;
        padding-left:  ($grid-gutter-width / 2);
        padding-right: ($grid-gutter-width / 2);
    }
}


@mixin float-extended-grid-columns($class, $num-columns, $i: 1, $list: ".col-#{$class}-#{$i}-#{$num-columns}") {
    @for $i from (1 + 1) through $num-columns {
        $list: "#{$list}, .col-#{$class}-#{$i}-#{$num-columns}";
    }
    #{$list} {
        float: left;
    }
}


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

@mixin loop-extended-grid-columns($num-columns, $class, $type) {
    @for $i from 1 through $num-columns - 1 {
        @include calc-extended-grid-column($i, $num-columns, $class, $type);
    }
}

@mixin make-extended-grid($class, $num-columns) {
    @include float-extended-grid-columns($class, $num-columns);
    @include loop-extended-grid-columns($num-columns, $class, width);
    @include loop-extended-grid-columns($num-columns, $class, pull);
    @include loop-extended-grid-columns($num-columns, $class, push);
    @include loop-extended-grid-columns($num-columns, $class, offset);
}

И вы можете просто создавать классы:

$possible-number-extended-grid-columns: 8, 10, 24;

@each $num-columns in $possible-number-extended-grid-columns {

  // Columns

  @include make-extended-grid-columns($num-columns);

  // Extra small grid

  @include make-extended-grid(xs, $num-columns);

  // Small grid

  @media (min-width: $screen-sm-min) {
    @include make-extended-grid(sm, $num-columns);
  }

  // Medium grid

  @media (min-width: $screen-md-min) {
    @include make-extended-grid(md, $num-columns);
  }

  // Large grid

  @media (min-width: $screen-lg-min) {
    @include make-extended-grid(lg, $num-columns);
  }

}

Надеюсь, кому-то это пригодится

Кто-то использует bootstrap-sass (v3), вот простой код для 5 столбцов с использованием смесей начальной загрузки:

  .col-xs-5ths {
     @include make-xs-column(2.4);
  }

  @media (min-width: $screen-sm-min) {
     .col-sm-5ths {
        @include make-sm-column(2.4);
     }
  }

  @media (min-width: $screen-md-min) {
     .col-md-5ths {
        @include make-md-column(2.4);
     }
  }

  @media (min-width: $screen-lg-min) {
     .col-lg-5ths {
        @include make-lg-column(2.4);
     }
  }

Убедитесь, что вы включили:

@import "bootstrap/variables";
@import "bootstrap/mixins";

Для twitter bootstrap 3 это самый простой способ добиться этого:

<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">
<section class="col col-sm-3" style="width: 20%;">

Импровизация на ответ @ lightswitch, если нам нужна сетка из 5 столбцов с МЕНЬШЕ итерациями

.make-fifth-col(@index) when (@index > 0) {
  @class-name: ~".col-md-5th-@{index}";

  @{class-name} {
    .make-md-column(1.2*@index);
  }

  .make-fifth-col(@index - 1);
}

.make-fifth-col(10);

Это сгенерирует классы css .col-md-5th-1, col-md-5th-2, col-md-5th-3, и т.д., которые соответствуют 10%, 20%, _5 _... соответственно

система сеток начальной загрузки разделена на сетку 12, поэтому я разделил ее на две сетки (7 + 5). Эти 7 и 5 также содержат полную сетку 12, поэтому я разделил 7 (4 + 4 + 4) и 5 ​​(6 +6) так что он заберет весь контент, просто

HTML

<div class="col-sm-12">
  <div class="row">
    <div class="col-sm-7 five-three">
      <div class="row">
        <div class="col-sm-4">
          Column 1
        </div>
        <div class="col-sm-4">
          Column 2
        </div>
        <div class="col-sm-4">
          Column 3
        </div>
      </div>
    </div>
    <div class="col-sm-5 five-two">
      <div class="row">
        <div class="col-sm-6">
          Col 4
        </div>
        <div class="col-sm-6">
          Col 5
        </div>
      </div>
    </div>
  </div>
</div>

CSS

div.col-sm-7.five-three {
  width: 60% !important;
}
div.col-sm-5.five-two {
  width: 40% !important;
}

Вы можете использовать небольшой трюк, чтобы сделать решение col-md-2 со смещениями на всю ширину. Он использует способ, которым делает бутстрап, чтобы удалить (скрыть) отступы 15 пикселей.

Я имею в виду добавление полей "-". Собственно расчет (-10% - 15 пикселей); поля для обеих сторон. (10% - это ширина смещения и 15 пикселей для заполнения).

Единственный минус - это заставит страницу прокручиваться горизонтально, поэтому вам понадобится overflow-x: hidden для родительского элемента строки.

css:
.row-xs-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
}
@media (min-width: 768px) {
  .row-sm-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 992px) {
  .row-md-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}
@media (min-width: 1200px) {
  .row-lg-5 {
    margin-left: calc(-10% - 15px);
    margin-right: calc(-10% - 15px);
  }
}

html:
<div style="overflow-x:hidden;">
  <div class="row row-md-5">
    <div class="col-xs-6 col-md-2 col-md-offset-1">col1</div>
    <div class="col-xs-6 col-md-2">col2</div>
    <div class="col-xs-6 col-md-2">col3</div>
    <div class="col-xs-6 col-md-2">col4</div>
    <div class="col-xs-6 col-md-2 text-right">col5</div>
  </div>
</div>

Вот демонстрация: http://jsfiddle.net/sct3j/171/

Мой предпочтительный подход к этой проблеме - создать миксин SASS с использованием существующих переменных Bootstrap на основе _ 1_ миксин.

// Custom Grid Columns
// 
// $name - determines the class names: eg. ".col-5ths, .col-sm-5ths ..."
// $size - determines the width (2.4 is one fifth of 12, the default number of columns)
@mixin custom-grid-columns($name, $size, $grid-columns: $grid-columns, $breakpoints: $grid-breakpoints) {
    $columns: round($grid-columns / $size);

    %custom-grid-column {
        @include make-col-ready();
    }

    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        .col#{$infix}-#{$name} {
            @extend %custom-grid-column;
        }

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            // Create column
            .col#{$infix}-#{$name} {
                @include make-col($size);
            }

            // Create offset
            @if not ($infix=="") {
                .offset#{$infix}-#{$name} {
                    @include make-col-offset($size);
                }
            }
        }
    }
}

Затем вы можете вызвать миксин для создания настраиваемых классов столбцов и смещения.

@include custom-grid-columns('5ths', 2.4);

В bootstrap v4.3.1 это столбец шириной 12/5 = 2,4 столбца. назовем его col-2dot4 (и col-sm-2dot4, col-md-2dot4,…).

И в каждом столбце должно быть 20% доступного пространства.

Код SCSS выглядит следующим образом:

@mixin make-5-grid-column($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {

  // Common properties for all breakpoints
  %grid-column {
    position: relative;
    width: 100%;
    padding-right: $gutter / 2;
    padding-left: $gutter / 2;
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: breakpoint-infix($breakpoint, $breakpoints);

    .col#{$infix}-2dot4 {
      @extend %grid-column;
    }

    .col#{$infix},
    .col#{$infix}-auto {
      @extend %grid-column;
    }

    @include media-breakpoint-up($breakpoint, $breakpoints) {

      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .col#{$infix}-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%; // Reset earlier grid tiers
      }


      .col#{$infix}-2dot4 {
        @include make-col(1, 5);
      }
    }
  }
}

@if $enable-grid-classes {
  @include make-5-grid-column();
}

BOOTSTRAP 4

Я прочитал все ответы и не нашел «очевидного». По сути, вам нужно взять любой столбец начальной загрузки (например, col-2) и отредактировать несколько значений. В этом примере я использую класс .col-custom.

Пять равных столбцов означают, что каждый занимает 20%, поэтому: flex:0 0 20% и max-width:20%. Таким же образом вы можете создать другое количество столбцов (7, 9, 11, 84 или что угодно).

Вы можете создавать переменные CSS с произвольной шириной и использовать их в своих проектах. Что-то подобное:

:root {
  --col-custom: 20%;
}

.col-custom {
  flex: 0 0 var(--col-custom);
  max-width: var(--col-custom);
}

Рабочий пример:

.col-custom,
.col-sm-custom,
.col-md-custom,
.col-lg-custom,
.col-xl-custom {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-custom {
  flex: 0 0 20%;
  max-width: 20%;
}

@media (min-width: 576px){
  .col-sm-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 768px){
  .col-md-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 992px){
  .col-lg-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}
@media (min-width: 1200px){
  .col-xl-custom {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

/*DEMO*/
.col-custom,.col-sm-custom,.col-md-custom,.col-lg-custom,.col-xl-custom{height:100px;border:1px red solid}

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

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
    <div class="col-sm-custom"></div>
  </div>
</div>

Bootstrap или другая сеточная система не всегда означает проще и лучше. Внутри вашего .container или .row (чтобы сохранить адаптивный макет) вы можете просто создать 5 div (с классом .col f.e.) и добавить CSS следующим образом:
.col { width: 20%; float: left };

обновление: теперь лучше использовать flexbox

Сегодня boostrap дает возможность равномерно заполнять строку с помощью встроенного класса, который не сообщает, сколько столбцов из двенадцати охватывать:

вы можете использовать _1 _ / _ 2_:

div div div {
  border: solid;
  margin: 2px;/* this can be added without breaking the row */
}
div div div:before {
content:attr(class);/* show class used */
color:crimson

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<p>Class used , play snippet in full page to test behavior on resizing :</p>
<div class="container">
  <div class="row">
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
    <div class="col-sm"></div>
  </div>
  <div class="row">
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
    <div class="col-md"></div>
  </div>
  <div class="row">
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
  </div>
</div>

flex-grow-x тоже можно использовать

div div div {
  border: solid;
  /* it allows margins too */
  margin: 3px;
}

div div div:before {
  content: attr(class);
  /* show class used */
  color: crimson
}

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

<div class="container">
  <div class="row">
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
    <div class="flex-grow-1"></div>
  </div>
</div>

Самый простой способ - добавить row-cols-5 в строку. Подробнее здесь

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

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

var cols = $(".container .item").length;
if (cols == 5){
    $('div.item').removeClass('col-md-2..etc').addClass('col-md-3').css('width', '20%');
 }

JQuery и готово! Фреймворк!