Bootstrap Snippet Boot flex using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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> 
        
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
       *{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;
       }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Boot flex"
Bootstrap 4.1.1 Snippet by Phill120

Related: See More

Questions / Comments:

"Boot flex" Bootstrap 4.1.1 Snippet by Phill120

Related: See More

Questions / Comments:

"Boot flex"
Bootstrap 4.1.1 Snippet by Phill120