Our BootstrapVue avatar offers a collection of cool avatars with different shapes, sizes and with the possibility to group them.
Examples
Use the .rounded-circle
modifier class to create a circle avatar.
<b-avatar href= "javascript:;" size= "lg" rounded= "sm" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
<b-avatar href= "javascript:;" size= "lg" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
Sizing
The most basic list group is an unordered list with list items and the proper classes. Build upon it with the options that follow, or with your own CSS as needed.
<b-avatar size= "sm" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
<b-avatar src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
<b-avatar size= "lg" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
<b-avatar size= "72px" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
<b-avatar size= "88px" src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" ></b-avatar>
Group
Include multiple avatar items inside an .avatar-group
container.
<div class= "avatar-group" >
<b-avatar src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-1.jpg" class= "avatar-sm rounded-circle" :size= "42" ></b-avatar>
<b-avatar src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-2.jpg" class= "avatar-sm rounded-circle" :size= "42" ></b-avatar>
<b-avatar src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-3.jpg" class= "avatar-sm rounded-circle" :size= "42" ></b-avatar>
<b-avatar src= "https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/theme/team-4.jpg" class= "avatar-sm rounded-circle" :size= "42" ></b-avatar>
</div>
If you want to see more examples and properties please check the official BootstrapVue Documentation .