Bootstrap columns not working as expected

Question

I am trying to have 12 columns, which would take up 1 column each on a large screen, and 4 columns each on a small screen. But when I try to minimize it, nothing happens, they just get pushed one underneath another. I wanted to have 3 columns in one row on small screens, but that doesn't happen and I am wondering what I am doing wrong here. Can you please help me out without adding negative reputation to the post? Thank you!

Here's the code:

<div class="container">
  <div class="row">
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
    <div class="col-lg-1 col-xs-4 bg-warning">Warning</div>
    <div class="col-lg-1 col-xs-4 bg-info">Info</div>
    <div class="col-lg-1 col-xs-4 bg-danger">Cancel</div>
    <div class="col-lg-1 col-xs-4 bg-success">Yes</div>
  </div>
</div>

jsadev.net · Accepted Answer · 2019-11-11 09:57:59Z

3

col-xs is not available in bootstrap 4.

For "xs" you have to use "col" only. Like: col-4;

To learn more take a look at bootstraps documentation.

answered Nov 11, 2019 at 9:57

jsadev.net

2,6001 gold badge19 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kireeti Ganisetti · Accepted Answer · 2019-11-11 10:07:01Z

1

As far as i know there is no "col-xs-" in bootstrap 4. so use "col-" for small screen

.col-sm for larger mobile phones (devices with resolutions ≥ 576px);
.col-md for tablets (≥768px);
.col-lg for laptops (≥992px);
.col-xl for desktops (≥1200px)

answered Nov 11, 2019 at 10:07

Kireeti Ganisetti

2363 silver badges13 bronze badges

1 Comment

BellaCarol Over a year ago

yes exactly, but this was my way of finding that out:)

Collectives™ on Stack Overflow

Bootstrap columns not working as expected

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related