Bootstrap Grid Style
 

Скажите возможно ли сетку стилизовать таким образом, к примеру у нас есть

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

И когда у нас большой экран шрифт мелкий, далее уменьшаем экран и как только экран дойдет до значения меньше 768px шрифт менял цвет и становился по центру экрана.
Вся соль в том, что как только я применяю к одному из значений сol-... он сразу же применяется ко всем. Спрашивал у гугла, ничего не нашел по этому вопросу.

покажите пример
как меняете стили в зависимости от ширины экрана

Смотри в стилях, в "@media", ищи там классы и добавляй к ним стили.

Вот пример.

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 headMenu">
            <div class="col-lg-offset-2 col-lg-2 col-md-2 col-sm-2 col-xs-12">
                <a href="#">
                    <p>HOMEPAGE</p>
                    <span>HOME</span>
                </a>
            </div>
      </div>

.headMenu div a p{
  color:#a5a5a5;
  font-size: 100%;
  text-transform: uppercase;
  font-family: BebasNeue;
  letter-spacing: 1px;
} 
.headMenu div a span{
  color:#474747;
  font-size: 175%;
  text-transform: uppercase;
  font-family: BebasNeue;
  position: relative;
  top: -5px;
  letter-spacing: 0.6px;
}
.headMenu .col-xs-12{
  text-align:center;
}
.headMenu .col-xs-12 a p{
  color:red;
}

Не могли бы вы показать пример, я никак не возьму в толк.

Открой стили "bootstrap.css", найди там @media (max-width: 768px) {впиши сюда класс который тебе нужно поменять}
(768 это максимальный размер окна, если он больше, тогда будет действовать другой стиль)

Пример:

@media screen and (max-width:1000px){
  .change-color{color:#367}
}
@media screen and (max-width:500px){
  .change-color{color:#999}
}

В этом случаи у тех у кого прописан класс "change-color", в зависимости от ширины экрана(0-500 и 501-1000) будут разные применены стили.

Спасибо большое)