Как сместить текст c кнопкой. Bootstrap

Question

Html

<div class="container-fluid banner">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-md">
                        <div class="navbar-brand">
                    
                        </div> 
                        <ul class="nav">
                            <li class="nav-item">
                                <a class="nav-link" href="#">О нас</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">О нас</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="{% url 'about'%}">О нас</a>
                            </li>
                        </ul>
                    </nav>
                    
                    <div class="p-1 pl-sm-30 pl-md-10 pr-sm-4">
                        <div class="feature text-left">
                            <h4>INSTRUMENTS</h4>
                            <p>Dol</p>
                        </div>
                  </div>
            </div>
        </div>

Answer 1

Вы можете сместить кнопку как с Bootstrap, так и без.

С Bootstrap:

<div class="position-absolute top-50 start-50 translate-middle"> <!-- по 
центру страницы -->
  <button><h3>Содержимое</h3>
  </button>
</div>

Если использовать только html и css:

.button {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

<div class="button">
  <button><h3>Содержимое</h3>
  </button>
</div>

Для удобства я предоставил примеры с расположением по центру. Подробнее об отступах через Bootstrap

БЛОГ НА HUSL

Как сместить текст c кнопкой. Bootstrap

Ответы (1 шт):