61. Bootstrap 4 Forms | Adding an image & input fields - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we will continue building our login portal, we will add an image and two input fields using #bootstrap. Bootstrap helps to create responsive images. #Images are made #responsive with .img-fluid,max-width:100% and height: auto; are applied to the image so that it scales with the parent element. So add .img-fluid and also add your own class to it to ensure that the image remains at the right place. Like class=”img-fluid signin-img” Now, copy this class name signIn-img in the CSS. Grab the class by its element and add respective padding, margin, and display of block. img.signin-img { padding: 0 2rem 2rem; Margin:auto; display: block; } Here, we are adding three values in the padding. The first value is going to target the top, the second value is going to target two from the right and left and the third value is going to target two from the bottom. In rem unit or stands for root and it is relative to the font-size of the root element. To insert two input fields go back to your browser search for bootstrap 4 then click on documentation, then components, and then come over to forms. As we are in the learning stage we need something very basic. For which we can use .form-group class. It is the easiest way to add some structure to forms. It provides margin-bottom around a label and control pairing. Since it is a class you can use it with fieldset and div. We have to work with form so create your own class and it is done to control the entire width of the parent not just the width of the individual input field. Copy the name of the class, go to the CSS, grab it by its element. Add the maximum width and a margin: auto. form.signin-form { max-width:350px; margin:auto; } ---------------------------- Week 2: Day 3 Section 8: Bootstrap 4: Creating a Login Portal Tutorial 61: Bootstrap 4 Forms | Adding an image & input fields ---------------------------- Do subscribe and hit Bell Icon ---------------------------- Follow us in social media handles for opportunities and code related support. Instagram: https://www.instagram.com/wb.web/ Facebook: https://www.facebook.com/wbweb/ Twitter: https://twitter.com/wbweb_in/ LinkedIn: https://www.linkedin.com/company/wbweb/ ---------------------------- Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For more information, please write back to us at [email protected] or call us at IND: 7077568998 After completing the course, write to [email protected] for internship or freelancing opportunities. For consultation or partnership, related queries drop a mail to [email protected]. ---------------------------- Affiliate Space Brand: Hostinger International https://www.hostg.xyz/SH13I (International) https://www.hostg.xyz/SH2H (For India)