utility-hidden

hidden

常に要素を非表示にする。音声読み上げに対応する場合は.srを使用すること。

hidden-(breakpoint)-up

(breakpoint)で指定した画面幅以上で要素を非表示にする。特性上、hidden-xs-upはない。

hidden-sm-up
hidden-md-up
hidden-lg-up
hidden-xl-up
hidden-xxl-up
  <div class="hidden-sm-up m-b-sm"><span class="btn btn-first">hidden-sm-up</span></div>
  <div class="hidden-md-up m-b-sm"><span class="btn btn-second">hidden-md-up</span></div>
  <div class="hidden-lg-up m-b-sm"><span class="btn btn-third">hidden-lg-up</span></div>
  <div class="hidden-xl-up m-b-sm"><span class="btn btn-important">hidden-xl-up</span></div>
  <div class="hidden-xxl-up m-b-sm"><span class="btn">hidden-xxl-up</span></div>

hidden-(breakpoint)-down

(breakpoint)で指定した画面幅未満で要素を非表示にする。特性上、hidden-xxl-downはない。

hidden-xs-down
hidden-sm-down
hidden-md-down
hidden-lg-down
hidden-xl-down
  <div class="hidden-xs-down m-b-sm"><span class="btn btn-first">hidden-xs-down</span></div>
  <div class="hidden-sm-down m-b-sm"><span class="btn btn-second">hidden-sm-down</span></div>
  <div class="hidden-md-down m-b-sm"><span class="btn btn-third">hidden-md-down</span></div>
  <div class="hidden-lg-down m-b-sm"><span class="btn btn-important">hidden-lg-down</span></div>
  <div class="hidden-xl-down m-b-sm"><span class="btn">hidden-xl-down</span></div>