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-down

Block / Inline block

.d-md-inline-block

.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-down

Block / Inline block

.d-touch-md-inline-block

.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.

Collapsed list group radius

List group uses last child and first child to add radius in css and since our last child here is collapsed (not visible) we need to add border radius only when its collapsed, to do that we can use special bs4 theme class .collapsed-rounded-bottom that will apply radius to the bottom only when element is collapsed. If needed .collapsed-rounded-top is also available for use

Collapse with parent

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).

Collapse without parent

.row.row-gap-3
  .col-24.col-md-12
    %h5 Collapse with parent
    .list-group#collapseListGroup
      =button_tag type: 'button', class: 'list-group-item list-group-item-action collapsed', 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.list-group-item.collapse{data: { parent: '.list-group#collapseListGroup'}}
        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.


      =button_tag type: 'button', class: 'list-group-item list-group-item-action collapsed collapsed-rounded-bottom', 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.list-group-item.collapse{data: { parent: '.list-group#collapseListGroup'}}
        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).

  .col-24.col-md-12
    %h5 Collapse without parent
    .list-group
      =button_tag type: 'button', class: 'list-group-item list-group-item-action collapsed', data: {toggle: 'collapse', target: '#collapseExampleThree'} do
        %i.fas.fa-fw.fa-caret-right.d-collapsed-none
        %i.fas.fa-fw.fa-caret-down.d-collapse-none
        toggle
      #collapseExampleThree.list-group-item.collapse
        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.


      =button_tag type: 'button', class: 'list-group-item list-group-item-action collapsed collapsed-rounded-bottom', data: {toggle: 'collapse', target: '#collapseExampleFour'} do
        .d-collapse-none
          %i.fas.fa-fw.fa-chevron-down
          open
        .d-collapsed-none
          %i.fas.fa-fw.fa-chevron-up
          close
      #collapseExampleFour.collapse.list-group-item.collapse
        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).



  -#
  -# .col-24.col-md-7
  -#   .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).
  -#
  -# .col-24.col-md-10
  -#   .card.card-body.d-block
  -#     =button_tag type: 'button', class: 'btn btn-link collapsed p-0', data: {toggle: 'collapse', target: '#collapseExampleThree'} do
  -#       %i.fas.fa-fw.fa-caret-right.d-collapsed-none
  -#       %i.fas.fa-fw.fa-caret-down.d-collapse-none
  -#       Toggle (no transition)
  -#
  -#     #collapseExampleThree.collapse.collapse-no-transition.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).

Active Pills & Tabs

When using bs pills & tabs that utilize .active class (like navigation), we can use the .d-active-none and .d-inactive-none to show and hide elements

For example, Note that the icon inside active pill is solid

%ul.nav.nav-pills
  %li.nav-item
    =link_to 'javascript:;', class: 'nav-link active', 'data-toggle': 'pill', 'data-target': "#" do
      %i.far.fa-check-circle.fa-fw.d-active-none
      %i.fas.fa-check-circle.fa-fw.d-inactive-none
      menu

  %li.nav-item
    =link_to 'javascript:;', class: 'nav-link', 'data-toggle': 'pill', 'data-target': "#" do
      %i.far.fa-check-circle.fa-fw.d-active-none
      %i.fas.fa-check-circle.fa-fw.d-inactive-none
      menu
  %li.nav-item
    =link_to 'javascript:;', class: 'nav-link', 'data-toggle': 'pill', 'data-target': "#" do
      %i.far.fa-check-circle.fa-fw.d-active-none
      %i.fas.fa-check-circle.fa-fw.d-inactive-none
      menu

On this page