CODEWITHSUNDEEP
twitter-bootstrapvue.jsbootstrap-4vue-component
moses toh
moses toh

Reputation: 13192

How can I make 5 column in 1 row with jumbotron bootstrap?

I get reference from here : https://bootstrap-vue.js.org/docs/components/jumbotron/

My script like this :

<b-row>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
  <b-col cols>
    <b-jumbotron header="Bootstrap 4" lead="Bootstrap 4 Components for Vue.js 2">
      <p>For more information visit website</p>
      <b-btn variant="primary" href="#">More Info</b-btn>
    </b-jumbotron>
  </b-col>
</b-row>

If the script executed, in 1 row there are only 2 columns. Should there exist 5 column

Can I set jumbroton so that in 1 row there are 5 columns?

Upvotes: 0

Views: 208

Answers (1)

Vanojx1
Vanojx1

Reputation: 5584

keep everything on one line with

.row {
 flex-wrap: nowrap;
}

.col {
 min-width: 0;
}

Upvotes: 1

Related Questions