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.
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.