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

Bootstrap 4 モーダルサンプル 07

DEMO

RECIPE

HTML
<div class="container d-flex justify-content-center"> <button class="btn btn-icon bg-default text-light px-4" id="modal-buttton" data-toggle="modal" data-target="#my-modal"> <span><i class="fa fa-share-alt" aria-hidden="true"></i></span> Share</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="flex-col-auto">
                            <div class="card text-light">
                                <div class="card-header pb-0 border-0">
                                    <div class="row">
                                        <div class="col text-right"><img class="img-fluid m-3 cursor-pointer" src="https://retohercules.com/images/white-close-icon-png-3.png" data-dismiss="modal" alt="Image result for close png" width="17" height="17"></div>
                                    </div>
                                </div>
                                <div class="card-body pt-0 ">
                                    <div class="row px-4">
                                        <div class="col-sm-11 col text-left">
                                            <h6 class="mb-4 "> <b>Tell your friends !</b></h6>
                                            <p>If you like what we do,please tell your friends and share the love.</p>
                                            <div class="row justify-content-start no-gutters mb-4 mt-4">
                                                <div class="col-auto align-self-center"><button type="button" class="btn btn-icon btn-block mr-2 "><span><img src="https://img.icons8.com/color/48/000000/twitter.png" class="img-fluid mr-1" width="25"></span> <span class="fb"> Twitter</span></button></div>
                                                <div class="col-auto align-self-center"><button type="button" class="btn btn-icon btn-block ml-2 "><span><img src="https://i.imgur.com/URmkevm.png" class="img-fluid mr-1 my-auto" width="25"></span><span class="fb">Facebook</span></button> </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
CSS
 @import url('https://fonts.googleapis.com/css?family=Rubik&display=swap');

 body {
     background: #10131C;
     font-family: 'Rubik', sans-serif
 }

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

 p {
     font-size: 14px !important
 }

 .card {
     display: flex !important;
     justify-self: center !important;
     border-radius: 0px !important;
     background-color: #1A1C28;
     width: calc(350px + 10 * ((100vw - 320px) / 680))
 }

 small {
     font-size: 15px !important;
     display: flex;
     justify-content: center !important
 }

 .cursor-pointer {
     cursor: pointer
 }

 .modal {
     background-image: radial-gradient(circle 919px at 1.7% 6.1%, rgba(41, 58, 76, 1) 0%, rgb(11, 19, 22) 100.2%)
 }

 button {
     font-size: calc(12px + ((100vw - 360px) / (1600 - 320))) !important;
 }

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

 .btn-icon {
     border-radius: 0;
     letter-spacing: 1px;
     background-color: #0F1219 !important;
     color: #fff
 }

 .btn-icon:hover {
     color: #fff
 }

 #modal-buttton {
     border: 1px solid #fff
 }

 .fb {
     position: relative;
     top: 1px !important
 }

 .modal-content {
     background: transparent !important
 }

 @media (max-width: 387px) {
     .card {
         width: unset
     }

     .card-body {
         padding-left: 0;
         padding-right: 0
     }
 }
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