BootstrapVue — Layouts, Links, and Lists

Photo by Tobias Adam on Unsplash

To make good looking Vue apps, we need to style our components. To make our lives easier, we can use components with styles built-in. In this article, we’ll look at how to add layouts.

Offsetting Columns

We can add offsets to columns to spread them out.

For example, we can write:

<template>
<div id="app">
<b-container>
<b-row>
<b-col md="4">foo</b-col>
<b-col md="4" offset-md="4">bar</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We have offset-md='4' to space them out at the md breakpoint by 4 columns.

We can change the offsets at different breakpoints.

For instance, we can write:

<template>
<div id="app">
<b-container>
<b-row>
<b-col md="4">foo</b-col>
<b-col md="4" offset-md="4" col-lg="6" offset-lg="0">bar</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We set the column to 6 for the lg breakpoint to set the column width to 6 for wide screens.

offset-lg is 0 to remove column spaces for wide screens.

Margins

We can add classes like mr-auto or ml-auto to add margins to our columns.

For example, we can write:

<template>
<div id="app">
<b-container>
<b-row>
<b-col md="4">foo</b-col>
<b-col md="4" class="ml-md-auto">bar</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Then we add some margins to our right column.

Nesting Grids

We can nest grids.

For instance, we can write:

<template>
<div id="app">
<b-container>
<b-row>
<b-col md="4">
<b-row>
<b-col cols="8" sm="6">foo</b-col>
<b-col cols="4" sm="6">bar</b-col>
</b-row>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We just put a b-row inside a b-col to nest it.

Row Columns

We can set the cols prop on b-row to specify the number of columns that can be in a row.

For instance, we can write:

<template>
<div id="app">
<b-container>
<b-row cols="2">
<b-col>foo</b-col>
<b-col>bar</b-col>
<b-col>baz</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We have 3 columns but col is set to 2.

So the last b-col is below the rest.

We can also have a different number of columns at different breakpoints.

For instance, we can write:

<template>
<div id="app">
<b-container>
<b-row cols="1" cols-sm="2" cols-md="4" cols-lg="6">
<b-col>foo</b-col>
<b-col>bar</b-col>
<b-col>baz</b-col>
<b-col>a</b-col>
<b-col>b</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We display 1, 2, 4, or 6 columns depending on the breakpoint.

Links

BootstrapVue has the b-link component to let us add links.

For example, we can write:

<template>
<div id="app">
<b-link href="http://example.com">example</b-link>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

We have the b-link component and the href prop to set the link URL.

The content is displayed in between the tags.

Disabled Link

The disabled prop disables the link.

For example, we can write:

<template>
<div id="app">
<b-link href="http://example.com" disabled>example</b-link>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Now we have a link that does nothing when we click it.

List Group

The b-list-group component lets us create a list.

For example, we can write:

<template>
<div id="app">
<b-list-group>
<b-list-group-item>foo</b-list-group-item>
<b-list-group-item>bar</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

Then we display a box with a list that has the texts.

Photo by Keyur Nandaniya on Unsplash

Active List Group Items

We can add the active prop to set an item as the active item.

We can write:

<template>
<div id="app">
<b-list-group>
<b-list-group-item active>foo</b-list-group-item>
<b-list-group-item>bar</b-list-group-item>
</b-list-group>
</div>
</template>
<script>
export default {
name: "App"
};
</script>

to make the first item active.

Conclusion

We can add a list group. Columns can be spaced out or we can specify the number of columns in a row. Thank you for reading, I hoped you enjoyed this article!