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 badges, breadcrumbs, and buttons with BootstrapVue.
Badges
Badges are small tags for adding context to any content.
We can use it by using the b-badge component:
<template>
<div id="app">
<h2>Feature
<b-badge>New</b-badge>
</h2>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We just add it straight into the template without any props.
There are variations like primary , secondary , etc.
We can add the variant prop to set the variant.
For instance, we can write:
<template>
<div id="app">
<b-badge variant="primary">New</b-badge>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Pill badges are badges that are more rounded than usual.
We just add the pill prop:
<template>
<div id="app">
<b-badge pill variant="primary">Primary</b-badge>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Breadcrumbs
Breadcrumbs are a navigation widget that shows the hierarchy that leads to the current page.
BootstrapVue has the b-breadcrumb component to let us add breadcrumbs.
For instance, we can write:
<template>
<div id="app">
<b-breadcrumb :items="items"></b-breadcrumb>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
items: [
{
text: "Home",
href: "#"
},
{
text: "Settings",
href: "#"
},
{
text: "Library",
active: true
}
]
};
}
};
</script>
We have an items with the text and the URL to go to.
We set that as the value of the items prop and they’ll be displayed in the same order.
We can use the b-breadcrumb-item component to place items manually.
For instance, we can write:
<template>
<div id="app">
<b-breadcrumb>
<b-breadcrumb-item href="#foo">Foo</b-breadcrumb-item>
</b-breadcrumb>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we put the breadcrumbs item inside the breadcrumb manually.
href is the URL for the link.
Buttons
BootstrapVue comes with many varieties of buttons.
To add a Bootstrap button, we can use the b-button component.
We can write:
<template>
<div id="app">
<b-button>Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we see a button displayed in a gray color.
We can use the variant prop to change the styles.
For instance, we can write:
<template>
<div id="app">
<b-button variant="success">Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we get a green button displayed.
Size
We can change the size of a button with the size prop.
For example, we can write:
<template>
<div id="app">
<b-button size="sm">Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
sm means small.
Outline
We can also make buttons with a white fill and a colored outline.
To do that, we prefix the variant value with outline- .
For instance, we can write:
<template>
<div id="app">
<b-button variant="outline-primary">Primary</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we get a button with the blue outline with blue text.
Rounded Button
We can add the pill prop to make buttons more rounded.
For instance, we can write:
<template>
<div id="app">
<b-button pill>Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We’ll get a button that’s more round than the default style.
Disabled Button
Also, we can set a button to be disabled with the disabled prop.
For instance, we can write:
<template>
<div id="app">
<b-button disabled>Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then we get a button that we can’t click on.
Pressed State
We can set the pressed state of the button to make them look pressed or not.
To make them look pressed, we can write:
<template>
<div id="app">
<b-button :pressed="true">Button</b-button>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We used the pressed prop and set it to true to make it look pressed.
Likewise, we can set it to false to make them not pressed.
Conclusion
With BootstrapVue, we can add badges and add tag text.
Also, we can add breadcrumbs with a breadcrumb and breadcrumb item components.
BootstrapVue also comes with many varieties of buttons.
