https://idea-hack.com/recipe/bootstrap-4-%e3%83%a2%e3%83%bc%e3%83%80%e3%83%ab%e3%82%b5%e3%83%b3%e3%83%97%e3%83%ab-09/

Bootstrap 4 モーダルサンプル 09

DEMO

RECIPE

HTML
<div class="container d-flex justify-content-center"> <button class="btn btn-primary" data-toggle="modal" data-target="#my-modal">Authentication</button>
    <div id="my-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered justify-content-center " role="document">
            <div class="modal-content border-0 mx-3">
                <div class="modal-body p-0">
                    <div class="row justify-content-center">
                        <div class="col-auto">
                            <div class="card border-0 justify-content-center">
                                <div class="card-header pb-0 bg-white text-center">
                                    <div class="row mb-0 justify-content-end">
                                        <div class="col-3"><img class="img-fluid cross mb-auto " src="https://i.imgur.com/YFpQ0hW.jpg" data-dismiss="modal"></div>
                                    </div>
                                    <div class="row mt-0">
                                        <div class="col"><img class="img-fluid text-center" src="https://i.imgur.com/kmvY5wU.jpg"></div>
                                    </div>
                                </div>
                                <div class="card-body text-center px-lg-5 px-md-4 mb-3">
                                    <h6 class="card-title card-1 font-weight-bold">Successful detection</h6>
                                    <p class="text-light">Fingerprint read successfully,click continue to perform your action</p>
                                    <div class="row justify-content-center mt-4">
                                        <div class="col-8"><button type="button" class="btn btn-success btn-block font-weight-bold text-dark mt-3" data-dismiss="modal">Continue</button></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
CSS
 @import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

 body {
     min-height: 81.9vh;
     font-family: 'Roboto Mono', monospace;
     background: linear-gradient(#c1e2f1, #f7e8f6)
 }

 .container {
     margin-top: 250px !important
 }

 p {
     font-size: calc(12px + (13 - 12) * ((100vw - 360px) / (1600 - 300))) !important;
 }

 button:focus {
     box-shadow: none !important;
     outline-width: 0
 }

 .card {
     background: #222222;
     border-radius: 11px !important;
     width: calc(280px + 10 * ((100vw - 320px) / 680));
     box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5)
 }

 .card-header {
     border: 0;
     border-radius: 11px !important
 }

 .btn-success {
     border-radius: 20px !important;
     background-color: #9BEAC0 !important
 }

 .btn-success:hover {
     background-color: #9BEAC0 !important
 }

 .card-header {
     background: #222222 !important;
     position: relative
 }

 img {
     width: 100px !important
 }

 .card-body {
     border-radius: 9px !important
 }

 .card-1 {
     color: #A4EAC0 !important
 }

 .cross {
     cursor: pointer;
     width: 45px !important
 }

 .modal {
     background: linear-gradient(#03a9f4, #e91ee3) !important
 }

 .modal-content {
     background: transparent !important
 }
Source
  • https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
  • https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
  • https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js