0

I'm running into some issues with Bootstrap 4.3.1 Modals and Angular 8, I already checked many cases that had the same issue but none of them worked.

What I've done :

So I literally copy/pasted the following code from Bootstrap official page (Live Demo one): Copied code

And it's not working and not rendering any errors in console or browser, here's my HTML: 

<button type="button"  data-toggle="modal" data-target="#exampleModal" class="btn btn-primary"></button>


<div class="modal fade in" id="exampleModal" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
 <div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
   </div>
  </div>
 </div>
</div>

Anyone had the same issue ?

EDIT :

Issue resolved following those steps : Solution

Thank's for your time and your help

Zephyr
  • 63
  • 11

1 Answers1

0

I think you installed incorrectly:

  1. npm install bootstrap npm install jquery — save
  2. Config angular.json 
...
"styles": [
  "src/styles.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...

3.Import directly in src/style.css or src/style.scss:

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

Jun
  • 103
  • 6