Про Bootstrap или одна из причин, почему я его хейтер

Допустим, есть картинка на странице, расположенная по центру.

С bootstrap это выглядит так:

<div class="container">

<div class="row justify-content-center">

<div class="col-md-6">

<img src="image.jpg" class="img-fluid" alt="">

</div>

</div>

</div>

Кажется, что всё нормально. Но что на деле:

🙉 .container задаёт отступы в 15px по краям

🙈 .row задаёт -15px margin слева и справа

🙉 .col-md-6 фиксирует ширину и ломает мобилку

🙈 .img-fluid работает, но всё ломает, если нужно больше кастома

И вся эта вложенность ради одной картинки.

Когда можно сделать так:

<div class="image-wrapper">

<img src="image.jpg" alt="" class="image">

</div>

И css:

.image-wrapper {

text-align: center;

}

.image {

max-width: 100%;

margin: 0 auto;

}

Чисто, просто и кастомно. Больше шансов выжить от правок разных людей.

Подписывайся на канал, если согласен! : )