Skip to main content

Creating a Login Form Using Bootstrap and HTML - Front End

Login Form UI

Introduction:

In this post, you will get an idea how to create a Login User Interface with the help of a popular Front End Web Framework named Bootstrap.

Steps:

  1. Open up a text editor and save the file with extension '.html'.


  2. Type it out with the basic HTML code.


  3. Add Bootstrap CDN between the opening and close <head> tags. You can get the Bootstrap from the Bootstrap website here. It will be somewhat like the snippet below.
  4. Now add some custom styles just before the closing head tag. We are using -webkit-linear-gradient for chrome only, you can add -moz-linear-gradient and include the same color parameters to it.
  5. Let's come to <body> tag and edit it.  First creating a card using bootstrap class called 'card'. Go to Bootstrap's website documentation for further details. Then refer to the code as follows:
  6. We are done and the final code will be look like this:

Conclusion:

We have created the design part only, soon we shall cover the back-end part of this form using some back-end servers.
Labels:

Comments

Post a Comment

Popular posts from this blog

Creating a Web Browser With Integrated Chromium using C#

Final Output Introduction: In this post, we shall start a project to build a C# application integrated with Chromium in Visual Studio. I shall be using Visual Studio Express For Windows Desktop 2013. But the minimum requirements are mentioned below. We shall create a Windows Forms C# project from scratch and integrate Chromium Embedded Framework (CEF) in our application, basic navigation options and much more. Minimum Requirements and Prerequisites: Visual Studio 2012 or Higher that supports NuGet Package Manager. A decent internet connection. Basic Knowledge of C#. Knowlege in using Windows efficiently. Creating A Visual Studio Project: First, create a Visual Studio C# Project through File > New Project > Installed > Visual C# > Windows > Windows Forms . Name the file whatever you want, for example ' Web Browser '. New Project Customising the Form: Now customize the main form by changing its  Properties  like Text to 'Web...
7 comments
Read more

How to start programming with JavaScript? Get Started with JavaScript!

Introduction: JavaScript is of-course a programming language. It can be called the 'programming language of the web' as it is one of the core three technologies for Web Development (other than HTML and CSS ). Before you start programming with JavaScript, you have to know what JavaScript is. See also: Basics of Programming Languages and Introduction to Front End Development . Requirements for this blog post: Minimum knowledge of programming terms: Intermediate . Minimum knowledge of JavaScript: None/Beginner . Some JavaScript Characteristics: JavaScript is a high-level , interpreted , dynamic and weakly-typed programming language. It is an object-oriented language like many high-level programming languages. It is a functional language , here function is considered to be an object. The term Vanilla JavaScipt is often used to refer JavaScript with any external frameworks or libraries. Best Free Resources to get started with JavaScript: After searchi...
1 comment
Read more

What are Bluestacks points? How to gain Bluestacks points in Bluestacks 4?

Introduction: Bluestacks is an  Android Emulator that runs on Microsoft Windows and Apple Macintosh. An Android Emulator is a software application that provides a medium to enjoy Android applications or games on your computer.  My Customized Bluestacks What are Bluestacks points? Bluestacks points are points which can be collected by playing games on Bluestacks and can be redeemed to get gaming goodies for free. This feature was introduced in the Bluestacks version 3 and is also present in the latest version Bluestacks i.e. Bluestacks 4. How to gain Bluestacks points? Bluestacks points can be gained by playing games and earning cards to unlock new levels. Levels in Bluestacks range from Level 1 to Level 10. Once you reach Level 10, you have to play quests. I have reached Level 10 within 3 hours. There is a secret technique to do this. If you want to reach levels faster, comment down below, I shall make a new post regarding that.  But, now, I shal...
2 comments
Read more