Bootstrap class does not seem to have any effect-CodePudding

I got the ownership of a web app which is a mix of bootstrap(5) and html code. The problem is if I try to push a column using col-md-offset-4 it does not work at all.

it's not just col-md-offset-4, any col-md-offset-* is not working.

<div >
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div >
    <div >.col</div>
    <div >.col</div>
    <div >.col</div>
    <div >.col</div>
  </div>
</div>

CodePudding user response：

The syntax is slightly different: See here the syntax is

[class*=col-] {
  background: yellow;
  margin: 2px;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">


<div >
  <h1>Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div >

    <div >.col</div>
    <div >.col</div>
    <div >.col</div>
    <div >.col</div>
  </div>
</div>

<div >
  <div >
    <div >.col-md-4</div>
    <div >.col-md-4 .offset-md-4</div>
  </div>
  <div >
    <div >.col-md-3 .offset-md-3</div>
    <div >.col-md-3 .offset-md-3</div>
  </div>
  <div >
    <div >.col-md-6 .offset-md-3</div>
  </div>
</div>

CodePudding user response：

I had similar issue and spent an entire day to figure out what's going on.

In my case I was using bootstrap 3 classes in bootstrap 5. While great number of version 3work in version 5 but some of them including col-md-offset-* were not working.

It turns out that somehow they decide to **rename these classes to offset-sm-***

There is no col prefix.