I’m doing a project for one of my classes in university. First, I did a web app using React and now I want to change it and start using Bootstrap features to improve it. But I’m struggling to implement it. I don’t know how, for example, change my navbar for a bootstrap one.

This is one of my components:

import "./index.css";

import { Link } from 'react-router-dom';

export default function AppBar() {
    return (
        <div className="appbar">
            <div className="logo-container">
                <img src="logo.png" className="logo" />
                <span className="subtitle">Meu Game Favorito</span>
            </div>
            <Link to="/favoritos"><img src="fav.png" className="fav" alt="Favoritos"></img></Link>
        </div>
    );
}