2

I am trying to fit 4 columns inside a col-11 but these get stacked vertically. Can someone help me correct/explain this behavior? Here is the code and codepen example of the same:

https://codepen.io/anon/pen/VEyyOp

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"/>
</head>

<body>
    <div class="container-fluid no-gutters">

        <div class="row no-gutters">
            <div class="col-1">PHASES</div>
            <div class="col-11 no-gutters">
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DISCOVER</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DESIGN</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DELIVER</div>
                <div class="col-3 col-md-3 col-sm-3 col-lg-3">DEPLOY</div>
            </div>
        </div>
    </div>
</body>

</html>
Arun
  • 229
  • 3
  • 14

1 Answers1

11

I'm pretty sure you just need a row inside your col-11:

<div class="col-11 no-gutters">
  <div class="row">
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DISCOVER</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DESIGN</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DELIVER</div>
    <div class="col-3 col-md-3 col-sm-3 col-lg-3">DEPLOY</div>
  </div>
</div>

https://codepen.io/anon/pen/MPrQVa

Tim Lewis
  • 27,813
  • 13
  • 73
  • 102
  • 1
    Thanks Tim. That worked for me. – Arun Oct 16 '18 at 15:10
  • No problem. Check the question marked as duplicate as well, explains what's happening. I didn't know this about bootstrap 4, but apparently "*In Bootstrap 4, `.col-` that are not placed in `.row` will stack vertically.*" – Tim Lewis Oct 16 '18 at 15:12