Bootstrap and jQuery error: $ is not defined

WordPress uses jQuery (and others) in noConflict mode, meaning that $ isn’t automatically available. To use $ in your jQuery script, wrap your code in this:

jQuery( document ).ready( function( $ ) {
    // $() will work as an alias for jQuery() inside of this function
    // [ your code goes here ]
} );

Reference: the User Contributed Note from ‘bcworkz’ on the manual page for wp_enqueue_script()

Also note: you shouldn’t try to load a new jQuery (which is what your bootstrap-jquery seems to be doing, if I’m reading this right). Instead, add jquery to the dependencies:

function my_scripts() {
    wp_enqueue_script( 'bootstrap-js' , 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'my-js', get_template_directory_uri() . '/js/custom.js' );

    wp_enqueue_style( 'bootstrap-css', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css', '', '1.0.0', 'all' );
    wp_enqueue_style( 'my-css', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700', false );

}
add_action( 'wp_enqueue_scripts', 'my_scripts' );