React bootstrap navbar1

Question

I am new to react and I am using React bootstrap for the template .I am using specifically the navbar component of react. I am trying to centre the text in the middle. However it is coming like this:

Here is the code for the same:

import React,{Components} from 'react';
import Navbar from 'react-bootstrap/Navbar'
export class NavbarTop extends React.Component{
    render(){
        return(
            <div>
            <Navbar bg="dark" variant="dark">
    <Navbar.Brand href="#home">
      <img
        alt=""
        src="../img/TataLogo.png"
        width="30"
        height="30"
        className="d-inline-block align-top"
      />{' '}
      
    </Navbar.Brand>
    <Navbar.Brand href="#home">
    Best Practices Management System
    </Navbar.Brand>
  </Navbar>
  </div>
  );
}
}

export default NavbarTop;

Please help me in this. I used style justify centre but it didnt work

I wanted to center Best Practices Management System

Answer 1

You can use m-auto which is a class provided by bootstrap, and this will center the title horizontally

See snippet

    return (
      <div>
        <Navbar bg="dark" variant="dark">
          <Navbar.Brand href="#home">
          <img
            alt=""
            src="../img/TataLogo.png"
            width="30"
            height="30"
            className="d-inline-block align-top"
          />{' '}

        </Navbar.Brand>
        <Navbar.Brand href="#home" className="m-auto">
            Best Practices Management System
        </Navbar.Brand>
      </Navbar>
    </div>
  );