Flat Login / Register form with Bootstrap

Login and registration form is one of the most used component during development. While there are a lot of template available out there for download, I was thinking it will be a good idea for me to document mine down so that I can reuse for upcoming web apps I am going to design 🙂

By the way, I learnt Twitter Bootstrap about 3 months ago before I start code my front page bkbklim.com. Since then I am in love with this framework as it provides a very comprehensive grid framework, not bad styling and whole bunch of documentation. So in this post I will be using it to design my flat login/register form.

To get started, first get the Bootstrap CDN link from Bootstrap website and include in the head tag. I will be using some icon from fontawesome so I will include the source as well.

Also I will include the jQuery and Bootstrap JavaScript as I will be using the “tab” component.

Next some HTML markup. Bootstrap tab component is something like below:
bootstrap tab
where you can tab around the navigation and display different content.

Start off by building the navigation bar:

This will style the horizontal nav bar when we put in the class nav and nav-tabs. Need to note down the link href value as it will be used to toggle the content tab with that particular ID.

Next the content of each tab. Login tab first:

Giving the div a role of “tabpanel” and style it with “tab-pane” class allow the dynamic showing of tab when the navigation bar is tabbed. The “fade” and “in” class provides the fade animation, and the “active” class will first display this tab. Inside this tab I put the login form, with Bootstrap styling. With the “input-group-addon” class, I also added some font-awesome icon to make it looks nicer.

Duplicate most of the stuff, and I created the registration tab.

Notice there isn’t an “active” class for this tab. Also notice that this 2 tab content have the ID of “login” and “register” respectively, which is the href link on the navigation bar.

Thereafter, wrap these content tab inside another div, so that they won’t be stacked up and down.

What we have so far:
loginregister

Great! Now some CSS styling to make it looks flat and sweet. Will not be going through all the CSS, but the few main one. First, I would like to have a centered form. Therefore I restrict the width of the div to be only 350px and center the div by using margin: 0 auto. By the way I wrap the entire form inside the class “login-register-form-secion”.

Notice that the icon in the form are having different width? Throw in a CSS to fix it at 10px.

Then, for the active tab, I would like to have a nice looking flat background color. I would also like to have similar color for the link.

What we have so far:
login1

Err, more to be done ! Lets style the navigation button, by expanding the width and centralize the words.

Add some padding and margin for the border below the navigation tab:

And style the ugly green button:

Also add some padding so that the textbox stay within the div width.

Cool! That’s basically it, our flat Bootstrap login/register form 🙂
login2register2

 

Full working code can be found in my github page : Flat Bootstrap Login Register Form

BK
2015-08-28

Leave a Reply

Your email address will not be published. Required fields are marked *