`col-xs-*` not working in Bootstrap 4

Question

I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:

<h1 class="text-center">Hello, world!</h1>

  <div class="container">
      <div class="row">
          <div class="col-md-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

The text-align works fine:

But when making the column equal to extra small like so:

 <div class="container">
      <div class="row">
          <div class="col-xs-12 text-center">
              <h1>vicki williams</h1>
          </div>
      </div>
  </div>

Then the text-align no longer works:

Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated. Here is my complete code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  </head>
  <body>
    <h1 class="text-center">Hello, world!</h1>

      <div class="container">
          <div class="row">
              <div class="col-xs-12 text-center">
                  <h1>vicki williams</h1>
              </div>
          </div>
      </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

`col-xs-*` no longer exists in the latest v4 release that's why you're seeing this. The `col-xs-12` doesn't have a width set of 100% like your `col-md-12`. Check DevTools to see everything and see this [Pull](https://github.com/twbs/bootstrap/pull/20934) — vanburen, Jan 22 '17 at 19:01

tao · Accepted Answer · 2017-01-28T00:13:12.280

524

col-xs-* have been dropped in Bootstrap 4 in favor of col-*.

Replace col-xs-12 with col-12 and it will work as expected.

Also note col-xs-offset-{n} were replaced by offset-{n} in v4.

edited Jan 28 '17 at 00:13

answered Jan 22 '17 at 19:35

tao

59,850
12
84
110

14

Always check [docs](https://v4-alpha.getbootstrap.com/layout/grid/#grid-options). Happy coding! :: } :: – tao Jan 22 '17 at 21:24
9

This is not something you normally would check docs for. I was all over the docs and missed this too. I had thought, over two bs4 site migrations now, that col was for generic, and col-xs would be specific, however in hindsight this makes no sense, because being mobile first, xs and up is generic (default). Thanks for the reminder, I think i did skim that during my last migration, but was stuck on this on this one. – blamb Jun 28 '17 at 20:38
3

Please read this answer about what changed [between v3 and v4](https://stackoverflow.com/questions/49091275/upgrading-bootstrap-from-3-3-4-to-4-0/49091398#49091398).) and also a link to a tool, should you decide to go that way. It's not an easy task and IMHO it's easier to work on clean template and just insert the php than change the markup. – tao Aug 03 '18 at 02:05
This is not explained int the docs tao, thank you very much! – stromyc Apr 12 '21 at 23:13
@tao- sir I tried col-sm-12 Also it's not working – Kapil soni May 15 '21 at 16:31
@Kapil, in Bootstrap v4, `col-sm-12`, applies: `flex: 0 0 auto; width: 100%` when the viewport (screen) has a width below `576px`. What do you mean by *"it's not working"*? What are you expecting? Consider asking a different question. This one is about `col-xs-*` classes not being included in v4. You likely have a different problem. – tao May 15 '21 at 18:02
@tao: sir I have and card in which I used sm but it's not showing in full screen? – Kapil soni May 15 '21 at 18:07
That means your problem has absolutely nothing to do with this question or with this answer. You can't ask new questions in comments. You have to ask it as a separate question. Make sure to create a [mcve] demonstrating the problem. And please read [ask]. – tao May 15 '21 at 18:09

score 24 · Answer 2 · edited May 16 '18 at 13:21

24

I just wondered, why col-xs-6 did not work for me but then I found the answer in the Bootstrap 4 documentation. The class prefix for extra small devices is now col- while in the previous versions it was col-xs.

https://getbootstrap.com/docs/4.1/layout/grid/#grid-options

Bootstrap 4 dropped all col-xs-* classes, so use col-* instead. For example col-xs-6 replaced by col-6.

edited May 16 '18 at 13:21

Klooven

3,487
1
20
34

answered May 25 '17 at 10:39

Sabir Hussain

2,032
1
11
18

score 6 · Answer 3 · answered Mar 30 '20 at 16:20

6

They dropped XS because Bootstrap is considered a mobile-first development tool. It's default is considered xs and so doesn't need to be defined.

answered Mar 30 '20 at 16:20

SMWalker

61
1
1

score 2 · Answer 4 · answered Oct 08 '19 at 09:07

you could do this, if you want to use the old syntax (or don't want to rewrite every template)

@for $i from 1 through $grid-columns {
  @include media-breakpoint-up(xs) {
    .col-xs-#{$i} {
      @include make-col-ready();
      @include make-col($i);
    }
  }
}

score 2 · Answer 5 · answered Mar 13 '20 at 23:32

2

In Bootstrap 4.3, col-xs-{value} is replaced by col-{value}

There is no change in sm, md, lg, xl remains the same.

.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}

answered Mar 13 '20 at 23:32

Dorjee Karma

129
4

score -1 · Answer 6 · answered Feb 19 '21 at 09:08

-1

If you want to apply an extra small class in Bootstrap 4,you need to use col-. important thing to know is that col-xs- is dropped in Bootstrap4

answered Feb 19 '21 at 09:08

gaya3_96

9
1

Please don't repeat old, existing, highly-ranked answers. That doesn't add value to the community. – isherwood Apr 08 '21 at 13:12

`col-xs-*` not working in Bootstrap 4

6 Answers6

Linked

Related