Jump to content

Free Bootstrap Login


Recommended Posts

So once again another free item for you all, just a simple bootstrap login I created this morning.

Login HTML Code:

<!DOCTYPE html>
<html lang="en">
       <meta charset="utf-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <meta name="description" content="">
       <meta name="author" content="CodingKid">
       <link rel="icon" href="../../favicon.ico">

       <title>Free Bootstrap Login</title>
       <!-- Credits -->
           <!-- Image Credit -->
           <!-- https://www.flickr.com/photos/ragnagne/2473176843/in/photolist-fxaD6m-4LxFj4-8ginSy-fwViYX-8HPiov-fxaCMd-8TE6a-fwVjXr-oWUfCD-dwfjaE-3EdLYm-9w9HqZ-dkH9DV-8zHPyH-769aHi-qHMnr-2Ho25t-5SzASB-9z3V5b-5SDXe9-fmRzgE-2iXuiB-58Xpo-7U3ZY-hMQvp-fwVjiK-7ivUMs-es6EVW-dmyfCP-5EKYcN-8TE8y-66URV8-4uL9Sb-eaE97-b1Br7-6U9GB1-5ERs8L-8pLdHz-bQB2He-2Ho3uM-nYxGuM-nYfvja-nYfwVg-o1k8Et-rnoDj-dNrxfQ-9hoEeP-4DWCjY-dA6ygq-dRAzXS/ -->

       <!-- Bootstrap core CSS -->
       <link href="css/bootstrap.min.css" rel="stylesheet">

       <!-- Custom CSS files -->
       <link href="css/login.css" rel="stylesheet">

       <!--- Fonts -->
       <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

       <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
       <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
       <script src="js/ie-emulation-modes-warning.js"></script>

       <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
       <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
       <!--- Nav bar start --->
       <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
       <div class="container">
       <div class="navbar-header">
         <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
           <span class="sr-only">Toggle navigation</span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
         <a class="navbar-brand" href="#">Game Name</a>
       <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
           <li class="active"><a href="#">Login</a></li>
           <li><a href="#">Storyline</a></li>
           <li><a href="#">Screenshots</a></li>
           <li><a href="#">Register</a></li>
           <li><a href="#">Contact Us</a></li>
       <!--- End Nav bar --->
       <!--- Gap --->
       <div STYLE="height:45px;">
       <!--- Top Section --->
       <div class="topsection">
           <div class="mafia">
           <div class="title">
               <h1>Game Name</h1>
               <h3>Game Slogan Here...</h3>
               <br />
               <button type="button" class="btn btn-danger">Register Today</button>
       <!--- End Top Section --->
       <!--- Login Section --->
       <div class="jumbatron">
           <div class="row">
               <!-- Col 2 -->
               <div class="col-md-2"></div>
               <!-- Col 4 -->
               <div class="col-md-4">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa neque, maximus non nunc vel, commodo vehicula nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed ipsum at neque gravida scelerisque. Ut orci sapien, ultrices a augue eu, fringilla rhoncus lectus. Pellentesque eu nibh a augue cursus condimentum id ac metus. Nam elementum purus justo, pellentesque laoreet elit tincidunt vitae. Donec semper risus ut dolor mattis tempus. 

               <!-- Col 4 -->
               <div class="col-md-4">
               <form method="#" action="#">
                       <div class="form-group">
                           <label for="Username">Username</label>
                           <input type="text" class="form-control" id="Username" placeholder="Enter username...">
                       <div class="form-group">
                           <label for="Password">Password</label>
                           <input type="text" class="form-control" id="Password" placeholder="Enter password...">
                       <button type="button" class="btn btn-primary">Sign In</button>
               <!-- Col 2 -->
               <div class="col-md-2"></div>
       <!--- End Login Section --->

   <!-- Bootstrap core JavaScript
   ================================================== -->
   <!-- Placed at the end of the document so the pages load faster -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="../../dist/js/bootstrap.min.js"></script>
   <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
   <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>


Login CSS Code:


body {

color: #FFFFFF;

background-color: #000000;


.topsection {

background-color: #000000;


height: 425px;


.mafia {

background-image: url(http://alacritymma.com/images/backgroundtwo.jpg);

padding-top: 80px;

width: 50%;

float: left;

height: 425px;


.title {

float: right;

padding-top: 20px;

padding-right: 300px;


.title h1 {

font-family: 'Montserrat', sans-serif;

color: #FE2E2E;

font-size: 48px;


.title h3 {

margin-top: -15px;

color: #BDBDBD;







Please note you must have bootstrap installed on your server for this to work!

You can download bootstrap at getbootstrap.com




Edited by KyleMassacre
Added correct tags
Link to comment
Share on other sites

  • 1 month later...
  • 6 months later...

I've updated your code as I wanted to do something different for a little bit. There was quite a bit of unnecessary mark up but good effort!

I've added the CDN references and a few little bits to make it look better on a mobile display as well.

HTML - http://pastebin.com/n7uBb0Dn

CSS - http://pastebin.com/Q0Vfscjz


Edit: I didn't even realise that this was from last year...

Edited by krballard94
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...