Какой класс в Bootstrap 3 применить для того, чтобы элементы расположились в центре?

Question

[rinatoff]

Какой класс применить для того, чтобы элементы/блоки расположились в центре, как на картинке?


На данный момент вот так:

Comments

[iBird Rose]

задать блокам text-align: center?

Answer 1

[Алексей]

Можно обыкновенную сетку grid от бутстрапа использовать.

<div class="row">
<div class="col-md-3"></div>
<div class="col-md-2">FIXED PRICE PROJECT</div>
<div class="col-md-2">RECEIVE ON TIME</div>
<div class="col-md-2">SATISFACTION GURANTEED</div>
<div class="col-md-3"></div>
</div>

Comments

[rinatoff]

Я сеткой и сделал, только col-xs-4 на 3 дива, т.е еще сделать 2 пустых дива по бокам?

[Алексей]

rinatoff, да, это самый простой вариант

[Алексей]

rinatoff, Если отступы будут слишком большие, тогда сложнее, но тоже возможно, например так:

<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <div class="col-md-4">FIXED PRICE PROJECT</div>
        <div class="col-md-4">RECEIVE ON TIME</div>
        <div class="col-md-4">SATISFACTION GURANTEED</div>
    </div>
    <div class="col-md-2"></div>
</div>

[rinatoff]

Алексей, спасибо вам, вроде всё как надо. А это считается нормальной практикой создавать лишние элементы?

[Алексей]

rinatoff, не совсем :) для этого есть специальные такие классы типа offset-md-2, но я их не помню на память, а в документацию лень порой заглядывать. Потому делаю как быстрее.
Но я программист, а не веб-дизайнер и не верстальщик, потому для меня важнее работоспособность кода, самой верстке не много уделяю внимание.

[rinatoff]

Алексей, ещё раз благодарю :) с помощью offset и сделал, вышло, как надо и по валидности вроде, как вернее будет.

[Александр Шаповал]

а bootstrap gird использует?

[Алексей]

Александр Шаповал, Конечно, как раз минимальный функционал бутстрапа именно grid. Точнее его можно настроить так, что будет только grid и ничего больше лишнего.

[Ankhena]

Александр Шаповал, имеется в виду grid=сетка, а не css grid.

[Алексей]

Ankhena W, да, именно сетка
https://v4-alpha.getbootstrap.com/layout/grid/

[Александр Шаповал]

Алексей, grid это же вроде
display: grid;
ну и дальше соответствующие стили, а у bootstrap не видел использование grid

[Александр Шаповал]

Ankhena W, Алексей, понял

Answer 2

[Sticher78]

используйте для блоков класс "text-center"