Add responsive display:block/inline/inline-block utility classes

[fridays]

It would be great to have some utility classes for each breakpoint:

.block
.block-sm
.block-md
.block-lg

.inline
.inline-sm
.inline-md
.inline-lg

.inline-block
.inline-block-sm
.inline-block-md
.inline-block-lg

[cvrebert]

Can you give some examples of where this would be useful?

[fridays]

I think it would be useful for arranging elements when a grid or floats don't fit.

For example buttons that appear below each other on phones, but next to each other on higher screens:

<button class="btn block inline-sm">button 1</button>
<button class="btn block inline-sm">button 2</button>

Instead of buttons, this could be checkboxes, images or anything else.

[lancomega]

Do you find any solution, Iam interesting as well.

[fridays]

@lancomega You can use the following SCSS with v4 to make the classes available:

.block          { display: block; }
.inline         { display: inline; }
.inline-block   { display: inline-block; }

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    .block-#{$breakpoint}           { display: block; }
    .inline-#{$breakpoint}          { display: inline; }
    .inline-block-#{$breakpoint}    { display: inline-block; }
  }
}

[mdo]

Not interested in adding these on top of our already included responsive utilities, thanks though!

[NuclearMachine]

tssk tssk annoying