Bootstrap div по центру: html — Bootstrap. Выровнять содержимое по центру контейнера

Leave a Comment / Разное / By /

html — Как выровнять элемент по центру с помощью bootstrap сетки?

Задать вопрос

Вопрос задан

Изменён 4 года 11 месяцев назад

Просмотрен 1k раз

Есть вот такой row с текстом.

Сам текст занимает всего 4 колонки по сетке Bootstrap, если я прописываю блоку с данным текстом class='col-4', то элемент занимает первые 4 колонки слева, а мне нужно выровнять по середине, как это можно сделать? Использую только сетку Bootstrap4. Пробовал задавать класс class='col-12' после чего задавать блоку с текстом text-align: center;, но считаю, что это не правильно. Т.к. если бы это был, например, блок с границами, то он растянулся бы на все 12 колонок.

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

html {
  font-size: 10px;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

h4 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}
<section>
  <div>
    <div>
      <div>
        <h4>Ваш инвентарь до и после</h4>
      </div>
    </div>
  </div>
</section>
  • html
  • css
  • bootstrap

11 

* {
  font-family: 'Montserrat', sans-serif;
}

html {
  font-size: 10px;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

h4 {
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn. bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section>
  <div>
    <div>
      <div>
        <h4>Ваш инвентарь до и после</h4>
      </div>
    </div>
  </div>
</section>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

html — как поставить содержимое Bootstrap по центру?

 <body>
    <div>
      <div>
      <h2>Choose your language</h2>
      </div>
    </div>
     <div>
      <div>
        <h3 >RUS</h3>
        <div></div>      
         </div>
      <div>
        <h3>ENG</h3>
         <div></div>
      </div>
      <div>
        <h3>GER</h3>
         <div></div>
      </div>
      <div>
        <h3>UKR</h3>
         <div></div>
      </div>
      </div>
   <div>
      <div>
        <h3>KZ</h3>
         <div></div>
      </div>
      <div>
        <h3>JP</h3>
         <div></div>
      </div>
      <div>
        <h3>CN</h3>
         <div></div>
      </div>
      </div>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.
  js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh5U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

  1. Может в Bootstrap есть класс, который может отцентрировать всё содержимое?

  2. Как лучше сделать выбор языков на сайте? Что использовать? JavaScript или jQuery?

  • html
  • css
  • bootstrap

5

Вопрос не понятен. Да, в бутстрап есть такой класс, и вы его используете. Но пример не доверстан и не воспроизводим относительно вашего скрина, ваши стили не дописаны, бутстраповские не подключены, зачем-то подключены скрипты, хотя они в примере не имеют никакого значения. + есть не закрытый див:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body>


  <div>
    <div>
      <h2>Choose your language</h2>
    </div>
  </div>
  <div>
    <div>
      <h3>RUS</h3>
      <div></div>
    </div>

    <div>
      <h3>ENG</h3>
      <div></div>
    </div>
    <div>
      <h3>GER</h3>
      <div></div>
    </div>
    <div>
      <h3>UKR</h3>
      <div></div>
    </div>
  </div>



  <div>
    <div>
      <h3>KZ</h3>
      <div></div>
    </div>
    <div>
      <h3>JP</h3>
      <div></div>
    </div>
    <div>
      <h3>CN</h3>
      <div></div>
    </div>


  </div>


</body>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

[решено] Как выровнять класс div слева направо в бутстрапе?

1. 00/5 (1 голос)

Узнать больше:

HTML5

начальная загрузка

Привет, команда

Я изо всех сил пытаюсь выровнять свой класс div слева направо, я хочу, чтобы мой поиск фа-фа был слева, а кнопка справа. То, что я пробовал, как показано ниже, все еще не работает так, как я хочу, и мне нужна помощь в выравнивании с использованием класса начальной загрузки div, который делает это.

Что я пробовал: 

<центр>
            <центр>
                <форма>
                    <дел>
                        <дел>
                            Выберите файл
                            <тип ввода="файл">
<дел>
<дел> <дел> <тип ввода="поиск" значение="поиск"> <диапазон> <тип кнопки="кнопка">
^__i>