holfza

stackoverflow.com/questions/19740121/keep-bootstra...

https://jsfiddle.net/7cuh8j3f/

Как минимум нужно отключить дублирующий js. У вас 2 раза подключается bootstrap.

fontsquirrel.com/tools/webfont-generator

<h3 class="text-left text-center-xs"></h3>
<h3 class="text-right text-center-xs"></h3>
@media screen and (max-width: 767px) {
	.text-center-xs {
		text-align: center!important;
	}
}

Заведите счетчик $count = 1, и на каждой итерации увеличивайте его к примеру на 1.
Ну и:
<?=($count == 1)?'active':'';

У sidebar-nav фиксированная ширина, и при сужении у col-sm-2 ширина становится меньше, чем у sidebar-nav.

1. Вы ответили на свой вопрос. Нужные размеры контейнера можно и нужно задавать при кастомизации.
2. Используйте как хотите. Но row со вложенными колонками: а) сбрасывает обтекание б) убирает отступ у первой колонки слева, и у последней колонки справа 15 пиксельный внутренний отступ (за счет отрицательного внешнего отступа у row)
3. У row я бы не отменял. А у колонок в зависимости от надобности, макета итд