CODEWITHSUNDEEP
vue.jsbootstrap-vue
FlowMafia
FlowMafia

Reputation: 1002

Display Bootstrap Vue columns one below the other in mobile view

I'm using Bootstrap Vue library for my columns, I display 3 cards per row and it looks fine on desktop but it's looking way too small on mobile so I want to display those 3 cards one below the other just on mobile. How can I do this?

new Vue({
  el: "#app"
});
.card{
    background-color: #BAE5FF !important;
    border: none !important;
    border-radius: 0px 0px !important;
}

.work-link{
    color: #172e54;
}
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-row>
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0"><strong>1</strong></h5></a>
         </template>

      </b-card>
    </b-col>
    
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0">                   <strong>2</strong></h5></a>
         </template>
       </b-card>
    </b-col>
    
    <b-col cols="4" sm="4" md="4">
      <b-card no-body style="max-width: 20rem;" img-src="https://placekitten.com/380/200" img-alt="Image" img-top>
        <template v-slot:header>
          <a href="" class="work-link text-center"><h5 class="mb-0"><strong>3</strong></h5></a>
        </template>
      </b-card>
    </b-col>
  </b-row>
</div>

Upvotes: 1

Views: 3746

Answers (1)

Vinay Pai
Vinay Pai

Reputation: 7758

Bootstrap layout always has 12 columns, the cols, sm, md, lg, and xl attributes specify how many of those columns you want an element to take up at various sizes. Somewhat confusingly, the smallest breakpoint (xs) is specified using the cols attribute. If the total size of columns exceeds 12, it will start a new row.

So if you want them to stack on mobile, you need to set the the colsattribute to 12 so that each card takes up the full row on mobile.

Upvotes: 5

Related Questions