Как правильно верстать такие блоки на bootstrap?

Question

[Rufix]

Подскажите как грамотное верстаются такие блоки с бутстрапом?

Я остановился на этом варианте, но так как нет опыта в бутстрапе, решил все-таки спросить, чтобы не говнокодить в дальнейшем

<div class="row">
      <div class="col-12">
        <h1>We are awesome creative agence</h1>
      </div>
      <div class="col-12">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, magni!</p>
      </div>
    </div>

Answer 1

[iBird Rose]

зачем тебе тут вообще колонки бутстрапа?

Comments

[Rufix]

Ну я сначала тоже таким вопросом задался, но потом подумал, что раз уж я начал писать с bootstrap'ом, то тогда вся страница должна быть написана в одном стиле, т.е с row, делением на колонки и т.д

[iBird Rose]

Rufix, писать на bootstrap - не значит пихать его везде, где нужно и не нужно. колонки бутстрапа на то и колонки, что их нужно использовать, когда тебе нужны колонки. а тут у тебя на всем протяжении от десктопа к мобиле - всегда 1 колонка.

[Rufix]

iBird Rose, Понял, спасибо

Answer 2

[Антон Неверов]

Ну, вообще, в том, что вы написали нет ничего противозаконного. Просто, это не очень хороший стиль. Куда лучше написать вот так:

<div class="row">
  <div class="col-12">
    <h1>We are awesome creative agence</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, magni!</p>
  </div>
</div>

А отступ задать через заранее созданный классы с margin'ами, или в CSS дописать.
Всегда думайте о том, чтобы использовать как можно меньше тегов. Многие очень грешат тем, что делают по несколько div'ов там, где они вообще не нужны. Это улучшает читаемость кода, оптимизирует работу браузера/JavaScript и снижает вес страницы.

Ну и да, вам на такой простой блок колонки бутстрапа не сдались, действительно. Можете вообще сократить до:

<h1>We are awesome creative agence</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, magni!</p>

Если же вас интересует контейнер - дело другое.

Answer 3

[Александр Маргинал]

Это лучше всего вот так написать

<div class="container-fluid">
    <h1>We are awesome creative agence</h1>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo, magni!</p>
</div>

Потому что сетка тут не нужна