Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonathanconway/fc0e975d6238cc1108a3 to your computer and use it in GitHub Desktop.
Save jonathanconway/fc0e975d6238cc1108a3 to your computer and use it in GitHub Desktop.
Make your Bootstrap buttons big and fat on small touch devices, so they're easier to tap. Might help you to comply with ISO 9241-400:2007.
// conditionally make buttons block
@media (max-width: @screen-sm) {
.btn-block-xs {
.btn-block();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-md) {
.btn-block-md {
.btn-block();
}
}
@media (min-width: @screen-md) and (max-width: @screen-lg) {
.btn-block-lg {
.btn-block();
}
}
// conditionally make buttons big
@media (max-width: @screen-sm) {
.btn-lg-xs {
.btn-lg();
}
}
@media (min-width: @screen-sm) and (max-width: @screen-md) {
.btn-lg-md {
.btn-lg();
}
}
@media (min-width: @screen-md) and (max-width: @screen-lg) {
.btn-lg-lg {
.btn-lg();
}
}
Copy link

ghost commented Jun 28, 2015

This is the above translated to SASS:

Add the following to bootstrap/_buttons.scss

.btn {
    @media (max-width: $screen-sm) {
        .btn-block-xs {
            @include btn-block();
        }
    }

    @media (min-width: $screen-sm) and (max-width: $screen-md) {
        .btn-block-md {
            @include btn-block();
        }
    }

    @media (min-width: $screen-md) and (max-width: $screen-lg) {
        .btn-block-lg {
            @include btn-block();
        }
    }

    // conditionally make buttons big

    @media (max-width: $screen-sm) {
        .btn-lg-xs {
            @include btn-lg();
        }
    }

    @media (min-width: $screen-sm) and (max-width: $screen-md) {
        .btn-lg-md {
            @include btn-lg();
        }
    }

    @media (min-width: $screen-md) and (max-width: $screen-lg) {
        .btn-lg-lg {
            @include btn-lg();
        }
    }
}

Add the following to bootstrap/mixins/_buttons.scss

@mixin btn_block()  {
    display: block;
    width: 100%;
}

@mixin btn-lg() {
    @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment