Skip to content Skip to blog sidebar
  • Contacts
  • Privacy Policy
  • Disclaimer
Schauhan.in |

Schauhan.in |

Technology Updates




  • HTML
  • CSS
  • C# Solutions
  • Bootstrap Examples
    • All Bootstrap Example
    • Bootstrap 3 Tutorials
    • Bootstrap 4 Tutorials
    • Bootstrap Header Templates
    • Bootstrap Footer Templates
    • Bootstrap Login Templates
    • Bootstrap Form Examples
    • Bootstrap Pricing Tables
  • Javascript
  • Website Designing
  • Portfolio
    • Logo Portfolio
    • Website Portfolio
  • Flyer’s Download
    • Night Club Flyer Free Download
    • Festival Flyer
    • Corporate Flyer
    • Digital Marketing Flyer
Home » Bootstrap 4 » Bootstrap Reponsive Login Templates Free Download

Bootstrap Reponsive Login Templates Free Download

Posted on: July 11, 2020 | By: sandeepchhn – Comments Off
Bootstrap Login Examples
Bootstrap Login Form Examples

Here i am providing fully Responsive bootstrap login page, Here i will provide the complete source code of Bootstrap Responsive Login Templates, Here you can Download Responsive Login Page.

Live Preview
Download Bootstrap Login Page

HTML CODE

<div class="login_container">
        <div class="container nopadding">
            <div class="row no-gutters">
                <div class="col-md-8">

                   <div class="img_container">
                       <h2>Bootstrap Responsive Login</h2>
                       <img src="login.png" class="img-fluid" />
                   </div>

                </div>

                <div class="col-md-4">
                    <div class="login">

                        <div class="top_heading">
                            <p>Welcome To</p>
                            <h2>Responsive Login</h2>
                        </div>

                        <div class="form_group">
                            <label class="classpan">Username</label>
                            <input type="text" class="txtbox" placeholder="Username" />
                        </div>

                        <div class="form_group">
                            <label class="classpan">Password</label>
                            <input type="password" class="txtbox" placeholder="Username" />
                        </div>

                        <div class="form_group">
                            <input type="button" class="mybt" value="LOGIN" />
                        </div>

                        <div class="login_other">
                            <p><a href="#">Forget Password ?</a></p>
                            <p>Not account yet ? <a href="#">SignUp</a></p>
                        </div>

                    </div>
                    
                </div>
            </div>
        </div>
    </div>

CSS CODE

<style type="text/css">
    body {
    margin: 0px;
    padding: 0px;
    font-family: 'Muli', sans-serif;
    background-color: #ffaa00;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb100' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffb800' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffbf00' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffc500' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23ffcc00' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffc800' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffc400' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffc000' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffbc00' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23ffb800' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

h1,h2,h3,h4,h5,h6,p
{
    margin:0px;
    padding:0px;
}



    .login_container {
        width: 70%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
        -moz-box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
        box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
    }

    .login {
        background: #0c3476;
        height: 100%;
        padding: 50px;
    }

    .nopadding {
        padding: 0 !important;
        margin: 0 !important;
    }

    .classpan {
        width: 100%;
        color: #f2f2f2;
        font-size: 13px;
    }

    * {
        box-sizing: border-box;
    }

    .txtbox {
        width: 100%;
        padding-left: 7px;
        height: 35px;
        font-size: 13px;
        border: none;
        border-radius: 5px;
        -webkit-box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
        -moz-box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
        box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
    }

        .txtbox:focus {
            outline: 0px;
        }

    .mybt {
        background: #ffd624;
        border: none;
        margin-top: 15px;
        height: 35px;
        border-radius: 5px;
        cursor: pointer;
        width: 100%;
        font-weight: bold;
        -webkit-box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
        -moz-box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
        box-shadow: 0px 0px 6px 2px rgba(56,56,56,1);
    }

    .login_other 
	{
        text-align: center;
        margin-top: 15px;
    }

    .login_other p 
	{
       margin: 0px;
       font-size: 13px;
       padding: 0px;
       color: #fff;
    }

    .login_other p a 
	{
       color: #fff;
    }

  .login_other p a:hover 
  {
       text-decoration: none;
   }

    .top_heading p {
        color: #fff;
        text-align: center;
        margin-top: 20px;
    }

    .top_heading h2 {
        color: #f2f2f2;
        font-size: 20px;
        text-align: center;
        margin-top: -20px;
        margin-bottom: 25px;
    }


    .img_container {
        position: relative;
    }

        .img_container h2 {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
        }


@media only screen and (max-width: 767px) 
{

    .login_container {
        width: 90%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        -webkit-box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
        -moz-box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
        box-shadow: 0px 0px 21px -2px rgba(156,156,156,1);
    }

    .login {
        background: #0c3476;
        height: 100%;
        padding: 20px;
    }



}


</style>
Filed Under: Filed Under:Bootstrap 4, Bootstrap Examples, Bootstrap Login, General

Post navigation

« How To Create a Custom Checkbox CSS
Responsive HTML and CSs Login Page Template »
Avatar for sandeepchhn

About The Author

sandeepchhn
Hello Friend, My Name is Sandeep Chauhan, I am the owner of SCHAUHAN.IN. I Have Passed B.Sc(IT) from Shobhit Univercity Uttar Pradesh, and i have the Diploma of Arena Animation, I Leave in Varanasi Uttar Pradesh.

Related Articles

How To Create a Notification Button using Bootstrap

How To Create a Notification Button using Bootstrap

HTML 404 Error Page templates Free download

HTML 404 Error Page templates Free download

How to Remove Textbox Outline hover Effect in chrome

How to Remove Textbox Outline hover Effect in chrome

Ajab Gajab News

  • How To Make Beautiful Responsive Login Page

    How To Make Beautiful Responsive Login Page

  • Product Page Using HTML and CSS

    Product Page Using HTML and CSS

  • Bootstrap Form Examples and Tutorials

    Bootstrap Form Examples and Tutorials

  • Bootstrap Registration form Template free download

    Bootstrap Registration form Template free download

  • Product Carousel bootstrap Free Download

    Product Carousel bootstrap Free Download

  • Bootstrap Mobile Admin Panel Free Download

    Bootstrap Mobile Admin Panel Free Download

  • Admin Panel Template using Bootstrap Free Download

    Admin Panel Template using Bootstrap Free Download

  • Bootstrap pricing table template Free Download

    Bootstrap pricing table template Free Download

  • How to Create Bootstrap 4 Responsive Header Free Download

    How to Create Bootstrap 4 Responsive Header Free Download

  • Bootstrap Carousel Examples Free Download

    Bootstrap Carousel Examples Free Download

  • Bootstrap carousel with thumbnails slider Example Free Download

    Bootstrap carousel with thumbnails slider Example Free Download

  • Bootstrap Modal Plugin

    Bootstrap Modal Plugin

  • Responsive Login Page Free Download

    Responsive Login Page Free Download

Logo Designing In Varanasi
3D Logo Designing in Varanasi
Website Designing in Varanasi
Dynamic Website Development in Varanasi
Wordpress Website Designing in Varanasi
Cheap Website Designing in Varanasi
Cheap 3D Logo Designing in Varanasi
E-commerce Website Designing in Varanasi
Shopping Website Designing in Varanasi
Cheap Wordpress Website Designing



© 2022 Schauhan.in |. All Rights Reserved.  
  • Disclaimer
  • Privacy Policy