button is not appearing modal of bootstrap 4 - css

Question

I am trying to create a pop up using bootstrap 4 on angular 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>
The problem is everything works on the modal and I able to see also all the texts and password only the button is going outside the modal area that too only the text rest anything of the button is not visible, but when I do
<input type="button" value="click me"> It works
Here's the image
Could anyone help please ???

Answer 1

It seems that your button has float: right on it. Your style file could be overriding bootstrap style.

Answer 2

You were missing a closing div tag in your code. Also, I suspect that you might be using an outdated version of Bootstrap 4 files (most recent is beta 3).
The most recent Bootstrap 4 version uses popper.js instead of tether.js.
Here's what I see when using your code (after adding the missing closing tag):
That looks pretty much the way you want it to, right?
Here's the code I used (including the most recent Bootstrap 4 files):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<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>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>