Могу ли я изменить положение кнопки bootstrap

Question

Я сделал модал bootstrap, который открывается при нажатии кнопки. При нажатии кнопки появится всплывающее окно. Я хочу переместить кнопку в верхний правый угол экрана. Я также хочу изменить цвет кнопки. Как я могу это сделать?

<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"> <a href="#">Forgot password?</a></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

Добавьте класс к кнопке, а затем укажите его в CSS.

См. 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"> <a href="#">Forgot password?</a></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;
}