not able to change position of modal close button in bootstrap - html

Question

i have a bootstrap modal, which has a close button like below:
<button type="button" id="aloshimandan" class="close" data-dismiss="modal" style="right:7px;position: relative;top:7px;z-index: 1;margin-top:3%;">×</button>
the button is inside modal body,the button is appearing a little above the modal, am not able to move it down. i tried marggin-top property and all, gave it important attribute but still its not even moving. can anyone please tell me what could be wrong here, thanks in advance

Answer 1

As you can see, the button can be easily manipulated with CSS. More about Bootstrap 4 modals here https://getbootstrap.com/docs/4.0/components/modal/#live-demo
.modal-content .modal-header .close {
margin-right: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- needs for bootstrap .popper() -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<!-- bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" 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">×</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>