BootStrap не применяется к модалу

Question

Я пытаюсь использовать Bootstrap Модальный логин в моем приложении реакции, но почему-то Bootstrap CSS не применяется.

Код:

index. js

import 'bootstrap/dist/css/bootstrap.min.css';

Логин. js `

import React from 'react'
 const Login = (props) =>{
return(
<div>
<div id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">***Sign*** in</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

`

Ожидаемый результат должен соответствовать эталонному для Bootstrap Модальный :

https://mdbootstrap.com/snippets/jquery/temp/1891794?action=prism_export

Вывод, который я имею: