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-05/

Bootstrap 4 モーダルサンプル 05

DEMO

RECIPE

HTML
<div class="container d-flex justify-content-center"> <button class="btn btn-primary" data-toggle="modal" data-target="#my-modal">Verification</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="card border-0">
                        <div class="card-header pb-0 bg-white">
                            <div class="row">
                                <div class="col-10">
                                    <h5 class="font-weight-bold mt-2">Your documents being reviewed by our experts. </h5>
                                </div>
                                <div class="col-2 my-auto"> <span class="text-right"><button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button></span></div>
                            </div>
                        </div>
                        <div class="card-body">
                            <p class="text-muted text-left"> We'll notify you as soon as your documents have been reviewed,and appored by our expert team</p> <img src="https://i.imgur.com/F5hfOap.jpg" class="img-fluid" />
                            <div class="row justify-content-center mt-4">
                                <div class="col-6"><button type="button" class="btn btn-outline-success btn-block font-weight-bold text-dark" data-dismiss="modal">Got it</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
CSS
@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

body {
    min-height: 82.5vh;
    font-family: 'Rubik', sans-serif;
    background: linear-gradient(140deg, #fff, 50%, #74a0ff) center center
}

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

img {
    width: 250px
}

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

.card {
    border-radius: 11px !important;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
    border-top-color: #52B4DB !important
}

.modal-content {
    width: calc(330px + 10 * ((100vw - 320px) / 680));
    border-radius: 11px !important
}

.card-header {
    border: 0;
    border-top: 14px solid #52B4DB !important;
    border-radius: 11px !important
}

.btn-outline-success {
    border-radius: 20px !important;
    border: 2px solid #52B4DB !important
}

.btn-outline-success:hover {
    color: #fff !important;
    background-color: #52B4DB !important
}

img {
    width: 350px !important
}

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

.btn-outline-success:active,
.btn-outline-success.active {
    box-shadow: none !important;
    outline: none !important
}

@media (max-width: 401px) {
    .card {
        width: unset
    }
}
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