ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How to create Bootstrap login template

Updated on July 2, 2016

This article shows how to create a responsive login template using Bootstrap front-end framework. Bootstrap web front-end development framework cut down lots of UI development time. Once you build a web template using bootstrap framework it will work on all the devices such as desktop, tablets, mobile devices etc. To get started with bootstrap, we need to download Twitter Bootstrap and extract it into a folder or use there starter templates.

Setting up a basic bootstrap web page template

Next step is to create a web page using the default template given in the Bootstrap site. To create the HTML page, you can use any html code editor. In my case I use Visual Studio (you can download Visual Studio Express edition for free)

Now your webpage code will look like as follows;

<!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">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="CSS/bootstrap.min.CSS" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src=""></script>
      <script src=""></script>
        Hello, World</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src=""></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>

When you open your web page in the browser you will see a screen displaying Hello, World.

Get started with bootstrap responsive login template

Now change the default code Hello, World into Login Form template. Before you build any Bootstrap web design templates you need to wrap your entire html code that comes inside the body tag in a div with a CSS class, named container. This is the main container that keeps your layout centered and responsive in the browser. Bootstrap uses a Grid System to build layouts. You can learn more about the Grid System here. Now you are ready to use any bootstrap controls in your web page. First, I’m going to use the grid system to create the basic layout for my login form template. Add the below mentioned code into your page.

<div class="container">
        <div class="row">
            <div class="col-md-6">

I have chosen “col-md-6”, since I’m going to use 50% of the page size.

As we are going to build a Login Form you can refer to all the form controls and support given by bootstrap framework here.

Cast your vote for Do you find this content useful?

Adding a bootstrap panel

Now, let’s create a box to put all the login controls using bootstrap panels. Bootstrap panels are very handy, when you want to group an area of your web page. We have seen how a login interface looks like. It comes with a nice box around it. So, let’s create the same. Here, I’m using a panel with header footer and body. Now your panel code will look as follows;

<div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            Heading here</h4>
                    <div class="panel-body">
                    Login Controls here
                    <div class="panel-footer">
                        Footer here</div>

Save and refresh the page, you will get the bootstrap panel which you can see below;

Bootstrap empty panel

Adding bootstrap form control user name

Let’s add the form controls one by one. First, I’m going to add the user name field. The user name field can be added as follows;

<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="inputUsername" class="col-md-4 control-label">
                                User Name</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="inputUsername" placeholder="Enter user name...">

Let’s see into the details of the code above. Any HTML form begins with a form tag. In this example our form controls will spread across horizontally, so we have to use the bootstrap CSS class “form-horizontal”

Bootstrap uses a div tag with a CSS class, called form-group to wrap the input controls and the labels. This is similar to grouping controls into a container and it manages the default padding which you can change any time by adding an overriding class. If you observe the label tag within the “form-group” div, it contains two CSS classes called “control-label” and “col-md-4”. These two classes control the label layout. The “control-label” CSS class is responsible for label styles and “col-md-04” responsible for size and padding.

When we consider the user name input control it consists of only the CSS class called “form-control”. It controls all the styles of input text box, but the input control is wrapped in a div tag with a CSS class called “col-md-8”. This wrapping div control the size of the input control. According to the bootstrap grid system you can have maximum 12 columns in a row. So, you can use any combination to split sections in layout. Here, we use column 4 and column 8 to size the label and input text. Once you refresh you page, the resulting output will look like as follows;

Bootstrap Login from with user name

Now we can add the password section into the login form. For this, you can add the following code into your web page.

<div class="form-group">
       <label for="inputPassword3" class="col-md-4 control-label">
             <div class="col-md-8">
               <input type="password" class="form-control" id="inputPassword3" placeholder="Enter Password....">

Adding bootstrap form control password

There is not much difference compared to user name control coding and password control coding in bootstrap. It is same as the above code, but you need to maintain the consistency with column CSS classes. Save the page and open it in the browser and you will the get following output;

Login form with user name and password

Adding Rember me

Now, we need to add a check box that says remember me. You can do this with the following code snippet;

<div class="form-group">
      <div class="col-md-offset-4 col-sm-8">
          <div class="checkbox">
                   <input type="checkbox">
                         Remember me

This form group has a difference. It does not have a text label in front of the input control, instead it only consists a radio button wrapped in a label control. Since, we don’t have a front label to make the gaps like the other controls above, I have used bootstrap offset class to create the relevant gap. Bootstrap offset classes are used to create gaps between html controls based on the width percentage value given to it. Our previous controls used “col-md-4” as the label control size, therefore to keep the same gap we use bootstrap CSS class “col-md-offset-4”. When you refresh the output it will look like as follows;

With remember me

Adding buttons

Now it is time to include login and cancel buttons. You can use the following code snippet to include buttons to your login form using bootstrap;

<div class="form-group">
      <div class="col-md-offset-4 col-md-8">
           <button type="submit" class="btn btn-default">Login</button> 
           <button type="submit" class="btn btn-default">Cancel</button>

If you carefully look at the code, you can notice that the button group control div uses the same offset CSS class (“col-md-offset-4”) to keep the left margins because there is no label property and the same CSS column class is used to keep the group size match with other rows.

As you can see there are two new buttons which use two CSS classes. The bootstrap CSS class “btn” is the base CSS class and the other bootstrap CSS class “btn-default” gives the look and feel effects such as color, text border etc. Now save it and refresh the page and you will get the output as follows;

Adding forgot password link

Now, the only missing part is forgot password link. We can place it in the footer section of the login box. You can add a stylish link just placing the following code in the footer section

<div class="panel-footer">
    <a href="#" title="Forgot Password ?">Forgot Password ?</a>

Here you can notice that we do not use any styles but bootstrap applies its default styles. If you want to change it, you can do it by adding a CSS class and overriding each style. So your code output will look like as follows;

Now you have complete responsive login form. You can take a look at the live version by clicking the below link

Bootstrap Responsive Login Form

© 2014 wecode


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)