<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="msvalidate.01" content="36A28D9109C077BA3E623651FC1656F4" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="fb:admins" content="19908503" />
<meta property="fb:app_id" content="112989545392380" />
<meta property="og:title" content="HTML Snippets for Twitter Boostrap framework : Bootsnipp.com" />
<meta property="og:type" content="website" />
<meta property="twitter:account_id" content="786331568" />
<meta property="og:url" content="http://bootsnipp.com/snippets/2X0r" />
<meta itemprop="name" content="Login & Signup forms in panel">
<meta itemprop="description" content="login, forms, panel, registration, Bootstrap snippet by calvinko">
<meta name="description" content="login, forms, panel, registration, Bootstrap HTML CSS JS code snippet by calvinko">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@bootsnipp">
<meta name="twitter:title" content="Login & Signup forms in panel">
<meta name="twitter:description" content="login, forms, panel, registration, Bootstrap HTML CSS JS code snippet by calvinko">
<meta name="twitter:creator" content="@bootsnipp">
<meta name="twitter:image:src" content="http://bootsnipp.com/img/screenshots/2db464d97cbad6d7bf3e97766d4c032c76830995.png ">
<meta property="og:image" content="http://bootsnipp.com/img/logo.jpg" />
<meta property="og:site_name" content="Bootsnipp.com" />
<meta property="og:description" content="Awesome Bootstrap HTML CSS JS Snippet on Bootsnipp.com." />
<meta name="author" content="Maks Surguy, @msurguy">
<title>
Viewing snippet Login & Signup forms in panel | Bootsnipp.com</title>
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-144x144-precomposed.png">
<link rel="alternate" type="application/rss+xml" title="Latest snippets from Bootsnipp.com" href="http://bootsnipp.com/feed.rss" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=70eabcd8097cd299e1ba8efe436992b7">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-34731274-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
var fb_param = {};
fb_param.pixel_id = '6007046190250';
fb_param.value = '0.00';
(function(){
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
</script>
<noscript><img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/offsite_event.php?id=6007046190250&value=0" /></noscript>
</head>
<body>
<nav class="navbar navbar-fixed-top navbar-bootsnipp animate" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="animbrand">
<a class="navbar-brand animate" href="http://bootsnipp.com">Bootsnipp</a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right">
<li class="visible-xs">
<form action="http://bootsnipp.com/search" method="GET" role="search">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="Search for snippets">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit"><span class="glyphicon glyphicon-search"></span></button>
<button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</form>
</li>
<li class=""><a href="http://bootsnipp.com/about" class="animate">About</a></li>
<li>
<a href="#" class="dropdown-toggle animate " data-toggle="dropdown">Resources <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class=""><a href="http://bootsnipp.com/blog" class="animate">Blog <span class="pull-right glyphicon glyphicon-pencil"></span></a></li>
<li class=""><a href="http://bootsnipp.com/resources" class="animate">List of resources <span class="pull-right glyphicon glyphicon-align-justify"></span></a></li>
<li><a href="http://getbootstrap.com" target="_blank" class="animate">Download Bootstrap <span class="pull-right glyphicon glyphicon-cloud-download"></span></a></li>
<li class="dropdown-header">Bootstrap Templates</li>
<li class=""><a href="http://bootsnipp.com/templates" class="animate">Browse Templates <span class="pull-right glyphicon glyphicon-shopping-cart"></span></a></li>
<li class="dropdown-header">Builders</li>
<li class=""><a href="http://bootsnipp.com/forms" class="animate">Form Builder <span class="pull-right glyphicon glyphicon-tasks"></span></a></li>
<li class=""><a href="http://bootsnipp.com/buttons" class="animate">Button Builder <span class="pull-right glyphicon glyphicon-edit"></span></a></li>
</ul>
</li>
<li class="dropdown">
<a href="http://bootsnipp.com/snippets" class="dropdown-toggle animate" data-toggle="dropdown">Snippets <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="active"><a href="http://bootsnipp.com/snippets/featured" class="animate">Featured <span class="pull-right glyphicon glyphicon-star"></span></a></li>
<li class=""><a href="http://bootsnipp.com/tags" class="animate">Tags <span class="pull-right glyphicon glyphicon-tags"></span></a></li>
<li class="dropdown-header">By Bootstrap Version</li>
<li><a href="http://bootsnipp.com/tags/3.3.0" class="animate">3.3.0</a></li>
<li><a href="http://bootsnipp.com/tags/3.2.0" class="animate">3.2.0</a></li>
<li><a href="http://bootsnipp.com/tags/3.1.0" class="animate">3.1.0</a></li>
<li><a href="http://bootsnipp.com/tags/3.0.3" class="animate">3.0.3</a></li>
<li><a href="http://bootsnipp.com/tags/3.0.1" class="animate">3.0.1</a></li>
<li><a href="http://bootsnipp.com/tags/3.0.0" class="animate">3.0.0</a></li>
<li><a href="http://bootsnipp.com/tags/2.3.2" class="animate">2.3.2</a></li>
</ul>
</li>
<li><a href="http://bootsnipp.com/user/snippets/new" class="animate">New Snippet</a></li>
<li class="dropdown dropdown-right">
<a href="#" class="dropdown-toggle animate" data-toggle="dropdown">Profile <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class=""><a href="http://bootsnipp.com/user" class="animate">My Profile <img src="https://secure.gravatar.com/avatar/f675846e3928f1685a5ec5d8557b7477?s=100&r=g&d=mm" width="18px" class="pull-right"></a></li>
<li class=""><a href="http://bootsnipp.com/user/favorites" class="animate">Favorited Snippets <span class="pull-right glyphicon glyphicon-star"></span></a></li>
<li class=""><a href="http://bootsnipp.com/user/settings" class="animate">Settings <span class="pull-right glyphicon glyphicon-cog"></span></a></li>
<li><a href="http://bootsnipp.com/logout" class="animate">Logout <span class="pull-right glyphicon glyphicon-log-out"></span></a></li>
</ul>
</li>
<li class="hidden-xs"><a href="#toggle-search" class="animate"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
<div class="bootsnipp-search animate">
<div class="container">
<form action="http://bootsnipp.com/search" method="GET" role="search">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="Search for snippets and hit enter">
<span class="input-group-btn">
<button class="btn btn-danger" type="reset"><span class="glyphicon glyphicon-remove"></span></button>
</span>
</div>
</form>
</div>
</div>
</nav> <div class="container" style="margin-top:10px;">
<div class="row" itemscope="http://schema.org/Thing">
<div class="col-md-4 col-md-push-8 ads-container">
<div id="carbonads-container">
<div class="carbonad" style="width:100%;">
<div id="azcarbon"></div>
<script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/19624/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
</div>
</div>
<p class="text-muted text-center hidden-xs">Ads cover the costs of maintaining Bootsnipp</p>
</div>
<div class="col-md-8 col-md-pull-4">
<div class="title-bar">
<a href="http://bootsnipp.com/calvinko" title="Bootstrap snippets by calvinko" class="avatar-sm-container pull-left"><img src="https://secure.gravatar.com/avatar/6c34f4f35fccb0daf4cdb803d4f4d8d6?s=100&r=g&d=mm" class="img-rounded user-avatar-sm"></a>
<div class="pull-right social-sharing hidden-xs">
Share on:
<a href="#" class="btn btn-primary"
onclick="window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel') +'&t=' + encodeURIComponent('Login & Signup forms in panel #Bootstrap #snippet'),
'facebook-share-dialog',
'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 ));
return false;">
<i class="icon-facebook"></i>
</a>
<a href="#" class="btn btn-info"
onclick="window.open(
'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/',
'twitter-share-dialog',
'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 ));
return false;">
<i class="icon-twitter"></i>
</a>
</div>
<h4 itemprop="name">"Login & Signup forms in panel"<br>
<small>Bootstrap 3.1.0 Snippet by <a href="http://bootsnipp.com/calvinko" title="Bootstrap snippets by calvinko" itemscope itemtype="http://schema.org/Person" itemprop="name">calvinko</a></small>
</h4>
<div class="clearfix"></div>
</div>
<div id="tags" itemprop="description">
<span>Tags</span>
<a href="http://bootsnipp.com/tags/3.1.0"><span class="label label-primary">3.1.0</span></a>
<a href="http://bootsnipp.com/tags/login" title="login"><span class="label label-primary">login</span></a>
<a href="http://bootsnipp.com/tags/forms" title="forms"><span class="label label-primary">forms</span></a>
<a href="http://bootsnipp.com/tags/panel" title="panel"><span class="label label-primary">panel</span></a>
<a href="http://bootsnipp.com/tags/registration" title="registration"><span class="label label-primary">registration</span></a>
</div>
<div id="action-bar">
<a href="#" class="btn btn-default disabled"><i class="icon-eye-open"></i> 211.7K Views</a>
<a href="#comments" class="btn btn-default tip" title="View comments"><i class="icon-comment"></i> Comments</a>
<a href="#" class="btn btn-default tip fav ladda-button" title="Favorite this snippet" data-style="expand-right" data-spinner-color="#428bca"><span class="glyphicon glyphicon-thumbs-up"></span></a>
</div>
<div class="row visible-xs">
<div class="col-md-12">
<p>
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary"
onclick="window.open(
'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel') +'&t=' + encodeURIComponent('Login & Signup forms in panel #Bootstrap #snippet'),
'facebook-share-dialog',
'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 ));
return false;">
<i class="icon-facebook"></i> Post to Facebook
</a>
<a href="#" class="btn btn-info"
onclick="window.open(
'https://twitter.com/share?url='+encodeURIComponent('http://bootsnipp.com/snippets/featured/login-amp-signup-forms-in-panel')+'&text='+encodeURIComponent('I shared a cool #snippet on @bootsnipp :') + '&count=none/',
'twitter-share-dialog',
'width=626,height=436,top='+((screen.height - 436) / 2)+',left='+((screen.width - 626)/2 ));
return false;">
<i class="icon-twitter"></i> Tweet this
</a>
</div>
</p>
</div>
</div>
<div class="row" style="margin-top:10px;">
<div class="col-md-7">
<div class="btn-group">
<button type="button" id="show-preview" class="active btn btn-info">Preview</button>
<button type="button" id="show-html" class="btn btn-info">HTML</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-cog"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu">
<li><a href="http://bootsnipp.com/user/snippets/download/2X0r" target="_blank"><span class="glyphicon glyphicon-cloud-download"></span> Download snippet</a></li>
<li><a href="http://bootsnipp.com/fullscreen/2X0r" target="_blank"><span class="glyphicon glyphicon-fullscreen"></span> View Full Screen</a></li>
</ul>
</div>
<a href="http://bootsnipp.com/fork/2X0r" id="reboot" class="btn btn-default tip" title="Copy this snippet"><span class="glyphicon glyphicon-retweet"></span> Fork this</a>
</div>
<div class="col-md-5">
<div class="form-group theme-control">
<label for="text" style="float:left;margin-right:5px; padding-top:5px; font-weight: normal;">Theme <a href="#" class="tip" data-toggle="tooltip" data-placement="bottom" title="You can preview snippets using a theme from Bootswatch"><span class="glyphicon glyphicon-question-sign"></span></a></label>
<div class="input-group">
<select class="form-control" name="bootstrap-theme" id="theme_chooser">
<option value="">Plain Bootstrap</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/amelia/bootstrap.min.css">Amelia</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cerulean/bootstrap.min.css">Cerulean</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cosmo/bootstrap.min.css">Cosmo</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/cyborg/bootstrap.min.css">Cyborg</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.min.css">Flatly</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css">Journal</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/lumen/bootstrap.min.css">Lumen</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/readable/bootstrap.min.css">Readable</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/simplex/bootstrap.min.css">Simplex</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/slate/bootstrap.min.css">Slate</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/spacelab/bootstrap.min.css">Spacelab</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/superhero/bootstrap.min.css">Superhero</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/united/bootstrap.min.css">United</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/yeti/bootstrap.min.css">Yeti</option><option value="//maxcdn.bootstrapcdn.com/bootswatch/3.3.0/darkly/bootstrap.min.css">Darkly</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="playground-container">
<div id="preview-container"><iframe id="snippet-preview" class="preview-iframe" src="http://bootsnipp.com/iframe/2X0r"></iframe></div>
<div class="container">
<div class="row" itemscope="http://schema.org/Code" >
<div class="col-lg-12" itemprop="programmingLanguage" content="html/css/js">
<div id="editor-html" class="playground-editor" itemprop="sampleType"> <div class="container">
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info" >
<div class="panel-heading">
<div class="panel-title">Sign In</div>
<div style="float:right; font-size: 80%; position: relative; top:-10px"><a href="#">Forgot password?</a></div>
</div>
<div style="padding-top:30px" class="panel-body" >
<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
<form id="loginform" class="form-horizontal" role="form">
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
</div>
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="password">
</div>
<div class="input-group">
<div class="checkbox">
<label>
<input id="login-remember" type="checkbox" name="remember" value="1"> Remember me
</label>
</div>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-sm-12 controls">
<a id="btn-login" href="#" class="btn btn-success">Login </a>
<a id="btn-fblogin" href="#" class="btn btn-primary">Login with Facebook</a>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#" onClick="$('#loginbox').hide(); $('#signupbox').show()">
Sign Up Here
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="signupbox" style="display:none; margin-top:50px" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">Sign Up</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px"><a id="signinlink" href="#" onclick="$('#signupbox').hide(); $('#loginbox').show()">Sign In</a></div>
</div>
<div class="panel-body" >
<form id="signupform" class="form-horizontal" role="form">
<div id="signupalert" style="display:none" class="alert alert-danger">
<p>Error:</p>
<span></span>
</div>
<div class="form-group">
<label for="email" class="col-md-3 control-label">Email</label>
<div class="col-md-9">
<input type="text" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-md-3 control-label">First Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="firstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-md-3 control-label">Last Name</label>
<div class="col-md-9">
<input type="text" class="form-control" name="lastname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">Password</label>
<div class="col-md-9">
<input type="password" class="form-control" name="passwd" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="icode" class="col-md-3 control-label">Invitation Code</label>
<div class="col-md-9">
<input type="text" class="form-control" name="icode" placeholder="">
</div>
</div>
<div class="form-group">
<!-- Button -->
<div class="col-md-offset-3 col-md-9">
<button id="btn-signup" type="button" class="btn btn-info"><i class="icon-hand-right"></i>   Sign Up</button>
<span style="margin-left:8px;">or</span>
</div>
</div>
<div style="border-top: 1px solid #999; padding-top:20px" class="form-group">
<div class="col-md-offset-3 col-md-9">
<button id="btn-fbsignup" type="button" class="btn btn-primary"><i class="icon-facebook"></i> Sign Up with Facebook</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="editor-css" class="playground-editor" itemprop="sampleType"></div>
<div id="editor-js" class="playground-editor" itemprop="sampleType"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Similar snippets:</h2>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4">
<div class="thumbnail bootsnipp-thumb">
<div>
<p class="pull-right view-counts hidden-md">
<a href="http://bootsnipp.com/snippets/featured/loginregister-in-tabbed-interface" class="tip" data-toggle="tooltip" title="Viewed">44.4K <i class="icon-eye-open"></i></a>
<a href="http://bootsnipp.com/snippets/featured/loginregister-in-tabbed-interface" class="tip" data-toggle="tooltip" title="Favorited">31 <i class="icon-thumbs-up"></i></a>
<a href="http://bootsnipp.com/tags/2.3.2"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">2.3.2</span></a>
</p>
<p class="lead snipp-title">
<a href="http://bootsnipp.com/snippets/featured/loginregister-in-tabbed-interface">Login/Register in Tabbed Interface</a>
</p>
</div>
<a href="http://bootsnipp.com/snippets/featured/loginregister-in-tabbed-interface">
<img class="lazy" data-original="http://bootsnipp.com/img/screenshots/4dbc805311fca6407b103a0839856aaf7f77933d.png" alt="Login/Register in Tabbed Interface">
</a>
</div>
</div> <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4">
<div class="thumbnail bootsnipp-thumb">
<div>
<p class="pull-right view-counts hidden-md">
<a href="http://bootsnipp.com/snippets/featured/registration-form" class="tip" data-toggle="tooltip" title="Viewed">46.2K <i class="icon-eye-open"></i></a>
<a href="http://bootsnipp.com/snippets/featured/registration-form" class="tip" data-toggle="tooltip" title="Favorited">63 <i class="icon-thumbs-up"></i></a>
<a href="http://bootsnipp.com/tags/3.1.0"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">3.1.0</span></a>
</p>
<p class="lead snipp-title">
<a href="http://bootsnipp.com/snippets/featured/registration-form">Registration form</a>
</p>
</div>
<a href="http://bootsnipp.com/snippets/featured/registration-form">
<img class="lazy" data-original="http://bootsnipp.com/img/screenshots/84696c8f2d17118eebcf1a45c5db85f0dac431aa.png" alt="Registration form">
</a>
</div>
</div> <div class="col-sm-12 col-xs-12 col-md-4 col-lg-4">
<div class="thumbnail bootsnipp-thumb">
<div>
<p class="pull-right view-counts hidden-md">
<a href="http://bootsnipp.com/snippets/featured/basic-register-page" class="tip" data-toggle="tooltip" title="Viewed">28.5K <i class="icon-eye-open"></i></a>
<a href="http://bootsnipp.com/snippets/featured/basic-register-page" class="tip" data-toggle="tooltip" title="Favorited">54 <i class="icon-thumbs-up"></i></a>
<a href="http://bootsnipp.com/tags/3.2.0"><span class="label label-info tip" data-toggle="tooltip" title="Bootstrap version">3.2.0</span></a>
</p>
<p class="lead snipp-title">
<a href="http://bootsnipp.com/snippets/featured/basic-register-page">Basic Register Page</a>
</p>
</div>
<a href="http://bootsnipp.com/snippets/featured/basic-register-page">
<img class="lazy" data-original="http://bootsnipp.com/img/screenshots/efc801497bbe8073c259abaeea5241f689fa3be0.png" alt="Basic Register Page">
</a>
</div>
</div> </div>
<div class="row">
<div class="col-lg-12">
<h2 id="comments">Comments: </h2>
<div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'bootsnipp'; // required: replace example with your forum shortname
var disqus_identifier = '2X0r';
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</div>
</div>
<footer class="bs-footer" role="contentinfo">
<div class="container">
<div class="bs-social">
<ul class="bs-social-buttons">
<li class="facebook-button">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fbootsnipp.com&width=130&height=20&colorscheme=light&layout=button_count&action=like&show_faces=false&send=true&appId=112989545392380" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:20px;" class="facebook-btn" allowTransparency="true"></iframe>
</li>
<li class="follow-btn">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=bootsnipp"
style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button"></iframe>
</li>
<li class="tweet-btn">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="https://platform.twitter.com/widgets/tweet_button.html?lang=en&via=bootsnipp&url=http%3A%2F%2Fbootsnipp.com&text=RT%20Design%20elements%20and%20code%20snippets%20for%20%23twbootstrap%20HTML%2FCSS%2FJS%20framework"
style="width:107; height:20px;" class="twitter-share-button twitter-count-horizontal"></iframe>
</li>
</ul>
</div>
<p>Bootsnipp.com by <a href="http://maxoffsky.com" target="_blank">Maks Surguy</a>. | <a href="https://plus.google.com/+Bootsnipp-page" target="_blank" rel="publisher">Google+</a> | <a href="http://bootsnipp.com/privacy" target="_blank">Site Privacy policy</a> | Featured snippets are <a href="http://bootsnipp.com/license">MIT license.</a> | Built with <a href="http://laravel.com" target="_blank" title="laravel php framework"><img src="http://bootsnipp.com/img/laravel.jpg" alt="laravel php framework"></a> Hosted on <a href="http://pagodabox.com" target="_blank" title="pagodabox php cloud hosting"><img src="http://bootsnipp.com/img/pagoda.jpg" alt="pagodabox php cloud hosting"></a> | Bootstrap CDN by <a href="http://bit.ly/maxCDN" target="_blank"><img src="http://www.ftjcfx.com/image-7593394-11373487" width="1" height="1" border="0"/><img src="http://bootsnipp.com/img/maxcdn.png"></a></p>
</div>
</footer>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script type="text/javascript">
(function($) {
window.addEventListener('message', receiveMessage, false);
function receiveMessage(evt)
{
if (evt.origin !== 'http://bootsnipp.com') return;
if ((evt.data != undefined) && (evt.data) && (typeof evt.data === "number"))
if(evt.data >= 500) {
$('#playground-container').css('height', evt.data+30+'px');
}
}
var htmleditor = ace.edit("editor-html");
var jseditor = ace.edit("editor-js");
var csseditor = ace.edit("editor-css");
$('#theme_chooser').change(function(){
whichCSS = $(this).val();
document.getElementById('snippet-preview').contentWindow.changeCSS(whichCSS);
});
function setEditorOptions(editor, type){
editor.setTheme("ace/theme/clouds");
editor.setHighlightActiveLine(false);
editor.setReadOnly(true);
editor.getSession().setMode("ace/mode/"+type);
};
setEditorOptions(htmleditor,'html');
setEditorOptions(jseditor,'javascript');
setEditorOptions(csseditor,'css');
function markActive(el)
{
$(el).siblings().removeClass('active');
$(el).addClass('active');
}
$('#show-html').click(function(e){
e.preventDefault();
$('#editor-html').show().siblings().hide();
markActive(this);
$('#preview-container').hide();
htmleditor.resize();
});
$('#show-js').click(function(e){
e.preventDefault();
$('#editor-js').show().siblings().hide();
$('#preview-container').hide();
markActive(this);
jseditor.resize();
});
$('#show-css').click(function(e){
e.preventDefault();
$('#editor-css').show().siblings().hide();
$('#preview-container').hide();
markActive(this);
csseditor.resize();
});
$('#show-preview').click(function(e){
e.preventDefault();
$('#preview-container').show();
$('.playground-editor').hide();
markActive(this);
});
function addFav(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("http://bootsnipp.com/api/favorites",
{ 'hash' : '2X0r'},
function(data){
if (data.response != 'ok'){
alert('There was an error saving the favorite');
} else {
$('a.fav')
.addClass('active')
.attr('title','Remove favorite')
.unbind('click')
.bind('click', removeFav);
$('.tip').tooltip('destroy');
$('.tip').tooltip();
}}, "json")
.fail(function(jqXHR, textStatus, errorThrown) {
alert('Error! '+JSON.parse(jqXHR.responseText).error);
})
.always(function() {
l.stop();
});
}
function removeFav(e){
e.preventDefault();
var l = Ladda.create(this);
l.start();
$.post("http://bootsnipp.com/api/favorites/2X0r",
{ '_method':'DELETE'},
function(data){
if (data.response != 'ok'){
alert('There was an error removing the favorite');
} else {
$('a.fav')
.removeClass('active')
.attr('title','Favorite this snippet')
.unbind('click')
.bind('click', addFav)
;
$('.tip').tooltip('destroy');
$('.tip').tooltip();
}}, "json")
.fail(function(jqXHR, textStatus, errorThrown) {
alert('Error! '+JSON.parse(jqXHR.responseText).error);
})
.always(function() {
l.stop();
});
}
$('a.fav').bind('click', addFav);
})(jQuery);
</script>
<script type="text/javascript" src="http://cdn.buysellads.com/ac/audience.js"></script>
</body>
</html>
