Please wait...
Page is loading

Display

BS4 theme display is an enhancement of BS Display .

Getting started

To use BS4 .collapse-icon simply include bs4 theme in your bundle file 

//= require vendor/bootstrap-4.4.1-iplan-theme.bundle

Down

Use down suffix to revert bs default d-* behaviour, this suffix can be mixed with different size and values.

Example: .d-md-none will hide element form screen size md and above (including), Use .d-md-none-down to hide element form screen size md and below (including).

Resize screen above and below md to view the class effect. When class is active it will be highlighted
Show / Hide
.d-md-none
.d-md-none
.d-md-none-down
.d-md-none-down
Block / Inline block
.d-md-inline-block
.d-md-inline-block
.d-md-inline-block-down
.d-md-inline-block-down
.small.text-muted
  Resize screen above and below md to view the class effect.
  When class is active it will be highlighted

.row.mt-2
  .col-24.col-md-12
    %strong Show / Hide
    .mt-1
      .d-inline-block.d-md-none.py-1.px-3.border=".d-md-none"
      .d-inline-block.d-sm-none-down.bg-info.py-1.px-3.border=".d-md-none"
    .mt-1
      .d-inline-block.d-md-none-down.py-1.px-3.border=".d-md-none-down"
      .d-inline-block.d-lg-none.bg-info.py-1.px-3.border=".d-md-none-down"

  .col-24.col-md-12.mt-2.mt-md-0
    %strong Block / Inline block
    .mt-1
      %div.d-sm-none-down.d-md-inline-block.py-1.px-3.border.bg-info=".d-md-inline-block"
      %div.d-md-none.py-1.px-3.border=".d-md-inline-block"
    .mt-1
      %div.d-lg-none.d-md-inline-block-down.mb-2.py-1.px-3.border.bg-info=".d-md-inline-block-down"
      %div.d-md-none-down.mb-2.py-1.px-3.border=".d-md-inline-block-down"

Touch

Use touch prefix to limit bs d-* to touch screens, this prefix can be mixed with different size and values.

Example: Use .d-touch-none to hide and element only on touch screens, for the opposite use .d-none.d-touch-block

Toggle between touch screen and none touch screen to view the class effect.
Remember to refresh the page so HTML will receive touch-device class.
When class is active it will be highlighted
Show / Hide
.d-touch-md-none
.d-touch-md-none
.d-touch-md-none-down
.d-touch-md-none-down
Block / Inline block
.d-touch-md-inline-block
.d-touch-md-inline-block
.d-touch-md-inline-block-down
.d-touch-md-inline-block-down
.small.text-muted
  Toggle between touch screen and none touch screen to view the class effect.
  %br
  Remember to refresh the page so HTML will receive touch-device class.
  %br
  When class is active it will be highlighted

.row.mt-2
  .col-24.col-md-12
    %strong Show / Hide
    .mt-1
      .d-inline-block.d-touch-md-none
        .py-1.px-3.border=".d-touch-md-none"
      .d-none.d-touch-inline-block.d-touch-sm-none-down.bg-info
        .py-1.px-3.border=".d-touch-md-none"

    .mt-1
      .d-inline-block.d-touch-md-none-down
        .py-1.px-3.border=".d-touch-md-none-down"
      .d-none.d-touch-inline-block.d-touch-lg-none.bg-info
        .py-1.px-3.border=".d-touch-md-none-down"

  .col-24.col-md-12.mt-2.mt-md-0
    %strong Block / Inline block
    .mt-1
      .d-touch-md-none
        .py-1.px-3.border=".d-touch-md-inline-block"
      .d-none.d-touch-md-inline-block.bg-info
        .py-1.px-3.border=".d-touch-md-inline-block"

    .mt-1
      .d-touch-md-none-down
        .py-1.px-3.border=".d-touch-md-inline-block-down"
      .d-none.d-touch-md-inline-block-down.bg-info
        .py-1.px-3.border=".d-touch-md-inline-block-down"

Collapse

When using bs collapse the button ([data-toggle=collapse]) usually need to represent its state (collapsed or not) via text or icon. To achieve this we can prefix d-* (but it should be after touch) with collapse and collapsed

Example: Use .d-collapsed-none and .d-collapse-none to toggle the appearance of the [data-toggle=collapse] button.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 
.row
  .col-24.col-sm-12
    .card.card-body.d-block
      =button_tag type: 'button', class: 'btn btn-link collapsed p-0', data: {toggle: 'collapse', target: '#collapseExampleOne'} do
        %i.fas.fa-fw.fa-caret-right.d-collapsed-none
        %i.fas.fa-fw.fa-caret-down.d-collapse-none
        toggle

      #collapseExampleOne.collapse.mt-2
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  .col-24.col-sm-12.mt-2.mt-sm-0
    .card.card-body.d-block
      =button_tag type: 'button', class: 'btn btn-link collapsed p-0', data: {toggle: 'collapse', target: '#collapseExampleTwo'} do
        .d-collapse-none
          %i.fas.fa-fw.fa-chevron-down
          open
        .d-collapsed-none
          %i.fas.fa-fw.fa-chevron-up
          close

      #collapseExampleTwo.collapse.mt-2
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
On this page