Bootstrap class does not seem to have any effect

Judy Smarville 0
Viewed 23

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 class="container">
  <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 class="row">
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
  </div>
</div>
twitter-bootstrap css
2 Answers

The syntax is slightly different: See here the syntax is class="col-md-4 offset-md-4"

[class*=col-] {
  background: yellow;
  margin: 2px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">


<div class="container">
  <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 class="row">

    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
    <div class="col-sm-3 ">.col</div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

IT goldman0

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.

BTFman0
Related