Login Form HTML CSS | Bootstrap 5

building a login form with bootstrap is really easy i'm going to build this one over here with some basic html and css so that if you need your own login box this will take you through the whole process my name is adrian and i do videos around design and development so if you haven't already hit like and subscribe and let's just jump straight into it we'll start by creating a new project and i'm going to create a file in here called index.html here we'll do our html code but to make things easier we'll head to the bootstrap website and we'll just grab a copy of their starter template which will help us get up and running in here we have everything we need including pulling in bootstrap as well as the js that it might be using we will update the title over here and we'll change this to bootstrap login form we don't need a h1 yet but we'll get to that in a bit the only other thing i'm going to do is hit f1 here and open up a live server so that we can see our changes live as we make them what i might do is just have them back to back so that we can see our progress as we move through since we're building a login form the very first thing we're going to add in is a form and for this i'm just going to paste it in here and for the time being we won't give it any action so let's place that in here what we do want to be able to do is add maybe a h1 tag here saying maybe please sign in and we might also place in an image in here and in this case the image we might use is just the bootstrap logo here so let's put boot strap logo and we might give this a height and a width so i'm thinking maybe pixels let's also make sure that we're copying in the full syntax here for the image itself and there we go now the other thing that we want to do here is make sure all the content is center so to be able to do this we're going to wrap it in a text center div i'm just going to place that in here just like this and we also want to give it a little bit of a margin there from the top so in our image tag here i'm going to add a class here and we're going to pass in a margin of top of maybe something like 4 units and this will just give it a little bit of space there from the top other than that we should be almost ready we just need to maybe customize the h1 tag here just a little bit what i'm going to do is i'm going to make it a h3 class here which will make it a little bit slower smaller and will also give it a little bit of margin at the bottom of maybe three units and we'll also get rid of the font weight from being so bold by passing in font weight normal all these classes will make it look a little bit better and i think that's looking okay the only other thing i'm thinking is to give it a little bit of space there from the image so i might pass in margin bottom with four units as well and this will just give it a little bit of space there now that we have these elements in here we can actually create our sign in so what i'm going to do is i'm going to create a label in here and this label i'm thinking will pass in a class to start off with and this class will be sr only what this will do is make sure that the label doesn't actually show up but we'll add one anyway just so that it's accessible and in this case we'll just pass in email address in here i want to create an input and for this input we're going to do this as any type of email we want to add a couple of other things in here such as an id which i'll set as maybe email address and we'll also want a class in this case i'm going to do form control and finally we'll also do a placeholder and in here i'll type in email address we can add in other stuff here as well such as maybe a couple of fields like required and auto focus and what this will do is make sure that when someone's filling out the form they will need to fill this out and it'll automatically focus in on this input as soon as the page is loaded so that's very useful if you want to make sure that people can easily log in the next thing we're going to do is add a second input here now in this case i'm going to do another label here and in this case we've also missed out the four section here on our previous one so i'm going to add in a4 section here and in this case i'm just going to pass in the id just here let's create another one here and this will be for the password so in this case i'm just going to put in password as the four section and in here i'll just pass in password for the label this label we also want to make sure that we have that class of sr only and let's create the input here too this input will be a little bit different in this case it'll be a password of type and we'll also pass in the id here as password and we'll also put in a placeholder here as password finally we'll add in the bootstrap class here for form control let's hit save on that and we can see we've got our second input here so that's looking pretty good finally we'll add in another section here for the sign in and what i want to be able to do is maybe do an input here or sorry maybe a button in this case the button will just say sign in so we'll have it just here but we'll style this a little bit as well let's add some classes to it so what i'm going to add is button and button dash large we'll also pass in button dash primary which will use the primary color there and finally we'll do button dash block and this will just make sure that it's using the full width we can wrap this in another div and in this case this div might give us some margin so what i'm thinking of doing is maybe giving it a margin top of 3 units and let's put that in there just so that it's a little bit spaced out from our email and our password there a lot of logins also have a section to remember me so let's create another one for that i'm gonna create a class here called checkbox and what i'm thinking is we'll do a label and inside the label which we don't have to add anything in we'll do an input type of checkbox and in this case i'm just going to do the value here as remember me remember me let's also pass in some text here so the user knows what this is so we'll do remember and that should just pop up over here and there it is that's looking pretty good i think we're almost done here the only other thing i'm thinking of is maybe adding a copyright or some other content but otherwise i think that's pretty good now you will notice that as we zoom out the content for this is a little bit large this is because our current form doesn't have a max width so what we can do is we can pass in the style class in here and do a max width of maybe 480 pixels and maybe we'll also pass in a margin here of odo and this should center it the only other thing i'm thinking is maybe to add a few more units of margin there from the top so i'm just gonna do mt-5 which will do five units for there from the top we could make this even smaller by doing 240 pixels or 300 pixels it depends on what you need but hopefully this gives you an example of how to create this sign-in input there are always small customizations you can do to make this look a little bit better such as for example if you have a look at these inputs here the styling on these doesn't look quite right because they've got bordered radius there and those seem to go in and out a little bit there the very first thing we could do for example is here in our classes we could add a margin bottom of three units to give it some space in between but another thing that's useful sometimes is just to pass in your own styling so in this case i'm going to do a styling definition here for any inputs that are the type of email and what i'm going to do is maybe do a border bottom left radius of 0 pixels and a border bottom right radius of 0 pixels we're going to copy this out and we're going to create another one here for password but in this case instead of the bottom section we'll do that to the top we can see that we've got these two borders essentially being finished out just let's make sure that we remove the little right radius the other thing here is that for the password section we could do a border top of zero pixels and that'll get rid of that extra line there and it looks like everything fits in nicely now for the input box here we could do a margin top of three units just to give that same amount of spacing from the top and the bottom and otherwise i think our sign-in is finished now what we can do now is just do a quick test by testing the email and testing the password and testing the remember me section and the button itself and it looks like that's all come across if you were building this in an application this is the part where you would implement some javascript or add in your react or angular of you and actually create the functionality for the login but this is something we might have a look at in a future video i hope you enjoyed this one though if you did hit like hit subscribe otherwise i'll see you in the next one thank you

Channel: Adrian Twarog

Views: 19,846

Keywords: login form html css, login form html, login form, login form html css js, login form html css and javascript, login form html css code, login form html with username and password, user login form in html, how to login form in html, login form tutorial, bootstrap login form, bootstrap 4, bootstrap 5, bootstrap, bootstrap login form design, bootstrap login form tutorial, bootstrap login form design responsive, bootstrap login form template, login form design, html login form

Id: 3ENJ_xd625s

Length: 10min 15sec (615 seconds)

Published: Mon Jul 20 2020

Reddit Comments

[u/Kadivala]

Hii