부트스트랩 적용 방법
https://getbootstrap.kr/ 사이트 들어가서
좀 내리면 이거 나옴 복사해서 붙여주면 되는데 어디에 붙여주냐?? 이렇게 붙여주면 된다.
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 부트스트랩을 활용한 로그인 창 </ title >
integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" >
</ head >
< body >
integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
상단목록에 문서 > 컴포넌트 에서 원하는거 쓸 수도 있고 예시에 들어가서 로그인 폼이든 뭐 여러가지 쓸 수 있다. 예시에선 원하는 화면 클릭 후 페이지 소스보기 들어가서 복붙 해서 사용하면 됨 script나 php등을 적용하기 위해서 수정하긴 해야한다.
< link href = "sign-in.css"
이런식으로 css도 연결할 수 있으니 알아둘 것
login2.html
<! doctype html >
< html lang = "en" data-bs-theme = "auto" >
< head >< script src = "/docs/5.3/assets/js/color-modes.js" ></ script >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, 그리고 Bootstrap 기여자들" >
< meta name = "generator" content = "Hugo 0.122.0" >
< title > Signin Template · Bootstrap v5.3 </ title >
integrity = "sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin = "anonymous" >
<!-- Favicons -->
< meta name = "theme-color" content = "#712cf9" >
< style >
.bd-placeholder-img {
font-size : 1.125rem ;
text-anchor : middle ;
-webkit-user-select : none ;
-moz-user-select : none ;
user-select : none ;
}
@media ( min-width : 768px ) {
.bd-placeholder-img-lg {
font-size : 3.5rem ;
}
}
.b-example-divider {
width : 100% ;
height : 3rem ;
background-color : rgba ( 0 , 0 , 0 , .1 );
border : solid rgba ( 0 , 0 , 0 , .15 );
border-width : 1px 0 ;
box-shadow : inset 0 .5em 1.5em rgba ( 0 , 0 , 0 , .1 ), inset 0 .125em .5em rgba ( 0 , 0 , 0 , .15 );
}
.b-example-vr {
flex-shrink : 0 ;
width : 1.5rem ;
height : 100vh ;
}
.bi {
vertical-align : -.125em ;
fill : currentColor ;
}
.nav-scroller {
position : relative ;
z-index : 2 ;
height : 2.75rem ;
overflow-y : hidden ;
}
.nav-scroller .nav {
display : flex ;
flex-wrap : nowrap ;
padding-bottom : 1rem ;
margin-top : -1px ;
overflow-x : auto ;
text-align : center ;
white-space : nowrap ;
-webkit-overflow-scrolling : touch ;
}
.btn-bd-primary {
--bd-violet-bg : #712cf9 ;
--bd-violet-rgb : 112.520718 , 44.062154 , 249.437846 ;
--bs-btn-font-weight : 600 ;
--bs-btn-color : var ( --bs-white );
--bs-btn-bg : var ( --bd-violet-bg );
--bs-btn-border-color : var ( --bd-violet-bg );
--bs-btn-hover-color : var ( --bs-white );
--bs-btn-hover-bg : #6528e0 ;
--bs-btn-hover-border-color : #6528e0 ;
--bs-btn-focus-shadow-rgb : var ( --bd-violet-rgb );
--bs-btn-active-color : var ( --bs-btn-hover-color );
--bs-btn-active-bg : #5a23c8 ;
--bs-btn-active-border-color : #5a23c8 ;
}
.bd-mode-toggle {
z-index : 1500 ;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display : block !important ;
}
</ style >
<!-- Custom styles for this template -->
< link href = "sign-in.css" rel = "stylesheet" >
</ head >
< body class = "d-flex align-items-center py-4 bg-body-tertiary" >
< symbol id = "check2" viewBox = "0 0 16 16" >
< path d = "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</ symbol >
< symbol id = "circle-half" viewBox = "0 0 16 16" >
< path d = "M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
</ symbol >
< symbol id = "moon-stars-fill" viewBox = "0 0 16 16" >
< path d = "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
< path d = "M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
</ symbol >
< symbol id = "sun-fill" viewBox = "0 0 16 16" >
< path d = "M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</ symbol >
</ svg >
< div class = "dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle" >
< button class = "btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id = "bd-theme"
type = "button"
aria-expanded = "false"
data-bs-toggle = "dropdown"
aria-label = "Toggle theme (auto)" >
< svg class = "bi my-1 theme-icon-active" width = "1em" height = "1em" >< use href = "#circle-half" ></ use ></ svg >
< span class = "visually-hidden" id = "bd-theme-text" > Toggle theme </ span >
</ button >
< ul class = "dropdown-menu dropdown-menu-end shadow" aria-labelledby = "bd-theme-text" >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "light" aria-pressed = "false" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#sun-fill" ></ use ></ svg >
Light
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "dark" aria-pressed = "false" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#moon-stars-fill" ></ use ></ svg >
Dark
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center active" data-bs-theme-value = "auto" aria-pressed = "true" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#circle-half" ></ use ></ svg >
Auto
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
</ ul >
</ div >
< main class = "form-signin w-100 m-auto" >
< form method = "post" id = "login_form" name = "login_form" action = "login_ok.php" autocomplete = "off" >
< h1 class = "h3 mb-3 fw-normal" > Please sign in </ h1 >
< div class = "form-floating" >
< input type = "text" class = "form-control" name = "id" id = "id" placeholder = "아이디를 입력하세요" >
< label for = "floatingInput" > 아이디 </ label >
</ div >
< div class = "form-floating" >
< input type = "password" class = "form-control" name = "pw" id = "pw" placeholder = "Password" >
< label for = "floatingPassword" > 비밀번호 </ label >
</ div >
< div class = "form-check text-start my-3" >
< input class = "form-check-input" type = "checkbox" value = "remember-me" id = "flexCheckDefault" >
< label class = "form-check-label" for = "flexCheckDefault" >
Remember me
</ label >
</ div >
< button class = "btn btn-primary w-100 py-2" type = "button" id = "login_btn" > Sign in </ button >
< p class = "mt-5 mb-3 text-body-secondary" > © 2017–2024 </ p >
</ form >
</ main >
< script >
const login_btn = document . querySelector ( "#login_btn" );
login_btn . addEventListener ( "click" , () => {
const id = document . querySelector ( "#id" );
const pw = document . querySelector ( "#pw" );
if ( id . value == "" ) {
alert ( '아이디 입력해요' );
id . focus ();
return false ;
}
if ( pw . value == "" ) {
alert ( '비밀번호 입력해요' );
pw . focus ();
return false ;
}
const xhr = new XMLHttpRequest ();
xhr . open ( "POST" , "./login_ok.php" , true );
const login_form = document . querySelector ( "#login_form" );
const f = new FormData ( login_form );
xhr . send ( f );
xhr . onload = () => {
if ( xhr . status == 200 ) {
const data = JSON . parse ( xhr . responseText );
if ( data . result == 'success' ) {
alert ( "로그인 성공" )
self . location . href = './member.php' ;
} else if ( data . result == 'fail' ) {
alert ( "로그인 실패 아디 비번 뭔가 이상함" )
}
} else {
alert ( '통신 실패' );
}
}
});
</ script >
< script src = "/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous" ></ script >
integrity = "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin = "anonymous" >
</ script >
</ body >
</ html >
member.php
<?php
session_start ();
if (! isset ( $_SESSION [ 'id' ]) or $_SESSION [ 'id' ] = '' ) {
echo "이 페이지에 접근할 수 없습니다." ;
exit ;
}
? >
<! doctype html >
< html lang = "en" class = "h-100" data-bs-theme = "auto" >
< head >< script src = "/docs/5.3/assets/js/color-modes.js" ></ script >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "" >
< meta name = "author" content = "Mark Otto, Jacob Thornton, 그리고 Bootstrap 기여자들" >
< meta name = "generator" content = "Hugo 0.122.0" >
< title > Sticky Footer Navbar Template · Bootstrap v5.3 </ title >
<!-- Favicons -->
< meta name = "theme-color" content = "#712cf9" >
< style >
.bd-placeholder-img {
font-size : 1.125rem ;
text-anchor : middle ;
-webkit-user-select : none ;
-moz-user-select : none ;
user-select : none ;
}
@media ( min-width : 768px ) {
.bd-placeholder-img-lg {
font-size : 3.5rem ;
}
}
.b-example-divider {
width : 100% ;
height : 3rem ;
background-color : rgba ( 0 , 0 , 0 , .1 );
border : solid rgba ( 0 , 0 , 0 , .15 );
border-width : 1px 0 ;
box-shadow : inset 0 .5em 1.5em rgba ( 0 , 0 , 0 , .1 ), inset 0 .125em .5em rgba ( 0 , 0 , 0 , .15 );
}
.b-example-vr {
flex-shrink : 0 ;
width : 1.5rem ;
height : 100vh ;
}
.bi {
vertical-align : -.125em ;
fill : currentColor ;
}
.nav-scroller {
position : relative ;
z-index : 2 ;
height : 2.75rem ;
overflow-y : hidden ;
}
.nav-scroller .nav {
display : flex ;
flex-wrap : nowrap ;
padding-bottom : 1rem ;
margin-top : -1px ;
overflow-x : auto ;
text-align : center ;
white-space : nowrap ;
-webkit-overflow-scrolling : touch ;
}
.btn-bd-primary {
--bd-violet-bg : #712cf9 ;
--bd-violet-rgb : 112.520718 , 44.062154 , 249.437846 ;
--bs-btn-font-weight : 600 ;
--bs-btn-color : var ( --bs-white );
--bs-btn-bg : var ( --bd-violet-bg );
--bs-btn-border-color : var ( --bd-violet-bg );
--bs-btn-hover-color : var ( --bs-white );
--bs-btn-hover-bg : #6528e0 ;
--bs-btn-hover-border-color : #6528e0 ;
--bs-btn-focus-shadow-rgb : var ( --bd-violet-rgb );
--bs-btn-active-color : var ( --bs-btn-hover-color );
--bs-btn-active-bg : #5a23c8 ;
--bs-btn-active-border-color : #5a23c8 ;
}
.bd-mode-toggle {
z-index : 1500 ;
}
.bd-mode-toggle .dropdown-menu .active .bi {
display : block !important ;
}
</ style >
<!-- Custom styles for this template -->
< link href = "sticky-footer-navbar.css" rel = "stylesheet" >
</ head >
< body class = "d-flex flex-column h-100" >
< symbol id = "check2" viewBox = "0 0 16 16" >
< path d = "M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z" />
</ symbol >
< symbol id = "circle-half" viewBox = "0 0 16 16" >
< path d = "M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
</ symbol >
< symbol id = "moon-stars-fill" viewBox = "0 0 16 16" >
< path d = "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" />
< path d = "M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z" />
</ symbol >
< symbol id = "sun-fill" viewBox = "0 0 16 16" >
< path d = "M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
</ symbol >
</ svg >
< div class = "dropdown position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle" >
< button class = "btn btn-bd-primary py-2 dropdown-toggle d-flex align-items-center"
id = "bd-theme"
type = "button"
aria-expanded = "false"
data-bs-toggle = "dropdown"
aria-label = "Toggle theme (auto)" >
< svg class = "bi my-1 theme-icon-active" width = "1em" height = "1em" >< use href = "#circle-half" ></ use ></ svg >
< span class = "visually-hidden" id = "bd-theme-text" > Toggle theme </ span >
</ button >
< ul class = "dropdown-menu dropdown-menu-end shadow" aria-labelledby = "bd-theme-text" >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "light" aria-pressed = "false" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#sun-fill" ></ use ></ svg >
Light
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center" data-bs-theme-value = "dark" aria-pressed = "false" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#moon-stars-fill" ></ use ></ svg >
Dark
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
< li >
< button type = "button" class = "dropdown-item d-flex align-items-center active" data-bs-theme-value = "auto" aria-pressed = "true" >
< svg class = "bi me-2 opacity-50" width = "1em" height = "1em" >< use href = "#circle-half" ></ use ></ svg >
Auto
< svg class = "bi ms-auto d-none" width = "1em" height = "1em" >< use href = "#check2" ></ use ></ svg >
</ button >
</ li >
</ ul >
</ div >
< header >
<!-- Fixed navbar -->
< nav class = "navbar navbar-expand-md navbar-dark fixed-top bg-dark" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Fixed navbar </ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarCollapse" aria-controls = "navbarCollapse" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
< div class = "collapse navbar-collapse" id = "navbarCollapse" >
< ul class = "navbar-nav me-auto mb-2 mb-md-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home </ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link </ a >
</ li >
< li class = "nav-item" >
< a class = "nav-link disabled" aria-disabled = "true" > Disabled </ a >
</ li >
</ ul >
< form class = "d-flex" role = "search" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search </ button >
</ form >
</ div >
</ div >
</ nav >
</ header >
<!-- Begin page content -->
< main class = "flex-shrink-0" >
< div class = "container" >
< h1 class = "mt-5" > Sticky footer with fixed navbar </ h1 >
< p class = "lead" > Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with < code class = "small" > padding-top: 60px; </ code > on the < code class = "small" > main > .container </ code > . </ p >
< p > Back to < a href = "/docs/5.3/examples/sticky-footer/" > the default sticky footer </ a > minus the navbar. </ p >
</ div >
</ main >
< footer class = "footer mt-auto py-3 bg-body-tertiary" >
< div class = "container" >
< span class = "text-body-secondary" > Place sticky footer content here. </ span >
</ div >
</ footer >
</ body >
</ html >
login_ok.php
<?php
include "db.php" ;
// print_r($_POST);
$id = $_POST [ 'id' ];
$pw = $_POST [ 'pw' ];
$sql = " SELECT * FROM member WHERE user_id = :user_id AND passwd = :pw " ;
$stmt = $conn -> prepare ( $sql );
$stmt -> bindParam ( ':user_id' , $id );
$stmt -> bindParam ( ':pw' , $pw );
$stmt -> execute ();
$row = $stmt -> fetch ();
if ( $row ) {
session_start ();
$_SESSION [ 'id' ] = $id ;
$arr = [ 'result' => 'success' ];
die ( json_encode ( $arr ));
} else {
$arr = [ 'result' => 'fail' ];
die ( json_encode ( $arr ));
}
sign-in.css
html ,
body {
height : 100% ;
}
.form-signin {
max-width : 330px ;
padding : 1rem ;
}
.form-signin .form-floating:focus-within {
z-index : 2 ;
}
.form-signin input [ type = "email" ] {
margin-bottom : -1px ;
border-bottom-right-radius : 0 ;
border-bottom-left-radius : 0 ;
}
.form-signin input [ type = "password" ] {
margin-bottom : 10px ;
border-top-left-radius : 0 ;
border-top-right-radius : 0 ;
}
stick-footer-navbar.css
main > .container {
padding : 60px 15px 0 ;
}