Answers for "button sizes on various screen sizes in bootstrap"

7

bootstrap buttons Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>
Posted by: Guest on October-23-2020
0

how to use different button as per screen size bootstrap

/* change all .btn to .btn-sm size on xs */
@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius-sm);
  }
}
Posted by: Guest on August-29-2021

Browse Popular Code Answers by Language