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:

Hello, world!

vicki williams

The text-align works fine: enter image description here

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

 

vicki williams

Then the text-align no longer works: enter image description here

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:



  
    
    
    

    
    
  
  
    

Hello, world!

vicki williams

Ответы (6)

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.

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}

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.

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

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);
    }
  }
}

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.

2022 WebDevInsider