Сергей delphinpro

.bg_left
{
  background-image: url(img/left.png);
  height: 800px;
  width: auto;
  background-size:cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: ($grid-gutter-width / -2); // <--
}

UPD
У вас картинка фоновая будет?
Сделайте лучше так https://jsfiddle.net/w2ex7vd9/1/

Левый блок col по ширине может быть равен 2.5(два с половиной стандартных столбца)

И что здесь не вписывается?

.col {
  @include make-col-ready();
  @include make-col(2.5);
}

аналогично популярная тема с пятью столбиками

.col-1-of-5 {
  @include make-col-ready();
  @include make-col(1, 5);
}

Bootstrap — это не только ценный мех скаченный bootstrap.min.css, это еще и куча полезных миксинов.

сайты не нарисованные под сетку bootstrap

нет «сетки bootstrap», есть «сетка в бутстрапе». И с этой сеткой можно творить всё что угодно.
Отсюда вывод: если дизайн нарисован по сетке (неважно как), то его можно сверстать в том числе и с помощью сетки из состава бутстрапа.

https://github.com/delphinpro/bs-grid-system
микс 3 и 4 версий ))
миксины от четвертой, флоаты от третьей.

Вам нужно использовать встроенные миксины бутстрапа. Все они здесь https://github.com/twbs/bootstrap/blob/v4-dev/scss...

media-breakpoint-up()
media-breakpoint-down()
media-breakpoint-between()
media-breakpoint-only()

В качестве параметров передаётся название контрольной точки (ключи из переменной $grid-breakpoints) - xs, sm, md, lg, xl.

Сначала дописываем недостающие колонки для сетки

.col-xs-1of5, .col-sm-1of5, .col-md-1of5, .col-lg-1of5, .col-xl-1of5 {
  @include make-col-ready();
  width: 100%;
}

.col-xs-1of5 { @include make-col(1, 5); }
@include media-breakpoint-up(sm) { .col-sm-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(md) { .col-md-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(lg) { .col-lg-1of5 { @include make-col(1, 5); } }
@include media-breakpoint-up(xl) { .col-xl-1of5 { @include make-col(1, 5); } }

Потом просто используем

<div class="col-sm-1of5">1</div>
<div class="col-sm-1of5">2</div>
<div class="col-sm-1of5">3</div>
<div class="col-sm-1of5">4</div>
<div class="col-sm-1of5">5</div>

Disclaimer:
Если не дружите с препроцессорами, то это уже ваша проблема =))

Оба варианта эквивалентны этому:

<main>
  <section>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque fugiat
    harum in modi odit quas sit temporibus.
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate fuga
    hic minima provident quisquam quod repudiandae voluptate? Consequatur in,
    necessitatibus.
  <section>
</main>

Так в чем вопрос?
Да к тому же ваша секция не содержит заголовок. А должна бы...

Вот нашел ту старую блок-схему, просвещайтесь:

bs3 работает даже в восьмом ишаке, так что не гоните тут...

Почему вы в первую очередь не смотрите документацию??? Там же всё есть.
Смотри в доке getbootstrap.com/javascript/#tabs как задаются стили

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {}

Бредятина.
Непонятно, как это упростит интеграцию в CMS
Непонятен получаемый профит, кроме удовлетворения своего "хочу"
Зато есть мнение, что селектор атрибута медленнее селектора класса.

А, ну да. Как же всё-таки это сделать? Просто переписать селекторы в сетке:

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

ну и остальные миксины аналогично. Пересобираем и пользуемся.

.pipe(sourcemaps.write())

Вы же карту исходников прямо в файл пишете. Конечно размер будет огромным.

Напишите хотя бы так, чтобы сорсмап записывался в отдельный файл рядом с css
.pipe(sourcemaps.write('.'))

<div class='container'>
   <div class='row specific-block'>
    ...
   </div
</div>

.specific-block {
  display: flex;
  align-items: center;
}

.specific-block {
  >div {
    display: table-cell;
    vertical-align: center;
  }
}

Зачем вы врёте? https://jsfiddle.net/f8rtwxe9/
UPD https://jsfiddle.net/f8rtwxe9/2/

$('.list').on('click', function() {
  $(this).off('click');
});

codepen.io/anon/pen/dNwOVv

Вся фишка в коде

$(document).on('hidden.bs.modal', '.modal', function () {
    $('.modal:visible').length && $(document.body).addClass('modal-open');
});

Не страдайте ерундой.

.home-menu > :nth-child(2n+1) { clear: left; }

@media (min-width: 992px) {
  .home-menu > :nth-child(2n+1) { clear: none; }
  .home-menu > :nth-child(3n+1) { clear: left; }
}

Когда говорят о связке bootstrap + sass, имеют ввиду обычный bootstrap только у которого исходники в sass?

Имеют ввиду это https://github.com/twbs/bootstrap-sass

Насколько удобно это сочетание?

Настолько же, насколько удобна сборка из дефолтного less.
Если вы имеете ввиду по сравнению с css-версией, то тут зависит от того, насколько хорошо вы умеете использовать препроцессор. Имхо, намного удобнее, небо и земля.

Верстая bootstrap с исходниками sass нужно и все остальное кроме сетки стилизовать обязательно на sass?

Всё что используете. Лишнее просто отключаете (закомментируете импорты в bootstrap.scss)

https://jsfiddle.net/4vwwuwg0/

html {
  font-size: 100%;
}

h1 {  font-size: 3rem; }

/*
 Чтобы текст не получился слишком мелким,
 используем calc
 Это типа min-font-size =)
*/
p { font-size: calc(12px + 0.25rem); }

@media (max-width: 480px) {
  html {
    font-size: 50%;
  }
}

.well { position:relative; }
.well .glyphicon-remove { position: absolute; right: 0; top: 0; }

Флексами, Максим, флексами.