Twitter Bootstrap Question posted in

Bootstrap 4 Grid – rows aren't the same length-Twitter bootstrap

I’m implementing a Bootstrap 4 Grid. I’ve noticed that if I set a max-width on the container, the rows become uneven in length.

Here is an example:

.container {
  max-width: 500px !important;
}

.purple-row [class^="col"] {
  background-color: rgba(232, 179, 254, 0.5);
  border: 1px solid rgba(232, 179, 254, 0.75);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container">
  <div class="row purple-row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
  <div class="row purple-row">
    <div class="col">col-4</div>
    <div class="col">col-4</div>
    <div class="col">col-4</div>
  </div>
</div>

Why is this? Are the column flex-basis percentages not exact? Maybe it’s something simple I’m missing, but I appreciate the help here.

Here is a CodePen Demo to experiment with this.

Bootstrap 4 lets you set the container max-width via its $container-max-widths variable. However when I do this, I get the problem I described.

Tags:

2

Answers


  1. 0

    The second row has classes called col, whereas the first row has classes called col-8 and col-4. By simply making the other col’s also col-4’s, it solves the problem: JSFiddle.

    Login or Signup to reply.
  2. 0

    This appears to be a consequence of using percentage max-widths for the elements. I was able to solve the problem by adding the following CSS:

    .purple-row [class^="col"] {
  flex-grow: 1;
  max-width: 100%;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search