"Toast on submit"
Bootstrap 4.1.1 Snippet by ThibaultLeveau

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body class="bg-light"> <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="4000"> <div class="toast-header"> <img src="https://www.logolynx.com/images/logolynx/72/72279ec5b6c49aef83d58464822bdc7d.jpeg" class="rounded mr-2 logo" alt="logo toast"> <strong class="mr-auto">Request sended !</strong> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> Hello, your request has been sended succesfully ! </div> </div> <div class="container" style="margin-top: 1em;"> <!-- Sign up form --> <form> <!-- Sign up card --> <div class="card person-card"> <div class="card-body"> <img id="img_sex" class="person-img" src="https://www.logolynx.com/images/logolynx/72/72279ec5b6c49aef83d58464822bdc7d.jpeg"> <h2 id="who_message" class="card-title">Contact us !</h2> <!-- First row (on medium screen) --> <div class="row"> <div class="form-group col-md-2"> <select id="input_sex" class="form-control"> <option value="Mr.">Mr.</option> <option value="Ms.">Ms.</option> </select> </div> <div class="form-group col-md-5"> <input id="first_name" type="text" class="form-control" placeholder="First name"> </div> <div class="form-group col-md-5"> <input id="last_name" type="text" class="form-control" placeholder="Last name"> </div> <div class="form-group col-md-12"> <textarea class="form-control" aria-label="With textarea" placeholder="Type your message here ..."></textarea> </div> <div class="form-group col-md-12 text-center"> <button id="sub_btn" type="button" class="btn btn-danger">!! Click here !!</button> </div> </div> </div> </div> </body> </html> <script> $( "#sub_btn" ).click(function() { $('.toast').toast('show'); }); </script>
.container { margin-top: 1em; } .toast { position: absolute; top: 0; right: 0; margin: 1em; z-index: 99; } .toast .logo { height: 2em; } /* IMG displaying */ .person-card { margin-top: 5em; padding-top: 5em; border-top: 1px solid #990000 !important; } .person-card .card-title{ text-align: center; } .person-card .person-img{ width: 10em; position: absolute; top: -5em; left: 50%; margin-left: -5em; border-radius: 100%; overflow: hidden; background-color: white; border-top: 3px solid #990000; } .btn-perso { position: center; }

Related: See More

Argon Design System

Questions / Comments: