Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-avatar

Responsive React Avatar built with Bootstrap 5. Examples of circle or square avatar, avatar in a card, inside the navbar, testimonial carousel, profile card & more. https://mdbootstrap.com/docs/react/extended/avatar
https://github.com/mdbootstrap/react-avatar

avatar bootstrap bootstrap-template bootstrap-theme bootstrap5 css html js react

Last synced: 4 months ago
JSON representation

Responsive React Avatar built with Bootstrap 5. Examples of circle or square avatar, avatar in a card, inside the navbar, testimonial carousel, profile card & more. https://mdbootstrap.com/docs/react/extended/avatar

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



Responsive React Avatar built with Bootstrap 5. Examples of circle or square avatar, avatar in a card, inside the navbar, testimonial carousel, profile card & more.



Check out [React Avatar Documentation](https://mdbootstrap.com/docs/react/extended/avatar) for detailed instructions & even more examples.



## Basic example

![React Avatar Basic Example](https://user-images.githubusercontent.com/108793661/183424034-474ba2d2-04aa-4fbb-a75e-483a2720419d.png)

```js

import React from "react";

import { MDBContainer } from "mdb-react-ui-kit";



function App() {

  return (

    

      Avatar

    

  );

}



export default App;

```



## How to use?



1. Download MDB 5 - free REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples

### With shadows:

[![React Avatar #1](https://user-images.githubusercontent.com/108793661/183424427-cb6d1cf1-e062-48ed-af96-bea42d1686fe.png)](https://mdbootstrap.com/docs/react/extended/avatar#section-with-shadows)

### Square:

[![React Avatar #2](https://user-images.githubusercontent.com/108793661/183424570-566c85b6-776b-4086-9117-df77f7b811a8.png)](https://mdbootstrap.com/docs/react/extended/avatar#section-square)

### With content:

[![React Avatar #3](https://user-images.githubusercontent.com/108793661/183424682-9f96fdb3-36f3-429a-a9c1-40ba408e1f36.png)](https://mdbootstrap.com/docs/react/extended/avatar#section-with-content)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/avatar).






## More extended React documentation