"Boot flex"
Bootstrap 4.1.1 Snippet by Phill120

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 ----------> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="icon" href="">--> <!-- googlefonts core CSS --> <link href="https://fonts.googleapis.com/css?family=Audiowide|Kaushan+Script|Roboto" rel="stylesheet"> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- fontawesome core CSS --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <title>Login Bootstrap flexbox </title> </head> <body> <div id="main"> <form class="box rounded" action="" method="post"> <div class="contrl has-addon text-center py-3"> <h3 class="font-weight-bold">Sign In</h3> </div> <div class="control has-addon"> <input type="text" class="control-field" placeholder="Enter Username" name="user_name"> <span class="control-addon "> <i class="fas fa-user" aria-hidden="true"></i> </span> </div> <div class="control has-addon"> <input type="password" class="control-field" placeholder="Password" name="user_password"> <span class="control-addon "> <i class="fas fa-eye-slash" aria-hidden="true"></i> </span> </div> <div class="control has-addon w-75 log-btn"> <input type="submit" name="login" class="control-field btn btn btn-success border-0 rounded-0 py-2" value="Login"> </div> <div class="contrl font-weight-bold text-center has-addon pt-4 py-3 al-link"> <a href="#">Forgot your password?</a> </div> <div class="contrl has-addon text-right py-1 cre-link"> <a href="#" class="text-muted btn btn-success rounded-0"> <i class="fas fa-user-plus fa-1x"></i> </a> </div> </form> </div> <!-- bootstrap core javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html>
*{margin:0; padding: 0;} html,body{height: 100%;} body{ display: flex; } #main{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; height: 100%; width: 100%; font-family: sans-serif; font-family: 'Roboto', sans-serif; border: 0; } h3{ font-family: 'Kaushan Script', cursive; font-size: 42px; text-shadow: 1px 1px 2px #FFf; } .box{ padding: 25px; border: 1px solid #ccc; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); width: 400px; overflow: auto; margin-bottom: 10px; box-sizing: border-box; } .control{ margin-bottom: 1em; } .control.has-addon{ display: flex; } .control.has-addon .control-addon{ background: #28a74a; width: 35px; } .control.has-addon .control-field:focus{ outline:0; border: 1px solid #20c997; border-right: none; } .control.has-addon .control-field:focus +.control-addon{ border: 1px solid #20c997; border-left: none; animation: fadecolor 2s; animation-iteration-count: infinite; } .control.has-addon .control-field{ flex: 1; border:1px solid #e3e3e3; } .control>*{ padding: 0.6em; } @keyframes fadecolor{ 50%{ color: #dc3545; } } .al-link a{ color:#012; font-family: 'Roboto', cursive; text-decoration: none; text-shadow: 1px 1px 2px #FFf; } .log-btn{ margin:0 auto; } .log-btn input[type=submit]{ color: #000; font-family: 'Kaushan+Script', cursive; font-size: 18px; border: none; } .cre-link a{ font-size:16px; font-weight:bold; } .cre-link i{ color:#012; }

Related: See More

Rubik Presentation Page
Boostrap Weather + Display Flex

Questions / Comments: