bootstrap 4 (beta) и hidden-*

[D'Jack]

Привет!

Вопрос очень очень прост, но ответа пока не могу найти как в bootstrap 4 скрыть элемент например на устройствах xs?

• на 3 версии все было просто: класс - hidden-xs
• на 4 -alpha, чуть замороченее, но все же работало - hidden-xs-down
• а вот на 4 beta я если честно не могу понять как реализовать скрытие элемента

Может кто то из опытных фронтэндеров кто уже столкнулся с проблемой поделится опытом. Буду очень благодарен.

 

[UncleAlena]

.d-none и d-{sm,md,lg,xl}-none

 

[ultra]

Для просмотра ссылки Войди или Зарегистрируйся

 

[D'Jack]

Простите мою безграмотность, не могу никак вкурить..
Вот что мне надо сделать с блоком:

<div class="col-md-12">Привет</div>

что бы он на XS устройствах не отображался?

 

[UncleAlena]

а, там есть фишка ))) мобайл фёрст. нет уже xs приставок) вот так делать правильно:

<div class="col-md-12 d-none d-md-block">Привет</div>

 

[D'Jack]

Если что, вот нагуглил:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none
hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

первая колонка, что надо от bootstrap, после знака "=" как это реализовать в bootstrap 4 бетта

 

[PerfectTeam]

Если что, вот нагуглил:

hidden-xs-down = d-none d-sm-block
hidden-sm-down = d-none d-md-block
hidden-md-down = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down = d-none (same as hidden)
hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up = d-xl-none
hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (only) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (only) = d-none d-xl-block

первая колонка, что надо от bootstrap, после знака "=" как это реализовать в bootstrap 4 бетта

Спасибо, полезная информация, тоже долго искал. Ещё есть подводные камни в бете - новая сетка размеров
сетка Bootstrap 4 выглядит так:

1. Очень маленький ( <544 px)
2. Малый ( ≥544 px)
3. Средний ( ≥768 px)
4. Большой ( ≥992 px)
5. Очень большой ( ≥1200 px)