Twitter Bootstrap Question posted in

Change to Bootstrap default Col min-width affects responsive design-Twitter bootstrap

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search