can i change the position of a bootstrap button - html

Question

I made a bootstrap modal that will open when a button is clicked. A popup window will appear when the button is clicked. I want to shift the button to top right corner of the screen. I also want to change the colour of the button. How can I do so?
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
</div>

Answer 1

Add a class to the button and then target it in CSS.
See Codepen: https://codepen.io/manaskhandelwal1/pen/ZEGLvaz
HTML
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-lg btnStyle" data-toggle="modal" data-target="#logIn">Log in</button>
<!-- Modal -->
<div class="modal fade" id="logIn" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title1">Log in</h4>
</div>
<div class="modal-body">
<form class="sing_in_form">
<input type="text" placeholder="Email">
<input type="text" placeholder="password">
<p class="message"> Forgot password?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Log in</button>
</div>
</div>
</div>
CSS
button.btnStyle {
background-color: blue;
color: white;
position: absolute;
top: 10px;
right: 10px;
}