CODEWITHSUNDEEP
reactjsbootstrap-4frontend
BellaCarol
BellaCarol

Reputation: 67

Bootstrap columns not working as expected

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>

Upvotes: 1

Views: 69

Answers (2)

Kireeti Ganisetti
Kireeti Ganisetti

Reputation: 236

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)

Upvotes: 1

jsadev.net
jsadev.net

Reputation: 2590

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.

Upvotes: 3

Related Questions