Col-Xs-*' Not Working in Bootstrap 4

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

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.

bootstrap col-xs-* not working

your "menuDiv" has float: left and that ruins the flow

either remove that, or add a float to the "mainDiv" as well

col-xs-0 Not Working Bootstrap

You should use hidden-xs to hide the block in the mobile view or xs (extra small) views:

<div class="hidden-xs col-md-2 pull-right footersocial">

bootstrap col-md-4 and col-xs-6 not compatible

 <div class="container">
        <div class="row">
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>    
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
            <div class="col-md-4 col-xs-6">CONTENT</div>
        </div>
 </div>

Missing col-xs sizes using bootstrap 4

The -xs- infix was removed from Bootstrap 4 Alpha 6, so the classes are simply, col-1, col-2.. col-12, etc...

Since Bootstrap is "mobile first", the xs breakpoint (<576px) is the default and are no media queries for it. There are only media queries for the larger breakpoints to override the smaller breakpoints. Starting with the smallest each breakpoint overrides the next..

xs(default) > overridden by sm > overridden by md > overridden by lg > overridden by xl

Bootstrap 4 - The class .col is not working propely

I noticed some errors and here is how to fix it. I will provide simplified version to show where the problem is.

According to bootstrap you need to have the following scheme in your layout.
container → row → col → row → col and so on.

Your layout has container → row → col → col and i suppose this is the problem.

Plus, it is really helpful to add borders so you can easily see the layout and how it behaves.

I hope this solves your problem.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row">
      
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">1</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">2</article>
        </div>
        
        <div class="col-6 col-sm-6 col-md-4 col-lg-4 mb-3 border">
          <article class="card w-100">3</article>
        </div>

      </div>
    </div>
  </div>
</div>

Bootstrap 4 - col with col-sm-12 is not responsive

For mobile devices like smartphones, you should use the smalles breakpoint class, which is just col-*, the col-sm-* classes are for slightly larger screens (like landscape view of phones).

You can check the responsive breakpoint limits in Bootstrap Docs

NOTE: Also keep in mind that the col-* classes will apply to the specified breakpoint onwards, so if you just use col-12, then the element will use the full with on all screens, if you want this to change you have to set another class for larger devices like col-md-4 so the element only uses 4 columns on tablet screens.

.col {  border: 1px solid #000;}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" /><div class="row">  <div class="col col-12 col-sm-6 col-md-3">    <div>Required Forms</div>    <p>View what forms are required for shipping to the event.</p>  </div>  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">    <div>Invoice Instructions</div>    <p>Instructions on how to complete the commercial invoice form.</p>  </div>  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">    <div>Labeling & Packing</div>    <p>Tips on packing and labeling your shipment.</p>  </div>  <!-- col -->
  <div class="col col-12 col-sm-6 col-md-3">    <div>Wood Packing</div>    <p>Important information on wood packings (includes skids / pallets)</p>  </div>  <!-- col --></div><!-- row -->

Col-Xs-*' Not Working in Bootstrap 4