Shouldn't the output of this code be 1,2 and 3 placed horizontally across the screen? In my case these numbers are vertically aligned

1 
<div class="container-fluid">
  <div class="rows">
    
    <div class="col-xs-4">1</div>
    <div class="col-xs-4">2</div>
    <div class="col-xs-4">3</div>

    </div>
</div>
2

Perhaps you’re using version 4 of Bootstrap?

3

Cant say. Im new to this and was building just my second webpage on codepen. Could you please elaborate on your solution

4

If you added Bootstrap in the CSS settings, make sure you choose Bootstrap 3 only.

If you’re still having trouble, share your pen

5

i have added no single line of code beyond what is already on the question

6

Hmmm, try clicking the little gear icon in the CSS editor. At the very bottom of the popup, hit the Quick-add dropdown and select Bootstrap 3.

Again, sharing your codepen makes it easier for others to help you with your problems :wink:

7

Wow!! Thanks… It worked

8

But could you tell me what’s wrong with using Bootstrap 4?

9

My initial guess was that you used Bootstrap 4, the reason being version 4 uses different class names from version 3’s.

But there’s no problem with using Bootstrap 4, if you want to learn that instead.

10

I tried using it with Bootstrap 4 but it’s not working. Here’s the link btw https://codepen.io/forestfire/pen/LzyQeB

11

Like I said, Bootstrap 4 uses different class names from what’s used by Bootstrap 3. So chances are the layaout won’t be like what you intended.

And be careful with using both versions in the same page, or it’ll break pretty quickly.

12

Noted. There is another thing I want to ask. The class col-md-4 (in place of col-xs-4)isn’t working either. Does this also has to do with Bootstrap version? And more importantly, what noticeable difference will it make?

13

col-md-4 means that the element it’s attached on will take 1/3 of the container width when the screen’s at least 992px wide. If the screen’s narrower than that, it will default to the <div>s stacking on top of each other.

You can see this by clicking the Change View button, then hitting the first editor layout. Now you can resize the page’s width by dragging the border sideways.

Here’s a good read about Bootstrap’s grid system:
https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc

and the documentation:
https://getbootstrap.com/docs/3.3/css/#grid

14

Thanks. You’re a saviour. I may have to bother you again very soon though:slightly_smiling_face: