Missing example for specific navbar

Topic: Missing example for specific navbar

Ryukote 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.

Add comment

Jakub Strebeyko staff answered 6 years ago

1 0 Best answer

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 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

About author

Ryukote

0Support score
1Questions 0Answers

0Snippets likes 0Snippets