Bootstrap 5.1 - Responsive row/col - Going from "col-12" to "col-md"-CodePudding

I have this:

<div ></div>

For mobile I have this:

<div ></div>

I want to join them together, but it doesn't work as expected:

<div ></div>

Basically the "md" has to be flexible "col", but I don't know how to reset that previous "col-4".

CodePudding user response：

You can always define your own CSS:

.col-4 {
  height: 100px;
  background: red;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
@media (min-width: 768px) {
 .w-md-auto {
   width: auto;
 }
}
</style>
<div >
  <div >
    <div ></div>
  </div>
</div>

CodePudding user response：

If I understand correctly your needs, you just have to specify col-md-auto instead of col-md.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div >
    <div >
      AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA AAAAA
    </div>
    <div >
      BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB BBBBB
    </div>
    <div >
      CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC CCCCC
    </div>
  </div>
</div>

CodePudding user response：

Are you sure they are in rows? Because in this case it works normally.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div >
    <div >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
    </div>
    <div >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
    </div>
    <div >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
    </div>
    <div >
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam, ad!
    </div>
  </div>
</div>

CodePudding user response：

<div >...</div>

CodePudding user response：

Just added this to every class:

.col-md {
     flex: 1 0 0%;
     width:auto; /*fix width*/
}