CODEWITHSUNDEEP
htmltwitter-bootstrapcss
takeradi
takeradi

Reputation: 3871

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>

Upvotes: 0

Views: 1233

Answers (2)

Fil
Fil

Reputation: 8873

Try to remove the button and the bootstrap grid follow the rules

look at this http://jsbin.com/naruqutaqo/edit?html,output

Upvotes: 0

Karin
Karin

Reputation: 8610

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>

Upvotes: 7

Related Questions