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

use-bootstrap

Proudly part of the Nova Group. family alongside Nova .

© 2023 Example Inc. All rights reserved.

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

© 2023 Example Inc. All rights reserved.

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

© 2023 Example Inc. All rights reserved.

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>