Avatar

Size

Using Bootstrap's typical naming structure, you can create a standard avatar, or scale it up to different sizes based on what's needed.

<fmv-avatar src="/images/256_rsz_nicolas-horn-689011-unsplash.jpg"
  alt="avatar"
  size="xxl"
  circle />

<fmv-avatar src="/images/256_rsz_karl-s-973833-unsplash.jpg"
  alt="avatar"
  size="xl"
  circle />

<fmv-avatar src="/images/256_rsz_florian-perennes-594195-unsplash.jpg"
  alt="avatar"
  size="lg"
  circle />

<fmv-avatar src="/images/256_rsz_james-gillespie-714755-unsplash.jpg"
  alt="avatar"
  circle />

<fmv-avatar src="/images/256_rsz_sharina-mae-agellon-377466-unsplash.jpg"
  alt="avatar"
  size="sm"
  circle />

<fmv-avatar src="/images/256_rsz_90-jiang-640827-unsplash.jpg"
  alt="avatar"
  size="xs"
  circle />

Status Indicator

Add an online or offline status indicator to show user's availability.

<fmv-avatar src="/images/256_rsz_nicolas-horn-689011-unsplash.jpg"
  alt="avatar"
  size="xxl"
  status="offline"
  circle />

<fmv-avatar src="/images/256_rsz_karl-s-973833-unsplash.jpg"
  alt="avatar"
  size="xl"
  status="online"
  circle />

Shape

Change the shape of an avatar with the default Bootstrap image classes.

<fmv-avatar src="/images/256_rsz_nicolas-horn-689011-unsplash.jpg"
  alt="avatar"
  size="xxl" />

<fmv-avatar src="/images/256_rsz_karl-s-973833-unsplash.jpg"
  alt="avatar"
  size="xl"
  circle />

Ratio

Change the proportional relationship between the width and height of an avatar to 4 by 3 by setting the landscape property.

<fmv-avatar src="/images/256_rsz_nicolas-horn-689011-unsplash.jpg"
  alt="avatar"
  size="xxl"
  landscape />

Title

You won't always have an image for every user, so easily use initials instead.

LB LB LB LB LB LB

<fmv-avatar size="xxl"
  circle
  title="LB" />

<fmv-avatar> Reference

<fmv-avatar> Properties

Property	Type	Default Value
element	String	span
src	String
alt	String
img-class	String
title	String or Boolean
title-class	String
size	String
landscape	Boolean	false
rounded	Boolean	true
circle	Boolean	false
no-link	Boolean	false
status	String
href	String
rel	String
target	String	_self
active	Boolean	false
disabled	Boolean	false
to	String or Object
append	Boolean	false
replace	Boolean	false
event	String or Array	click
active-class	String
exact	Boolean	false
exact-active-class	String
router-tag	String	a
no-prefetch	Boolean	false

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset