Bootstrap Dropdown Menus not displaying the items within the dropdown in WordPress

I am working on a child theme and have added Bootstrap just before the generic wp_enqueue_style of my theme to the functions.php as it follows:

if ( ! function_exists( 'ghostpool_enqueue_child_styles' ) ) {     function ghostpool_enqueue_child_styles() {          wp_enqueue_script( 'bootstrap_js', '', array('jquery'), NULL, true );                  wp_enqueue_style( 'bootstrap_css', '', false, NULL, 'all' );                  wp_enqueue_style( 'ghostpool-style', get_template_directory_uri() . '/style.css', array(), AARDVARK_THEME_VERSION );         wp_enqueue_style( 'ghostpool-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'ghostpool-style' ), AARDVARK_THEME_VERSION );         wp_style_add_data( 'ghostpool-child-style', 'rtl', 'replace' );     } } add_action( 'wp_enqueue_scripts', 'ghostpool_enqueue_child_styles' ); 

Then I have added raw HTML in a row with 4 columns to each of the columns, as it follows:

<div class="dropdown">   <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">     CHOOSE A GENRE   </button>   <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">     <a class="dropdown-item" href="#">Action</a>     <a class="dropdown-item" href="#">Another action</a>     <a class="dropdown-item" href="#">Something else here</a>   </div> </div> 

My dropdown buttons are displaying correctly, however when I click on them, they don’t display what is inside the dropdown? Am I forgetting to add any special js in the functions.php? Am I missing something?