Saturday, June 14, 2014

Bootstrap Login Template Example ( Modal Dialog ) Code


The following login template is one of my favourite and simple bootstrap login forms using modal dialog.
Bootstrap Login Template

Please sign in

Forgot Password?Register

CODE:


<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootstrap Login Template</title>
<meta name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1">

<link
       href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
       rel="stylesheet">

<style type="text/css">
.modal-footer {
       border-top: 0px;
}
</style>
</head>

<body>

       <!--login modal-->
       <div id="loginModal">
              <div class="modal-dialog">
                     <div class="modal-content">
                          
                           <!-- Header Section -->
                           <div class="modal-header">
                                  <h2>Please sign in</h2>
                           </div>
                          
                           <!-- Body Section -->
                           <div class="modal-body">
                                  <form class="form col-md-12">

                                         <input type="text" class="form-control input-lg" placeholder="Email" required autofocus />
                                         <input type="password" class="form-control input-lg" placeholder="Password" required />
                                        
                                         <label class="checkbox"> <input type="checkbox"
                                                value="remember-me" /> Remember me
                                         </label>
                                        
                                         <button class="btn btn-primary btn-lg btn-block">Sign In</button>
                                  </form>
                           </div>
                          
                           <!-- Footer Section -->
                           <div class="modal-footer">
                                  <div class="col-md-12">
                                         <span class="pull-left"><a href="#">Forgot Password?</a></span>
                                         <span><a href="#">Register</a></span>
                                  </div>
                           </div>
                     </div>
              </div>
       </div>

       <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>






at
Labels: , , , ,

11 comments :

  1. AnonymousJuly 12, 2014 at 12:18 AM

    How do you get this to actually have someone log into your site? I have basic experience building pages with bootstrap but am unsure about how to create a sign in page leading to a members only section.. Thanks! -Matt

    ReplyDelete
  2. Manoj's BlogJuly 19, 2014 at 2:45 AM

    Hello Matt,

    Bootstrap does not have anything to do with such logic taking you from sign in page to the members only section. All it does it makes your template/UI more fancy by adding some extra HTML elements and classes. So, in the above page, filter out such extra elements and classes and think as if it only has "form", "input" and "button" elements.

    As per your concern to create a sign in page leading to a members only section, it solely depends on how you've configured your project setup, which framework you're using. If you could provide me some specific details on that, I'd certainly be happy to help.

    Thanks.

    ReplyDelete
  3. AnonymousMarch 13, 2022 at 12:24 AM

    Manoj Shrestha'S Blog: Bootstrap Login Template Example ( Modal Dialog ) Code >>>>> Download Now

    >>>>> Download Full

    Manoj Shrestha'S Blog: Bootstrap Login Template Example ( Modal Dialog ) Code >>>>> Download LINK

    >>>>> Download Now

    Manoj Shrestha'S Blog: Bootstrap Login Template Example ( Modal Dialog ) Code >>>>> Download Full

    >>>>> Download LINK

    ReplyDelete
  4. 5GünerOctober 4, 2023 at 3:39 AM

    çankırı
    urfa
    van
    urfa
    elazığ
    5R8Aİ

    ReplyDelete
  5. AmossOctober 6, 2023 at 2:24 PM

    bitlis
    urfa
    mardin
    tokat
    çorum
    QBB

    ReplyDelete
  6. AltınGözler19October 16, 2023 at 12:52 PM

    https://titandijital.com.tr/
    kars parça eşya taşıma
    konya parça eşya taşıma
    çankırı parça eşya taşıma
    yalova parça eşya taşıma
    AYN

    ReplyDelete
  7. ArdaOctober 20, 2023 at 8:06 PM

    Mersin Lojistik
    Amasya Lojistik
    Kayseri Lojistik
    Kırklareli Lojistik
    Erzurum Lojistik
    2EELO

    ReplyDelete
  8. 2D360Janelle1AEACNovember 11, 2023 at 11:26 PM

    DE7C9
    anapolon oxymetholone
    peptides for sale
    buy parabolan
    buy clenbuterol
    buy trenbolone enanthate
    clenbuterol for sale
    Kripto Para Borsaları
    Btcturk Güvenilir mi
    buy testosterone propionat

    ReplyDelete
  9. 7E13EGael3E093December 22, 2023 at 8:26 PM

    21250
    kars görüntülü sohbet siteleri
    bilecik kızlarla canlı sohbet
    canlı görüntülü sohbet siteleri
    rastgele sohbet siteleri
    afyon görüntülü sohbet odaları
    samsun sohbet uygulamaları
    görüntülü sohbet
    aydın görüntülü sohbet kadınlarla
    kayseri canli goruntulu sohbet siteleri

    ReplyDelete
  10. 7C2AEMatthewEC96AJanuary 17, 2024 at 10:27 AM

    147BA
    Instagram Takipçi Hilesi
    Coin Kazma Siteleri
    Expanse Coin Hangi Borsada
    Bitcoin Nasıl Üretilir
    Binance Referans Kodu
    Likee App Takipçi Satın Al
    Binance Komisyon Ne Kadar
    Binance'de Kaldıraç Var mı
    Mexc Borsası Kimin

    ReplyDelete
  11. AnonymousDecember 15, 2024 at 12:24 AM

    Thanks and I have a tremendous offer: How To Renovate House Exterior home reno costs

    ReplyDelete

Subscribe to: Post Comments ( Atom )