'Stretch two buttons full width on the same line - Bootstrap 4

If I have two button components (that have a btn-block class, though they don't have to), how can I have them in the same row, full width both? I know how to achieve this 'manually'. The thing is, I have to do this using only utility classes. So no additional CSS, if possible of course.

Please, help! Thank you.

htmlbootstrap-4


Solution 1:[1]

Try this code. I have added 2 col in a row and used btn-block for button class.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

  <div>
    <div class="row">
      <div class="col">
        <button class="btn btn-primary btn-block">button#1</button>
      </div>
      <div class="col">
        <button class="btn btn-primary btn-block">button#2</button>
      </div>
    </div>
  </div>

Solution 2:[2]

I'm using Bootstrap 5 while developing Razor View Page in ASP.NET MVC project. I solved a similar problem as follows:

.myButtonStyle{
  width: 100% !important;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="row">
  <div class="col-md-4">
    <a href="#" class="btn btn-primary myButtonStyle" role="button">Change Image</a>
  </div>

  <div class="col-md-4">
    <a href="#" class="btn btn-success disabled myButtonStyle" role="button">Save</a>
  </div>

  <div class="col-md-4">
    <a href="#" class="btn btn-danger disabled myButtonStyle" role="button">Discard</a>
  </div>
</div>

The picture below contains the images of the buttons on the same line:

Application Picture

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ojas Mahajan
Solution 2

Related Questions