V
V
Volty2018-05-10 21:09:54
Layout
Volty, 2018-05-10 21:09:54

Bootstrap 4. How to properly lay out a block?

Help me please. The green blocks occupy all 12 columns, and the dotted one should be made into 8 columns, because if you write it down to 12, then the dotted line stretches to all 12, but it needs to be like in the picture.
5af4879eb8544281812665.png
Tried options:
.row
.col-lg-12
.col-lg-8
.col-lg-12
.col-lg-12
-----------
.row
.col-lg-12
.row
.col-lg-8
.row
.col-lg-12
.col-lg-12
With all of these options, the 8-column block sticks to the left, and is not centered with text-align or margin: 0 auto;
Here's what the code looks like now:

spoiler
<section id="third">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h2>
                        Переезд в болгарию                        
                    </h2>
                    
                    <div class="block__one">
                       <div class="block__one_title">
                            «Если Вам не нравится то место, где вы находитесь -<br>
                            смените его, Вы же не дерево»
                       </div>
                        <div class="block__one_text">
                            Джим Рон
                        </div>
                    </div>
                    
                    <div class="block__second">
                       <div class="block__second_title">
                            Пришло время и перед Вами стоит вопрос
                       </div>
                        <div class="block__second_text">
                            Как переехать в Болгарию на ВНЖ или ПМЖ?
                        </div>
                    </div>
                    
                    <div class="block__third">
                        <div class="block__third_title">
                            Мы знаем ответ
                        </div>
                        <div class="block__third_text">
                            Подберем для Вас оптимальный вариант и предложим лучшие условия!
                        </div>
                    </div>
                    
                    <div class="block__button">
                        <a href="#">Узнать больше</a>
                    </div>
                </div>
            </div>
        </div>
    </section>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Volty, 2018-05-10
@Volty

I don't know how to close the question, but I figured it out.
Bootstrap 4 has an offset-*-* class that indents from the left edge by the required number of columns.
In my case, it turned out like this
.row
.col-lg-12
.row
.col-lg-8 offset-lg-2
.row
col-lg-12

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question