How to set proper padding between bootstrap columns?

Question

Bootstrap

You need to make 3 columns, and indent between them. If you do it by col-3 and offset 1, then the columns will turn out to be too narrow, can you somehow explicitly set the distance between the columns?

Answer 1

Decided like this:

<div class="row">
                <div class="col-md-4 col-xs-4">
                    <div class="col-md-10 item">1</div>
                    <div class="col-md-2"></div>
                </div>
                <div class="col-md-4 col-xs-4">
                    <div class="col-md-1"></div>
                    <div class="col-md-10 item">2</div>
                    <div class="col-md-1"></div>
                </div>
                <div class="col-md-4 col-xs-4">
                    <div class="col-md-2"></div>
                    <div class="col-md-10 item">3</div>
                </div>
            </div>

for .item set the height and so on.

Answer 2

You can edit directly via css, just specify the path correctly
. That is, if you need to edit, for example, in the header

<header class="header">
<div class="container">
<div class="col-3">a</div>
</div>
</header>

Then specify the path in css like this

.header .container .col-3(псевдо лассы если нужно) {
стиль
}

Because if you say so

.col-3 {
стиль
}

Then the style will be applied to all parts with class col-3