How to make buttons not stick to each other at low resolutions?

Question

css

I use bootstrap 4. Made two buttons. When adapting to small devices, they become one after the other, but one button sticks to the other. How to fix the problem?

<div class="row">
                      <div class="col-sm-auto">
                        <a href="#" class="button button_right">Скачать</a>
                      </div>
                      <div class="col-sm-auto">
                        <a href="#" class="button">Подробности</a>
                      </div>
                    </div>

Answer 1

add another col to the col-sm-auto class (it will set padding: 15px) or

.button {
    margin-left: 5px;
    margin-right: 5px;
}

Answer 2

margin

Answer 3

In version 4 for small screens, the default classes col-1 , col-2 , col-auto are no exception. The col-sm-* classes start working from the screen width of 540px, if less then col-(1,2,3...12) and so on. You can also use col-* without the sm prefix, md if you have a block on all screens of the same size. For example In your case.

<div class="row">
          <div class="col-auto">
                    <a href="#" class="button button_right">Скачать</a>
          </div>
          <div class="col-auto">
                    <a href="#" class="button">Подробности</a>
          </div>
</div>