CODEWITHSUNDEEP
cssbootstrap-4
Anthony
Anthony

Reputation: 306

Change to Bootstrap default Col min-width affects responsive design

After upgrading from Bootstrap 4.4 to 4.5 I noticed cards within columns which used to respond responsively when the screen size is made smaller, now become stacked (i.e. overlap).

It appears to be related to a CSS change in 4.5 where the col min-width defaults to 0. https://github.com/twbs/bootstrap/pull/30049

Effect can be viewed in this example by simply changing the CSS bootstrap setting between 4.4.1 (responsive) and 4.5 (stacked) https://codepen.io/alonergan/pen/BaoGqwO

Would like to ask if anyone else noticed this, and if it is an intended consequence or a regression in bootstrap 4.5?

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 323

Answers (2)

3rik82
3rik82

Reputation: 75

You can now also upgrade to Bootstrap 4.5.1 to fix this problem. Issue https://github.com/twbs/bootstrap/pull/30999 has been fixed. Full changelog: https://github.com/twbs/bootstrap/releases/tag/v4.5.1

Upvotes: 0

user7148391
user7148391

Reputation:

Flex items have a minimum width equal to their content, In other words a flex item cannot be smaller than the content it's holding. Something like min-width:content if you will. (The same is true for the height)

Bootstrap 4.4 recognizes that constraint, However Bootstrap 4.5 overrides it with min-width:0 on .col

The solution is simple, We explicitly say that we want to respect the content 

.col { min-width:auto !important; }


.col{
  min-width:auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

Note: I only looked in the code to recognize the difference, I'm not aware if bootstrap did mention this or not.

Upvotes: 2

Related Questions