Bootstrap 3 Login Page

Posted onby admin

Tags Bootstrap 4 login form. × Note: See the tutorial on Bootstrap Forms to learn how to customize this layout further. Bootstrap 3 version of this snippet is available here. Similar Snippets. Simple Login Form. Simple Login Form. Simple Login Form. View All Snippets. Code snippets related to login form using html and css. Added By Omkar Bailkeri. Shopping bag checkout with order summary. Added By Ask SNB. Custom radio buttons with pure html and css. Added By Jatin Singh. Comments template. Cool and funky design with positive vibes and great energy, yes, we are still talking about free Bootstrap registration forms. Gradient background, and a two-part form: an image and necessary fields to fill out. But if they are already registered with your website or application, you can link your registration page to the login section as well. The red label and clear background are what you need for an excellent login page for your membership site. Apart from that, members can request to reset their password inside this form. Get this bootstrap login form template free download and create a stunning login page for your users. An amazing Bootstrap 4 login form template that you can use for any project. Looks stunning, features a clean codebase, and is completely free to use. A full-blown free login form with an image background page template that keeps the user experience at an all-time high.

Details
Written by Nam Ha Minh
Last Updated on 31 October 2020 Print Email
In this article, I would like to share with you how to code a custom login page in a Spring Boot application with Thymeleaf as the default template engine, HTML 5 for built-in support for field validation, and Bootstrap 4 for responsive user interface.When Spring Security API is present in the classpath, it will generate the default login page that looks as follows:This default login is suitable only for quick test, and in practice we almost need to have a custom login page that matches the application’s UI and requires other customizations. The code example below will create a custom login page that looks like the following:In this custom login page, we have a logo, a headline text, two fields email and password, a checkbox Remember me and a button Login.

1. Configure Custom Login Page in Spring Security Configuration Class

First, you need to specify URL of the custom login page in the Spring Security configuration class as follows:As you can see, the login page URL is /loginBootstrap 3 Login Page, so you need to have a handler method for this URL in a Spring MVC controller. For example:

As you can see, the handler method returns the logical view name login which will be resolved to the login.html file by Thymeleaf template engine.If you don’t have any custom logic that needs to be performed before showing the login page, you can simply specify the view name resolution in a Spring MVC configuration class as shown in the code snippet below:You can also note that we use different name for the username field in the custom login form, e.g. email:Check this article for more customizations of the form login. This article focuses on the code of the custom login page only.

2. Code Custom Login Page with Thymeleaf, HTML and Bootstrap

For your reference, below is the full code of the custom login page – login.html under src/main/resources/templates directory (all the CSS classes are from Bootstrap):You should declare a XML namespace so you can use Thymeleaf tags and attributes with the prefix th in the HTML document:The following meta tag will make the page responsive on different devices:The following link for using Bootstrap version 4.4.1 from a CDN website:To display the logo image, you should put an image file under the src/main/resources/static/images directory:For the input fields, we use field type email and password so the browser will validate the email automatically. And use the attribute required for both email and password so the browser will check fields not empty:So with HTML 5, you don’t have to write a single line of Javascript code to validate the form. Very convenient!And note that, to display the original error message in case failed login, you should print message of the

Bootstrap 3 Login Page Codepen

SPRING_SECURITY_LAST_EXCEPTION object from the session like this:That’s code example of a Spring Security custom login page with Thymeleaf, HTML 5 and Bootstrap. To see the coding in action, you can watch the following video:

Bootstrap Login Form

Related Spring Security Tutorials:

Other Spring Boot Tutorials:

Bootstrap Authentication


About the Author:

Nam Ha Minh is certified Java programmer (SCJP and SCWCD). He started programming with Java in the time of Java 1.4 and has been falling in love with Java since then. Make friend with him on Facebook and watch his Java videos you YouTube.