Columns shows like rows in Bootstrap 4

Question

I want to create three columns like I do with Bootstrap 3, but here I don't get three columns and I get three rows.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@4.0.0" data-semver="4.0.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    <script data-require="bootstrap@4.0.0" data-semver="4.0.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script data-require="popper.js@1.12.9" data-semver="1.12.9" src="https://unpkg.com/popper.js@1.12.9/dist/umd/popper.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class = "container-fluid">
      <div class = "row">
        <div class = "col-md-4">Left</div>
        <div class = "col-md-4">Center</div>
        <div class = "col-md-4">Right</div>
      </div>
    </div>
  </body>

</html>

Plunker: https://plnkr.co/edit/6gRm3dsYxBjCdKR5V7Dy?p=info

What am I doing wrong?

Edit I

Here is the wide of my screen:

As you can see I don't get columns, I get rows. The width of my screen is bigger than 1200px.

I'm using Angular 5.

Fixed

It was my fault. I didn't include Bootstrap CSS file in my angular code.

Works fine for me. Are you getting rows at a specific screen width? — Carol Skelly, Feb 27 '18 at 21:40
I have checked in plunker works fine, but the same code with Angular 5, doesn't work to me :( — José Carlos, Feb 27 '18 at 21:50
You need to **show the code that reproduces the problem**. The code you've showed does not. — Carol Skelly, Feb 27 '18 at 21:52

score 0 · Answer 1 · answered Feb 27 '18 at 21:40

You do get three columns in fact, but only for screens of size md and greater. Resize the output (make it larger) to see the columns.

To get three columns on screens smaller than md you need to tell bootstrap that you want 3 columns on smaller screens. In bootstrap v4, thats:

    <div class = "col-4">Left</div>
    <div class = "col-4">Center</div>
    <div class = "col-4">Right</div>

score 0 · Answer 2 · answered Feb 27 '18 at 21:43

0

Specifically, if your screen width is anything less than 768px, the columns will automatically stack on top of each other instead of the way you intend.

answered Feb 27 '18 at 21:43

ladyskynet

297
1
3
10

Columns shows like rows in Bootstrap 4

Edit I

Fixed

2 Answers2