Bootstrap 4 Login Form - responsive web design

subscribe to learn and tech channel and press the bell I can Poli to separate from run and tech hey the everyone my name is Prakash metallian welcome to learn and tech in this video I'm going to talk about how we can create a login form using bootstrap or bootstrap for is a latest version of bootstrap and we'll learn how we can create this kind of login form using their technologies so what you need to do is first of all you should have a folder structure for that I have already created bootstrap for login form folder and inside that folder I have CSS images and GS images folder has some background images and apart from that I have nothing right now so what I need to do is open my text editor you create a HTML create HTML here I'm going to create an index dot HTML this is my HTML file and next I'm going to create is a CSS file with name global dot CSS once that is done create your HTML file structure that is there under title once that is done you can include a meta tag here which we'll talk about later on why we need that and now good we are getting good straight bottom side so that I can do is I can either download my bootstrap full was in from here in the download section or either I can use my CDN link for that purpose okay so we have our CDN link here and we can download files from here alright so what I'm gonna do is I'm gonna take this CDN link from here the CSS file from here and all these three GS file from here and paste it in body section and now I need to create my structure here first of all I will create a section with the class container fluid all right once that is done I'll create another section I'll create a class row this is our bootstrap structure and now I'll create a section with class called 12 and call sm6 and then call MD three all right and inside that and inside this section I will include my form code so how can I include my form code I'll tell you an easy step just go in you get would shevkov in the component section that is there all the component here click on forms and if you'll see there this is our default form code how it's will look like and we can edit this just copy from here and paste it here let me just structure it this is there alright we'll see how it's look in our project section so right now this our form what's look like in browser and we need to create it like this alright so what I'm gonna do I'm gonna and I'm gonna add some custom CSS here so this material dot CSS first of all what I need to do is I need to link this global dot CSS here just type the folder name various cases suicide and what global dot CSS a name of our CSS file now it is linked to our HTML file so whatever code I'll include here it will reflect to our login form here alright so what I need to do first thing is in the form section I will create a class form container alright this is my phone container class and include this class here add some CSS to this particular class so first thing what I need to do is add a background color to this this is their put padding like 30 pixel top bottom right left and create a border radius of 10 pixel and then include some box shadow it will be too big so 0 pixel 10 pixel and 0 pixel and the color would be kind of black we'll see that's look yes it is there so this is our login form it's now looking like and what I need to do is need to bring it in center and make this button larger so there is a an assignment button we have button block class to make it full width and it is there now and to bring this form in central line what we need to do is go in your row section here narrow class justify content now your content is in the center of your page and what we need to do now is and the container fluid I need to include a class called PG and use this class here include background:url root folder and we have images folder there and inside the images I'm going to use this particular images beautiful it's bz4 dot jpg and it will be like no-repeat and then it will be hundred percent right would be 100 VH viewport height and background size will be 100% alright if everything goes well it will reflect here this is our login form what we have created and now what you need to do is this include make the position of this absolute and from the top what 15 which there we go with our login form so it's pretty much same what we have created here and if you see it in your mobile device of screen size it will look like this but if you can see that in a background image the image is not coming full width all right so white is not coming because we have defined the image size 100% and that's why it's stretching it out so we'll make it like Honda nothing it will come as an tyre size but for the desktop it will not look proper so again what you can do it include this media query like form X with 678 the background size will be 300 pixel and grid in that the background size will be 20% so how my form will look like now is this is my default form and when I stretch it down to mobile devices it will look like this perfectly fine all right so this is how you can create a login form and if you just enter something here and the summit here it will not it will throw you an error cause of bootstrap default functionality and if include add the rate which is mandatory for your email address and just to dumb you are type your some password check me out data it saved all right so this is how you can create your login form for bootstrap for if you liked this video don't forget to subscribe my channel and keep watching on attack thanks so much

Channel: Lernen Tech

Views: 135,412

Keywords: how, to, design, login, form, in, bootstrap, html, css, web development, what is bootstrap?, website, web, create, making, website design, web design, design with css, login form, design form, design sign up form, how to make login form, how to design form with css, css for beginner, front end development, login form 2018, new login form 2018, create a login form, make a login form, how to create a login form, bootstrap form design, bootstrap 4 login form

Id: biOCexhZZd8

Length: 9min 51sec (591 seconds)

Published: Thu May 03 2018