Как в Bootstrap 5 задать такой класс ширины 50% для lg?

Question

[Junior Coder]

Подскажите! w-100 это ширина 100%. Мне нужно сделать только для lg 50%, такой класс не срабатывает w-lg-50!?
Как сделать?

Answer 1

[Junior Coder]

Достаточно в общих стилях сделать такой класс:

@media (min-width: 576px) {
	.w-lg-50_custom {
		width: 50% !important;
	}
}

Answer 2

[Владислав Лысков]

самому создать класс w-lg-50 и использовать его

Comments

[Junior Coder]

Так может он уже есть, и я его неверно записываю.

[Владислав Лысков]

Евгений М, ты можешь посмотреть исходники, но его нет

[Дмитрий Кузнецов]

Евгений М, если вы считаете что он уже создан, то стоило бы сначала прочитать документацию, а потом задавать вопрос. Или если совсем не лень, то посмотреть исходники как предложил Владислав Лысков или создать свой класс.

[Junior Coder]

Дмитрий Кузнецов, документация не полная, там много чего нет.

[Junior Coder]

Дмитрий Кузнецов, да зачем тогда этот сервис нужен? Смотреть документацию и исходники это всё очень много времени занимает, поэтому и сделали этот сервис чтобы быстро получить ответ.

[Дмитрий Кузнецов]

Евгений М, например чего нет?

[Дмитрий Кузнецов]

Евгений М, этот сервис для решения проблем (своего кода) или помощь в теории, а не помощь ленивым разработчикам, которые не могут сами чего-то найти.

Answer 3

[Сергей delphinpro]

Евгений М,

документация не полная, там много чего нет.

Зато есть исходники. Куда уж полнее-то? Это же не ядро linux, много чего можно в сорцах найти/узнать/проверить.

Чтобы долго не искать, сразу определим, что это утилитарный класс, значит должен быть в соответствующем файле. Т.к. это ширина, то делаем в файле поиск по слову "width". Всего 8 совпадений. Сразу находим нужный нам участок кода

"width": (
    property: width,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
),

Обращаем внимание, что в конфигурации отсутствует свойство responsive: true, и делаем однозначный вывод, что класса w-lg-50 в бутстрапе по умолчанию нет.

Но вам необязательно писать его самому.
Просто добавьте вышеуказанный параметр в конфиг и пересоберите стили бутсрапа.

"width": (
    responsive: true, // added
    property: width,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
),

Теперь у вас будут все респонсивные стили для ширин.