CODEWITHSUNDEEP
twitter-bootstrap
redbulll
redbulll

Reputation: 101

How can i make buttons the same width

I have here 2 buttons and i want them to have the same width

here is a image enter image description here

and here is the code:

  <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>
</div>

I tried to change css

.btn {
  padding: 10;
  text-align: center;
}

Upvotes: 1

Views: 8494

Answers (4)

Ulysse
Ulysse

Reputation: 36

You need to set a width for both buttons, like 150px, or you could give them both a width in %.

Fixed width:

.card-body{
text-align:center;
}
.card-body .btn{
width:150px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <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>

Width in %. You'll need a wrapper for this.

.card-body{
text-align:center;
}
.card-body .btn-wrap{
  display:flex;
  justify-content:space-around;
}

.card-body{
  width:100%;
}

.card-body .btn{
  width:calc(50% - 10px);
}

.btn{
padding:10
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>
  <div class="btn-wrap">
    <button type="button" class="btn btn-primary" name="button"> Reinvest</button>
    <button type="button" class="btn btn-primary" name="button"> withdraw</button>
    </div>
  </div>

https://developer.mozilla.org/en-US/docs/Web/CSS/padding By the way, for padding to work it needs a unit like "px" or "%" or other. It's also not the most straightforward way to get button the same width.

Upvotes: 0

Nithin Suresh
Nithin Suresh

Reputation: 370

If all you want to have is same width for both the buttons, you can simply achieve that by specifying a width for the buttons.

<style>
.card-body button{
    width:100px;
    }

</style>


 .card-body button{
        width:100px;

        }
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <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>
    </div>

Note: If you have dynamic text to the button, I recommend mentioning a max-width so that you won't break the container and mess up the appearance. Hope that helpsssss

Upvotes: 1

tstrand66
tstrand66

Reputation: 968

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>

Upvotes: 2

TheRotag
TheRotag

Reputation: 418

If there's a specific width you want, you could add a class (or just use btn as in your sample CSS) to set the width. However, if you want to dynamically size them all to match the width of the largest button (in this case, make Buy match the width of Approve), then you'd need to add some Javascript to loop through all of the buttons, find the largest width, and then set them all to that width.

Edit: added sample Javascript

Assuming you have jquery available (likely, given that you're using bootstrap), that could look something like this:

// Check the maximum width of all buttons in the card-body (could use an ID if you add one to your HTML)
var maxWidth = 0;
$('.card-body .btn').each(function(index, element) {
    var curWidth = $(element).width();
    if (maxWidth < curWidth ) {
        maxWidth = curWidth;
    }
});

// Set all buttons to the max width
$('.card-body .btn').width(maxWidth);

Upvotes: 0

Related Questions