Как в Bootstrap 5 сделать ширину контейнера 100%?

Question

[Сергей]

Визуально ширина смотрится как будто она выставлена в 95% . Сам контейнер обернут как container-fluid
Вот так выглядит в моем браузере

<div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="jumbotron">
                    <h1>hello</h1>
                </div>
                
            </div>
        </div>
    </div>

Comments

[Антон Литвиненко]

все верно, у контейнера есть боковые паддинги. если они не нужны то либо классом их убираете либо зачем там вообще контейнер, он реально при ширине в 100% только паддинги добавляет

[Ярик Ярик]

body{
padding: 0 !important;
margin: 0 !important;
}

[Сергей]

Антон Литвиненко, я дописал padding:0; для container-fluid - теперь появилась прокрутка по горизонтали =(

[Сергей]

Novichek0342, Ваш вариант ничего не изменил

[Ярик Ярик]

Попробуйте "поубирать" padding или margin во всех дивах (padding: 0 !important;
margin: 0 !important;) - результат определенно будет...

[Сергей]

Novichek0342, да помог вот этот вариант

*{
    padding: 0 !important;
    margin: 0 !important;
    }

но теперь jumbotron выглядит по другому...

[Ярик Ярик]

Ну вы убрали все отступы вообще ) Теперь можете добавить отступы Определенному элементу и добиться нужного результата:
.jumbotron h1{
margin: 20px 10px !important;
}

[Сергей]

Novichek0342, Спасибо. Вопрос решен! :)

[Сергей delphinpro]

Novichek0342, Пи..ец! Нафига это советовать? Ну не знаешь бутстрап - не лезь с убогими советами.
Вы должны были предложить использовать бутстраповские хелперы, а не портить все стили.
Примерно так:

<div class="container-fluid">
  <div class="row g-0"> <!-- вот он, волшебный класс g-0 -->
    <div class="col-md-12">
      <div class="jumbotron">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

И ничего не нужно переопределять по нескольку раз.

[Ярик Ярик]

Я хотел лишь направить) Согласен, глупый совет..

[Сергей]

Сергей delphinpro, Ваш вариант не работает, отступы слева и справа остаются

https://codepen.io/babytype-the-typescripter/pen/a...

[Сергей delphinpro]

Сергей, ну а вам мозги тоже включать нужно =)
Я же намекнул про использование готовых классов – загляни в документацию...

<div class="container-fluid p-0"> <!-- убрать внутренние отступы p-0 -->
  <div class="row g-0"> <!-- вот он, волшебный класс g-0 -->
    <div class="col-md-12">
      <div class="jumbotron">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>

[Сергей]

Сергей delphinpro, понял, спасибо! :) Работает.

[Антон Литвиненко]

Сергей, зачем эти все обертки лишние? Достаточно

<div class="top-line">
  <div class="jumbotron">
    <h1>hello</h1>
  </div>
</div>

нужно понимать как работает сетка, когда есть смысл делать обертки а когда нет. Главное правило, которое нужно запомнить - у row потомком может быть только col, а у col родителем может быть только row

[Сергей]

Антон Литвиненко, мне нужно именно в Bootstrap 5 все сверстать. Без специальных классов(container-fluid, row и тд) Bootstrap 5 не работает.

[Антон Литвиненко]

Сергей, не говорите глупостей. Разве что у вас тестовое задание, в котором сказано сверстать макет, используя исключительно возможности бутстрапа, не используя свой файл стилей. Это была бы искусственная задача на знание бутстрапа. Во всех остальных случаях - бутстрап это инструмент, предназначенный где нужно облегчить работу верстальщика, в частности хорошо подходит для прототипирования. И говорить что он не работает без каких либо классов - заблуждение, прекрасно работает. Для понимания этого зайдите в файл стилей и помотрите что делают классы. например container-fluid всего лишь добавляет по бокам паддинги, чтобы был воздух и контент не прилипал бы к краям. Если паддинги не нужны то и класс этот использовать бессмысленно

[Кирилл Никитин]

Сергей,

мне нужно именно в Bootstrap 5 все сверстать.

А ничего, что Jumbotron нету в 5 версии?

[Сергей]

Антон Литвиненко, Спасибо. Я бутстрап только начал изучать.
Кирилл Никитин, ничего страшного. Я сам добавил стили в style.css для Jumbotron. Мне просто пример с ним очень нравится. Спасибо!

Answer 1

[ForSureN1]

Самый простой способ это просто перебить своими свойствами, свойства bootstrap, но данные padding сделан как подушка безопасности для вашей верстки, так как при уменьшении ширины экрана, может случится так, что текст и т.п. будут выходить за пределы экрана.

Answer 2

[Сергей delphinpro]

Нужно понимать, как работает сетка бутстрапа.
Если вам нужно задать фон для шапки, можете использовать обертку

<div class="header">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="jumbotron">
          <h1>hello</h1>
        </div>
      </div>
    </div>
  </div>
</div>

.header {
  background: gray;
}

или задавать фон для элемента .row

<div class="container-fluid">
  <div class="row header">
    <div class="col-md-12">
      <div class="jumbotron">
        <h1>hello</h1>
      </div>
    </div>
  </div>
</div>