Footer
This is a sample of footer using usebootstrap components.
Grid
vue
<template>
<Container
tag="footer"
margin="y-3"
>
<Row>
<Col col="12 lg-3">
<b-div padding="e-3 b-3">
<NavbarBrand
to="/"
aria-label="Space"
>
<b-img
src="/img/logo/logo1.svg"
alt="use-bootstrap"
fluid
class="un-max-h-2em"
/>
</NavbarBrand>
</b-div>
<List unstyled>
<ListItem>
<Anchor
to="/"
icon="bi:geo-alt-fill"
link-underline-opacity="0"
color="secondary"
>
456 Elm Street, Springfield
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
icon="bi:telephone-inbound-fill"
link-underline-opacity="0"
color="secondary"
>
+1 (123) 456-7890
</Anchor>
</ListItem>
</List>
</Col>
<Col col="6 sm">
<b-h level="5">
About Us
</b-h>
<List unstyled>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Our Story
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Careers
</Anchor>
<Badge
color="warning"
text-color="dark"
rounded="pill"
>
Join Us
</Badge>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
News
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
external
link-underline-opacity="0"
>
Partners
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Contact Us
</Anchor>
</ListItem>
</List>
</Col>
<Col
col="6 sm"
>
<b-h
level="5"
>
Services
</b-h>
<List
unstyled
>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
external
>
Media
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Updates
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Integrations
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Pricing
</Anchor>
</ListItem>
</List>
</Col>
<Col col="6 sm">
<b-h level="5">
Support
</b-h>
<List unstyled>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Help Center
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Documentation
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
System Status
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
API Docs
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
link-underline-opacity="0"
>
Tech Specs
</Anchor>
</ListItem>
</List>
</Col>
<Col col="6 sm">
<b-h level="5">
Resources
</b-h>
<List unstyled>
<ListItem>
<Anchor
to="/"
color="secondary"
icon="bi:question-circle-fill"
link-underline-opacity="0"
>
FAQ
</Anchor>
</ListItem>
<ListItem>
<Anchor
to="/"
color="secondary"
icon="bi:person-circle"
link-underline-opacity="0"
>
Your Profile
</Anchor>
</ListItem>
</List>
</Col>
</Row>
<hr margin="5" />
<Row margin="y-3">
<Col col="sm">
<Breadcrumb>
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
Privacy Policy
</BreadcrumbItem>
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
Terms of Service
</BreadcrumbItem>
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
Sitemap
</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col col="sm-auto">
<List
inline
unstyled
>
<ListItem inline>
<Anchor
button
color="light"
icon="bi:facebook"
size="sm"
to="/"
/>
</ListItem>
<ListItem inline>
<Anchor
button
color="light"
icon="bi:google"
size="sm"
to="/"
/>
</ListItem>
<ListItem inline>
<Anchor
button
color="light"
icon="bi:twitter"
size="sm"
to="/"
/>
</ListItem>
<ListItem inline>
<Anchor
button
color="light"
icon="bi:github"
size="sm"
to="/"
/>
</ListItem>
<ListItem inline>
<Dropdown>
<DropdownToggle
button
size="sm"
color="light-subtle"
icon="noto-v1:flag-for-flag-united-states"
>
English (US)
</DropdownToggle>
<DropdownMenu>
<DropdownItem icon="noto-v1:flag-for-flag-united-states">
English (US)
</DropdownItem>
<DropdownItem icon="noto-v1:flag-for-flag-germany">
Deutsch
</DropdownItem>
<DropdownItem icon="noto-v1:flag-for-flag-spain">
Español
</DropdownItem>
<DropdownItem icon="noto-v1:flag-for-flag-china">
中文 (繁體)
</DropdownItem>
</DropdownMenu>
</Dropdown>
</ListItem>
</List>
</Col>
</Row>
<HeroRow
size="10"
text-alignment="center"
>
<b-p
text-color="body-secondary"
small
>
© 2023 Example Inc. All rights reserved.
</b-p>
<b-p
text-color="body-secondary"
small
>
When you visit or interact with our sites, services or tools, we or our authorized service providers may use cookies for storing information to help provide you with a better, faster and safer experience and for marketing purposes.
</b-p>
</HeroRow>
</Container>
</template>
HeroRow
vue
<template>
<Container
tag="footer"
padding="b-1 lg-5"
text-alignment="center"
>
<HeroRow
size="10"
text-alignment="center"
>
<Anchor
display="inline"
align-items="center"
to="/"
>
<b-img
src="/img/logo/logo1.svg"
alt="use-bootstrap"
margin="b-3"
fluid
class="un-max-h-2em"
/>
</Anchor>
<b-p
font-size="6"
margin="b-1"
text-color="secondary"
>
Proudly part of the
<Anchor
to="/"
link-underline-opacity="0"
>
Nova Group.
</Anchor>
family alongside
<Anchor
to="/"
link-underline-opacity="0"
>
Nova
</Anchor>
.
</b-p>
<b-p
font-size="6"
text-color="secondary"
>
© 2023 Example Inc. All rights reserved.
</b-p>
<List
padding="s-0"
unstyled
margin="b-0"
>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:facebook"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:slack"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:github"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:twitter"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:instagram"
/>
</ListItem>
</List>
</HeroRow>
</Container>
</template>
Row
vue
<template>
<Container
tag="footer"
margin="y-3"
>
<Row
justify-content="between"
align-items="center"
>
<Col
col="sm"
margin="b-3 b-sm-0"
>
<b-p
margin="b-0"
small
text-color="secondary"
>
© 2023 Example Inc. All rights reserved.
</b-p>
</Col>
<Col col="sm-auto">
<List
padding="s-0"
unstyled
margin="b-0"
>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:facebook"
size="sm"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:google"
size="sm"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:twitter"
size="sm"
/>
</ListItem>
<ListItem
position="relative"
margin="s-2"
display="inline-block"
>
<Anchor
to="/"
button
color="light"
icon="bi:github"
size="sm"
/>
</ListItem>
</List>
</Col>
</Row>
</Container>
</template>
NavbarBrand
vue
<template>
<Container
tag="footer"
text-alignment="center"
padding="y-5"
>
<NavbarBrand
display="inline-flex"
align-items="center"
margin="b-2"
to="/"
>
<b-img
padding="2 y-auto"
relative-width="100"
src="/img/logo/logo1.svg"
class="un-max-h-3em"
/>
</NavbarBrand>
<b-p
small
text-color="body-secondary"
margin="b-0"
>
© 2023 Example Inc. All rights reserved.
</b-p>
</Container>
</template>
Grid
vue
<template>
<Container
tag="footer"
margin="y-3"
>
<Row
align-items="md-center"
text-alignment="center sm-start"
>
<Col
col="md"
margin="b-3 b-md-0"
>
<Anchor
to="/"
>
<b-img
src="/img/logo/logo1.svg"
fluid
class="un-max-h-2em"
/>
</Anchor>
</Col>
<Col
col="sm"
margin="b-3 b-sm-0"
>
<Breadcrumb margin="b-0">
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
About
</BreadcrumbItem>
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
Services
</BreadcrumbItem>
<BreadcrumbItem
to="/"
link-underline-opacity="0"
color="secondary"
>
Our work
</BreadcrumbItem>
</Breadcrumb>
</Col>
<Col col="sm-auto">
<List
inline
margin="b-0"
>
<ListItem inline>
<b-button
color="secondary"
size="sm"
rounded="circle"
to="/"
>
<BIcon icon="bi:facebook" />
</b-button>
</ListItem>
<ListItem inline>
<b-button
color="secondary"
size="sm"
rounded="circle"
to="/"
icon="bi:google"
/>
</ListItem>
<ListItem inline>
<b-button
color="secondary"
size="sm"
rounded="circle"
to="/"
icon="bi:twitter"
/>
</ListItem>
<ListItem inline>
<b-button
color="secondary"
size="sm"
rounded="circle"
to="/"
icon="bi:github"
/>
</ListItem>
</List>
</Col>
</Row>
</Container>
</template>