Creating Simple Login Page Template using Bootstrap

Twitter Bootstrap provides an easy and fastest way to create different types of form using its already defined CSS classes like form-group and form-control. We can use twitter bootstrap forms as per our need and create different types and styles of forms. Bootstrap supports inline form, horizontal form and vertical form.

In this section of our Bootstrap Tutorials we will discuss about designing and creating simple login page template using bootstrap forms. If you are already familiar with html and bootstrap then you can directly understand the design else start learning html and bootstrap basics. You can go through the explanation of the code or simply download the source code and use it in your web project.

Adding Custom CSS Styles for Login Page

Here, you will see a file custom.css added for css class definition that are not in bootstrap but you’ll be needing for your preferences, so create a custom.css file inside css folder and copy this css code:

CSS Code for Login Page Template

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

.loginbox{

margin-top:50px;

}

.forgot-password{

float:right;

font-size:80%;

position:relative;

top:-10px;

}

.panel-pad{

padding-top:30px;

}

.login-alert{

display:none;

}

.margT25{

margin-bottom:25px;

}

.margT10{

margin-top:10px;

}

.margL10{

padding-left:25px;

}

.no-acc{

border-top:1pxsolid#888;padding-top:15px;font-size:85%;

}

.signup-box{

display:none;margin-top:50px;

}

.signup-fb{

border-top:1pxsolid#999;padding-top:20px;

}

.signin{

float:right;font-size:85%;position:relative;top:-10px;

}

.btn-facebook{

color:#fff;

background-color:#3b5998;

border-color:#3b5998;

}

.btn-facebook:hover,

.btn-facebook:focus,

.btn-facebook:active,

.btn-facebook.active,

.open >.dropdown-toggle.btn-facebook{

color:#fff;

background-color:#3b5998;

border-color:#3b5998;

}

.btn-google{

color:#fff;

background-color:#dd4b39;

border-color:#dd4b39;

}

.btn-google:hover,

.btn-google:focus,

.btn-google:active,

.btn-google.active,

.open >.dropdown-toggle.btn-google{

color:#fff;

background-color:#dd4b39;

border-color:#dd4b39;

}

.btn-twitter{

color:#fff;

background-color:#00aced;

border-color:#00aced;

}

.btn-twitter:hover,

.btn-twitter:focus,

.btn-twitter:active,

.btn-twitter.active,

.open >.dropdown-toggle.btn-twitter{

color:#fff;

background-color:#00aced;

border-color:#00aced;

}

So, this is how we conclude our login page, but there is still more to add, we’ll also be adding Sign-up page with login form. For that, we’ll create a javascript onclick() event to load Sign Up page and hide sign-in page, for that we’ll add some code for the <a> tag of Sign Up Here text. This will add a simple animated look for the login page.

onClick attribute will trigger javascript when the text link is clicked, see more on event driven programming. So, when the link is clicked, #loginbox i.e id of login div will be hidden by the javascript hide() function and after that div is hidden, #signupbox i.e id of signup div will be shown by the javascript show() function.