Resize button according to screen size

Question

For a button, by default Bootstrap 4 allow you to set default button "size" between : xs, sm, md, lg, xl.

So, in my code, small screen first, i use sm size for screen <576px :

<button type="button" class="btn btn-success btn-sm"></button>

But for xl screen ≥1200px, need i to change size attribute or something else with Bootstrap to adjust button size ?

I don't really understand Bootstrap responsive behavior for button and 'size' attribute between small and large screen.

Thanks.

i'd already seen the `btn-block` class like : `class="btn btn-success btn-block" ` Is it the best solution ? — Gaetan bruel, May 01 '19 at 10:37

score 0 · Answer 1 · answered May 01 '19 at 13:15

0

I don't think there's anything built out of the box for responsive buttons in bootstrap, you'd probably be better off extending the existing bootstrap button sizes in sass/media queries ie

.responsive-button {
  @media (min-width: 576px) { @extend .btn-sm }
  @media (min-width: 768px) { @extend .btn-md }
}

I haven't tested this so may need to research a bit further but hopefully this gets you on track :)

answered May 01 '19 at 13:15

Rixcy

284
2
13

nope, it's using scss. If you don't have access to this you could write it like `@media (min-width: 576px) { .responsive-button { padding: 20px; background-color: blue; } }` etc, there may be some code duplication doing this though cos I don't think you can extend bootstrap classes in plain css – Rixcy May 02 '19 at 11:38
I'd tried and unfortunately it was also my conclusion. Indeed, I could use media queries but it's really not efficient... – Gaetan bruel May 02 '19 at 14:54
Another 'inefficient' solution would be to have a button for each viewport, so button one would be ` – Rixcy May 03 '19 at 11:18
I will try this solution, and come back. Thanks Rixcy. – Gaetan bruel May 03 '19 at 21:14

Gaetan bruel · Accepted Answer · 2019-05-13T16:59:30.000

According to the Vue.js documentation, i had finally computed my CSS class dynamically according to window.onresizeevent call in mounted () function.

Example :

Here is my Bootstrap button :

<b-button :size="nsize" variant="outline-success" class="my-2 my-sm-0">
     <font-awesome-icon icon="search"/>
</b-button>

Here is my function in App.vue file:

<script>
export default {
  name: 'topnavbar',
  data () {
    return {      
      nsize: "sm",
      mediaWidth: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    }
  },
  mounted () {    
    if (window.addEventListener) {
      window.addEventListener("resize", this.updateSize, false);
    } else if (window.attachEvent) {
        window.attachEvent("onresize", this.updateSize);
    }
  },
  methods : {
    updateSize: function (){    
      let sizeEl = "md";  
      let width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      if(width <= 576){
        sizeEl = "sm";
      }
      this.nsize = sizeEl;      
    }
  }
}
</script>

Sources:

Resize button according to screen size

2 Answers2