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

Created on 2 Dec 2015 · 6Comments · Source: twbs/bootstrap

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

css feature v4

Source

fridays

👍2

Most helpful comment

@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; }
  }
}

fridays on 3 Dec 2015

👍2

All 6 comments

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

cvrebert on 2 Dec 2015

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.

fridays on 3 Dec 2015

Do you find any solution, Iam interesting as well.

lancomega on 3 Dec 2015

@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; }
  }
}

fridays on 3 Dec 2015

👍2

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