Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Missing example for specific navbar

Ryukote free asked 6 years ago

Hi, I am new to React and MDB. I found on the page for Navbar component this: imgur.com/S75U6JR but there is no example on how to use that Navbar. I want to have circle avatar like this Navbar have. Does anyone have sample for that? PS: I have placed version 1. I don't know what is the current version of mdbootstrap.

Jakub Strebeyko staff answered 6 years ago

Hi there Ryukote,

Welcome to our magical realm! Man, it is Bootstrap 4.1.0 already, step up!
The round avatar is achieved using CSS .rounded-circle class, try 

<DropdownToggle nav className="py-0"><img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" style={{height: '35px'}} className="rounded-circle z-depth-0" alt="avatar image"/></DropdownToggle>

as your DropDownToggle.

For future reference, we are bringing the library to consistency with the documentation styles, so feel free to just inspect the page with DevTools and grab the classes you like and use them in your project.

With Best Regards,
Kuba

Ryukote free commented 6 years ago

Thanks for your answer. I am aware of rounded-circle class, but I was wondering if that was also solved from the part of mdbootstrap components.

Jakub Strebeyko staff commented 6 years ago

Sure it is! Use the Avatar component: <Avatar tag="img" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" style={{height: '35px'}} className="z-depth-0" alt="avatar image" circle/> The circle prop there gives it the desired CSS class. Best, Kuba
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
Ryukote
0Support score
1Questions 0Answers 0Snippets