Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Basic Structure

BootstrapVueNext offers several utility components to assist in building your grid layout. Using BContainer and a combination of BRow and BCol, a responsive layout can be built with ease. For more detailed documentation and understanding, please visit Bootstrap's official Grid System.

1 of 3

2 of 3

3 of 3

							
                                
<template>
  <BContainer>
    <BRow>
      <BCol>
        Column
      </BCol>
      <BCol>
        Column
      </BCol>
      <BCol>
        Column
      </BCol>
    </BRow>
  </BContainer>
</template>

Grid System

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	XS <576px	SM ≥576px	MD ≥768px	LG ≥992px	XL ≥1200px	XXL ≥1400px
Max container width	None (auto)	540px	720px	960px	1140px	1320px
Class prefix	`BCol`	`sm`	`md`	`lg`	`xl`	`xxl`
# of columns	12
Gutter width	1.5rem (.75rem on left and right)
Nestable	Yes
Column ordering	Yes

Tips: Bootstrap v5 added one more grid breakpoint class xxl for ≥1400 breakpoint.

Mix and match

Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

md="8"

sm="6" md="4"

md="8"

sm="6" md="4"

sm="6"

							
                                
<template>
  <BContainer class="text-center">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <BRow>
      <BCol md="8">md="8"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
    </BRow>

    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <BRow>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
      <BCol sm="6" md="4">sm="6" md="4"</BCol>
    </BRow>

    <!-- Columns are always 50% wide, on mobile and desktop -->
    <BRow>
      <BCol sm="6">sm="6"</BCol>
      <BCol sm="6">sm="6"</BCol>
    </BRow>
  </BContainer>
</template>

Gutters

Gutters are the gaps between column content, created by horizontal padding and vertical margin. bootstrap set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.Gutters start at 1.5rem (24px) wide.

One of three columns

One of two columns

							
                                
<template>
  <BContainer>
  <!-- Gutter width 3rem with gutterX -->
    <BRow gutterX="5">
      <BCol>
        One of three columns
      </BCol>
      <BCol>
        One of three columns
      </BCol>
      <BCol>
        One of three columns
      </BCol>
    </BRow>

    <!-- Gutter width 3rem with gutterX -->
    <BRow gutterX="3">
      <BCol>
        One of two columns
      </BCol>
      <BCol>
        One of two columns
      </BCol>
    </BRow>
  </BContainer>
</template>

Props	Type	Value
`gutterX`	ColsNumbers (String)	1/2/3/4/5
`gutterY`	ColsNumbers (String)	1/2/3/4/5
`noGutters`	boolean	false

Reordering

You can use the order property to control the visual order of your content.

First in DOM, with an order of 2

Second in DOM, with an order of 3

Last in DOM, with an order of 1

							
                                
<template>
  <BContainer>
    <BRow>
      <BCol order="2" order-lg="3">
        First in DOM, with an order of 2
      </BCol>
      <BCol order="3" order-lg="2">
        Second in DOM, with an order of 3
      </BCol>
      <BCol order="1" order-lg="1">
        Last in DOM, with an order of 1
      </BCol>
    </BRow>
  </BContainer>
</template>

Props	Type	Value
`order`	ColsNumbers (String)	1/2/3/4/5
`orderLg`	ColsNumbers (String)	1/2/3/4/5
`orderMd`	ColsNumbers (String)	1/2/3/4/5
`orderSm`	ColsNumbers (String)	1/2/3/4/5
`orderXL`	ColsNumbers (String)	1/2/3/4/5
`orderXxl`	ColsNumbers (String)	1/2/3/4/5

Column widths in Row

The BRow lets you specify column widths across 6 breakpoint sizes (cols, colsSm, colsMd, colsLg, colsXl and colsXxl). For every breakpoint, you can specify the amount of columns that will fit next to each other.

Five

Seven

Nine

							
                                									
<template>
  <BContainer>
    <!-- Column-5 -->
    <BRow colsXl="5">
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
      <BCol>Five</BCol>
    </BRow>

    <!-- Column-7 -->
    <BRow colsXl="7">
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
      <BCol>Seven</BCol>
    </BRow>

    <!-- Column-9 -->
    <BRow colsXl="9">
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
      <BCol>Nine</BCol>
    </BRow>
  </BContainer>
</template>