I am currently working on an Angular 4 project and I am trying to implement a pop-up using Bootstrap 4.
<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
{{modalTitle}}
</div>
</div>
<div class="modal-body">
Username : <input type="text" placeholder="username">
<br>
<br>
Password : <input type="password" placeholder="*****">
</div>
<div class="modal-footer">
<button type = "button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
Although the modal is working fine and displaying all text inputs correctly, the button seems to be extending outside the modal box. However, when I change the button element to
<input type="button" value="click me">For reference, here's the image.
If anyone has any suggestions or solutions, please let me know. Thank you!