takeradi takeradi - 3 months ago 8
CSS Question

Bootstrap 4 Grid - Children in column do not respect width

I noticed that the children in the bootstrap 4 grid columns can exceed the width of their columns. Is this a bug in Bootstrap 4 or do we have to explicitly set the max-width for its children?



body {
padding: 12px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
</div>
<div class="col-xs-4">hello</div>
<div class="col-xs-4">oasfhsaolf</div>
</div>
</div>




Answer

Actually, the col-xs-4 children are behaving just fine - it's the button that's the rebel :) You can see this by inspecting the elements and seeing that those column children are the correct width.

This button behavior is because bootstrap's .btn class has white-space: nowrap, telling the button to not wrap its enclosed text.

Depending on how you want the button to show, you can add a custom white-space css property (like inherit) to override the bootstrap styling for the button:

body {
  padding: 12px;
}
.btn.btn-outline-primary {
  white-space: inherit;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <button class="btn btn-outline-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim dolore vitae fuga debitis recusandae eius nam, neque reprehenderit perferendis corrupti, autem quo nemo consequuntur delectus deleniti quisquam repellat quidem vel!</button>
    </div>
    <div class="col-xs-4">hello</div>
    <div class="col-xs-4">oasfhsaolf</div>
  </div>
</div>

Comments