8 columns-desktop mode and 1 columns-mobile version-CodePudding

i want set bootstrap columns just for mobile view. forexample in mobile view show rows in 1 column. (in desktop mode it shows 8 columns without bootstrap)

what class should i use. i tried col-sm or col-md alone, but didn't work.

Thanks in advance!

CodePudding user response：

Bootstrap is mobile-first framework, so you always work from mobile upwards.

Not exactly sure what you want to achieve. But if you only use the col-lg-4 class on your columns, it will result in 1 column on mobile and 3 columns on lg breakpoint & above.

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

If you really want to do it just for mobile it would require CSS/SASS. Something like below should work, but it is kind of fighting against the BS convention:

.custom-column-class {
  @include media-breakpoint-down(sm) {
    @include make-col-ready();
    @include make-col(4);
  }
}

CodePudding user response：

The 8-columns-desktop-mode need new style apart from bootstrap. Example: col-sm-1-8th and a @media for it (JS Fiddle Expand output tab to left for output). Because bootstrap has only col-md-1 to col-md-12 which can be equally split into either 12 col-md-1s or 6 col-md-2s or 5 col-md-2s or 4 col-md-3s or 3 col-md-4s or 2 col-md-6s or 1 col-md-12s. Whereas 8 equal parts requires 8 100/8s

@media (min-width: 576px){
.col-md-1-8th {
    flex: 0 0 100%;
    max-width: 100%;
}
}
@media (min-width: 768px){
.col-md-1-8th {
    flex: 0 0 12.5%;
    max-width: 12.5%;
    }
}
.col-md-1-8th {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
<div >6</div>
<div >7</div>
<div >8</div>
<div >9</div>
<div >10</div>