"Login & Signup forms in panel"
Bootstrap 3.1.0 Snippet by acap91

<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> &nbsp 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>

Related: See More


Questions / Comments: