Bootstrap 4 Responsive Button Size

Bootstrap 4 responsive button size

Assign .btn the .btn-sm sizing using the media-breakpoint-between mixin...

/* 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);
  }
}

https://www.codeply.com/go/FoEUO7XCDU

---

Update - Bootstrap 4.1
This button-size mixin has changed slightly to:

@include media-breakpoint-between(xs,sm){
  .btn {
      @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
  }
}

Bootstrap responsive button size

use this way

<div class="card-footer d-flex justify-content-between">
   <a href="#" class="btn btn-block btn-primary">Btn1</a>
   <a href="#" class="btn btn-primary m-0 btn-block mx-4">Btn2</a>
   <a href="#" class="btn btn-block m-0 btn-primary">Btn3</a>
</div>

https://jsfiddle.net/lalji1051/3504rLso/3/

Bootstrap 4 Make Buttons Responsive

Wrap all your buttons in a <div> with the unique id of your choice. Then use this snippet:

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})

... replacing #myGroup with your unique id and 720 with the desired width, according to Bootstrap's Grid system responsiveness breakpoints.

See it working:

$(window).on('load resize', function(){

  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)

})

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid py-2">

  <div class="row text-center">

    <div class="col-10 offset-1">

      <div id="myGroup" role="group">

        <button class="btn btn-primary mr-2 select-all">Select All Items</button>

        <button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>

        <button class="btn btn-primary mr-2" id="latencybutton">New Items</button>

        <button class="btn btn-primary mr-2 clear-all">Clear All</button>

        <button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">

          <button class="dropdown-item select-1" type="button">Items 1</button>

          <button class="dropdown-item select-2" type="button">Items 2</button>

          <button class="dropdown-item select-3" type="button">Items 3</button>

          <button class="dropdown-item select-4" type="button">Items 4</button>

        </div>

    </div>

  </div>

</div>

Bootstrap 4 Limit button size, Change space between divs

For 1st question you can use .d-block class from display utilities as an alternative to <br> line break.

Example:

<a class="btn btn-primary">
  <span class="d-block">Pre Heating Pump</span>
  <span class="d-block">PU01</span>
</a>

Resize button according to screen size

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:

• Get the browser viewport dimensions with JavaScript
• https://fr.vuejs.org/v2/guide/class-and-style.html

Why Bootstrap btn needs width:100% to make bootstrap button go full width? shoudn't display:block; make button full width by default?

As explained here buttons (like input, select, image, etc...) have intrinsic sizing from the element itself.

But, if you wanted to make the Button width responsive without using the grid columns, you can put it inside a flexbox container.

For example, here's 100% width on medium and down (auto width on lg and up)...

   <div class="p-5 d-flex">
        <button type="button" class="btn btn-primary flex-grow-1 flex-lg-grow-0">button</button>
   </div>

Codeply demo

Bootstrap 4 Button Group Responsive without adding custom css

Use this in your index.html file

<!doctype HTML>
<html lang="en">

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRe3js3W69CrGF8kKXvvmYtT4zNGqicXRjvuAnmmbvPZXc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" type="text/css">
<title>WeGo</title>
</head>
<body>
<div id="main"><!-- This is 100% width and no passing or margin -->

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-justified bg-primary" role="group" style="width: 100%;">
    <div class="row">
      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-plus"></i> Add</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-download"></i> Import</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-trash"></i> Delete</button>
      </div>

      <div class="col-lg-3 btn-group" role="group">
        <button class="btn btn-primary btn-lg" style="width: 20em;"><i class="fa fa-save"></i> Save</button>
      </div>
    </div>

  </div>
</div>

</div>
<script src="jquery/jquery.slim.min.js"></script>
<script src="popper/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>

I hope this will help you.

How can i make buttons the same width

They are wrapping because you have padding on the button. Figure out what your padding is or set it to 0 in your css file. in this example i used 5px as my padding. Then set the utilized calc to set the width to 50% sans the 10px (5 right, 5 left) of padding

.btn {

  padding: 5px;

  width: calc(50% - 10px);

}

<div class="card-body">

    <h5 class="card-title">My Linkies</h5>

    <p class="card-text">total LINK</p>

    <p class="card-text">total linki</p>

    <p class="card-text">usd</p>

    <a class="card-link text-left">Reward</a>

   <a class="card-link" id="myDividends">LINK</a><br>

    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>

    <button type="button" class="btn btn-primary" name="button"> withdraw</button>

</div>

---

Related Topics