I'm struggling quite a bit with an issue with bootstrap. There seems to be no information on this topic when I search on google.
The thing is that my col-sm-6 classes get overwritten by this piece of code:
.row>* {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
this is how the column is nested:
<div >
<div >
<div ></div>
</div>
</div>
Practically It does not even get overwritten since the column class completely dissapears from my inspector. Anyone out there who can explain this issue?
<div id="stap-3"> <!-- STAP 3 blok -->
<div >
<div >
<h1>STAP 3: Kies Bladen, spoelbak en kraan</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor cras est, amet
quis in. Semper vitae ultricies commodo et, commodo vitae in ut nulla. Tellus
sapien sed elementum, eu et ut ac nisi ut. Nam urna porta turpis turpis volutpat
ac pellentesque suscipit. Porta feugiat a in urna.</p>
</div>
<div >
<h4 >Bladen</h3>
<div >
<div >
<img src="images/licht-beton.png">
<span >Licht Beton</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/donker-beton.png">
<span >Donker Beton</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/cement.png">
<span >Cement</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/old-wild-oak.png">
<span >Old Wild Oak</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<h4 >Spoelbakken</h3>
<div >
<div >
<img src="images/spoelbak.png">
<span >Spoelbak 1</span>
<div ></div>
<span >Prijs: €140,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/spoelbak.png">
<span >Spoelbak 2</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<h4 >Kranen</h3>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 1</span>
<div ></div>
<span >Prijs: €140,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 2</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 3</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
</div>
</div>
</div><!-- Einde STAP 3 blok -->CodePudding user response：
I see you don't understand how Bootstrap grid system works.
This...
<div >...</div>
...is the same as if you would write this.
<div >...</div>
If you want to have 2 columns on mobile, you need to add the class col-6.
See the snippet below.
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<div id="stap-3">
<!-- STAP 3 blok -->
<div >
<div >
<h1>STAP 3: Kies Bladen, spoelbak en kraan</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor cras est, amet
quis in. Semper vitae ultricies commodo et, commodo vitae in ut nulla. Tellus
sapien sed elementum, eu et ut ac nisi ut. Nam urna porta turpis turpis volutpat
ac pellentesque suscipit. Porta feugiat a in urna.</p>
</div>
<div >
<h4 >Bladen</h4>
<div >
<div >
<img src="images/licht-beton.png">
<span >Licht Beton</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/donker-beton.png">
<span >Donker Beton</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/cement.png">
<span >Cement</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/old-wild-oak.png">
<span >Old Wild Oak</span>
<div >
<span >€130,- per m1</span><br>
<span >Benodigde m1: 2.3m1</span>
</div>
<span >Prijs: €135,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<h4 >Spoelbakken</h4>
<div >
<div >
<img src="images/spoelbak.png">
<span >Spoelbak 1</span>
<div ></div>
<span >Prijs: €140,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/spoelbak.png">
<span >Spoelbak 2</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<h4 >Kranen</h4>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 1</span>
<div ></div>
<span >Prijs: €140,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 2</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
<div >
<div >
<img src="images/kraan.png">
<span >Kraan 3</span>
<div ></div>
<span >Prijs: €240,-</span>
<div ><a >selecteer</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Einde STAP 3 blok -->