Bootstrap Login Template Free

Posted onby admin

Trendz is an attractive login form template which will make logging into your site a pleasant experience for the users. It has two boxes to enter email id and password respectively. It is also amazingly interactive with bootstrapped warning alerts. With only one CTA button, it simplifies the logging. Bootstrap 3 simple login form free template If you are using twitter bootstrap 3 frameworks then you can add it in your project. It is a simple login form free template and code snippet.

A few weeks ago I published some registration templates made with Bootstrap that seems you’re enjoying (385 downloads as I’m writing this!). Today I’ll continue this trend with some free Bootstrap login forms all packed in a handy .zip file.

The package contains 3 different responsive login templates to integrate in your Bootstrap projects and create nice login pages.

Bootstrap Login Template Free Download

Some of the features are: fullscreen background (with image slideshow also available), Font Awesome icons, simple jQuery form validation to prevent users from leaving the fields empty. Below you’ll find the full list of features, the live preview link and the download link. Enjoy!

Features

  • Responsive Layout (Bootstrap framework)
  • 3 Different Login Form Templates
  • Fullscreen Background (Images Slider also available, you can see it in “Template 2”)
  • Simple jQuery Form Validation (to prevent users from leaving empty fields)
  • Font Awesome icons

The 3 Login Templates

Template 1:

Template 2:

Template 3:

Demo, Download and License

DOWNLOAD: Bootstrap Login Forms: 3 Free Templates (164615 downloads)

Learn how to create a login page for a Bootstrap template with these forms.

LICENSE:

Bootstrap templates free download

You can use these login form templates in personal and commercial projects, but you can’t sell or distribute them directly, “as is”. If you plan to use them, a link to this page or any form of spreading the word will be much appreciated.

Bootstrap Sign In Page

Stay Updated

Bootstrap Login Form Template Free Download

Subscribe to the Azmind Newsletter and I’ll update you as soon as I release a new WordPress Theme, Bootstrap Template, Tutorial or other Freebie:

Bootstrap Css Templates Free

To learn how we use your data when you sign up to our newsletter, read our Privacy Policy here.

Login Registration Template Free Bootstrap

/* BASIC */html { background-color: #56baed;}body { font-family: 'Poppins', sans-serif; height: 100vh;}a { color: #92badd; display:inline-block; text-decoration: none; font-weight: 400;}h2 { text-align: center; font-size: 16px; font-weight: 600; text-transform: uppercase; display:inline-block; margin: 40px 8px 10px 8px; color: #cccccc;}/* STRUCTURE */.wrapper { display: flex; align-items: center; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 20px;}#formContent { -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background: #fff; padding: 30px; width: 90%; max-width: 450px; position: relative; padding: 0px; -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3); text-align: center;}#formFooter { background-color: #f6f6f6; border-top: 1px solid #dce8f1; padding: 25px; text-align: center; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;}/* TABS */h2.inactive { color: #cccccc;}h2.active { color: #0d0d0d; border-bottom: 2px solid #5fbae9;}/* FORM TYPOGRAPHY*/input[type=button], input[type=submit], input[type=reset] { background-color: #56baed; border: none; color: white; padding: 15px 80px; text-align: center; text-decoration: none; display: inline-block; text-transform: uppercase; font-size: 13px; -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4); box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4); -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; margin: 5px 20px 40px 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover { background-color: #39ace7;}input[type=button]:active, input[type=submit]:active, input[type=reset]:active { -moz-transform: scale(0.95); -webkit-transform: scale(0.95); -o-transform: scale(0.95); -ms-transform: scale(0.95); transform: scale(0.95);}input[type=text] { background-color: #f6f6f6; border: none; color: #0d0d0d; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 5px; width: 85%; border: 2px solid #f6f6f6; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;}input[type=text]:focus { background-color: #fff; border-bottom: 2px solid #5fbae9;}input[type=text]:placeholder { color: #cccccc;}/* ANIMATIONS *//* Simple CSS3 Fade-in-down Animation */.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; }}@keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; }}/* Simple CSS3 Fade-in Animation */@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }.fadeIn { opacity:0; -webkit-animation:fadeIn ease-in 1; -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;}.fadeIn.first { -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s;}.fadeIn.second { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s;}.fadeIn.third { -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s;}.fadeIn.fourth { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s;}/* Simple CSS3 Fade-in Animation */.underlineHover:after { display: block; left: 0; bottom: -10px; width: 0; height: 2px; background-color: #56baed; content: '; transition: width 0.2s;}.underlineHover:hover { color: #0d0d0d;}.underlineHover:hover:after{ width: 100%;}/* OTHERS */*:focus { outline: none;} #icon { width:60%;}