Home / Questions / 107331
Accepted
Ray
Asked: 2020-10-05 16:37:20 +0800 CST 2020-10-05 16:37:20 +0800 CST

How can I make two buttons take up a whole space as if using btn-block?

  • 772

I have the following code, what I want is that the two buttons of each column in the second row occupy 100% of the space of the .col class as it happens in the first row with the btn-block class, how could I do it?

*{
  border-radius: 0px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
  
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 1 - Row 1</button>
    </div>
    
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 2 - Row 1</button>
    </div>
    
  </div>

  <br />

  <div class="row">
  
    <div class="col">
      <div class="btn-group btn-group-block" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 1 - Row 2</button>
      </div>
    </div>
    
    <div class="col">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 2 - Row 2</button>
      </div>
    </div>
  </div>
  
</div>

html

1 Answers

  1. Best Answer

    The solution to layout themes is more than CSS, you can add some classes and control the width of the rows. For example:

    *{
  border-radius: 0px !important;
}
.btn-group .btn {
  width: 50%;
}
.btn-group {
  width: 100%;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

<div class="container-fluid">

  <div class="row">
  
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 1 - Row 1</button>
    </div>
    
    <div class="col">
      <button type="button" class="btn btn-block btn-dark">Column 2 - Row 1</button>
    </div>
    
  </div>

  <br />

  <div class="row">
  
    <div class="col">
      <div class="btn-group btn-group-block" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 1 - Row 2</button>
      </div>
    </div>
    
    <div class="col">
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-secondary">356a</button>
        <button type="button" class="btn btn-danger">Column 2 - Row 2</button>
      </div>
    </div>
  </div>
  
</div>

    • 1