[SOLVED] Bootstrap4 - row does not take full space

Bootstrap4 - row does not take full space

Why is the right side not taking the full width of my screen?

I know this could be done better with e.g. two rows, but this way I was able to reproduce the problem.

I am actually having left and right with class .col-md-6, which is showing right in the snipped but wrong on my machine on Firefox and Chromium.

I already tried deleting cache as well, if this comes up.

Thanks for any hint.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-12">
      <div id="left_1">left:
        <div id="left_2" class="input-group">
          <div class="row">
            <div class="col-4">
              <div class="form-group">
                <label for="left_col_1">Left col 1</label>
                <input type="text" class="form-control" id="left_col_1">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_2">Left col 2</label>
                <input type="number" class="form-control" id="left_col_2">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_3">Left col 3</label>
                <input type="text" class="form-control" id="left_col_3">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="left_button" class="btn btn-danger" type="button">X</button>
            </div>
          </div>
        </div>
      </div>
      <button id="left_button_2" type="button" class="btn btn-outline-primary">Add left</button>
    </div>
    <div class="col-12">
      <div id="right_1">right:
        <div id="right_2" class="input-group">
          <div class="row">
            <div class="col-10">
              <div class="form-group">
                <label for="right_col_1">Right col 1</label>
                <input type="text" class="form-control" id="right_col_1">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="right_button" class="btn btn-danger" type="button">X</button></div>
          </div>
        </div>
      </div>
      <button id="right_button_2" type="button" class="btn btn-outline-primary">Add right</button>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>

</html>

EDIT: There seems to be a problem with the .input-group and .input-group-append. After I removed all of them it worked as expected.

Solution

I think, it's because you are putting flexbox into flexbox ("input-group" class is styled by default as flex and "row" class too). If we remove just "display:flex;" property in "input-group", works fine. In fact, pay attention, that left row doesn't take the full width too - it's almost 100%, but not equal. "Row" class doesn't have as default any width property, so maybe width counting is somehow based on child elements?

I don't think it's the best explanation, but it's very interesting behaviour and it would be great, if someone solve this issue better with fully understanding what's going on there with this flexboxes.

EDIT:

Also styling "input-group" class with "flex-direction: column;" helps. After that "row" is shown as one column with 100% width - without it is taken as just one of potential columns in flexbox's row.