62. Bootstrap 4 Adding button and labels in login form - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we will continue building the login portal. Here, we will add the sign-in button, labels, and a text at the bottom like ‘create an account’ to wrap up our #bootstrap #login #form page. We will add the button and the checkbox in the form. We are doing this because the button and the checkbox are related to input and anything related to input is included in the form. Here, we have a btn class which is the default or standard button. Also, we have a btn-primary class that provides extra visual weight and identifies the primary action in a set of buttons. We can also remove the btn-primary and add our own class. Copy the class that we have created, go to the CSS, and grab the element by the class. Add colour, then background colour, the width of 100% that means it takes the 100% of the parent element it lives in that is form. Bootstrap offers classes used to get buttons of various sizes. - .btn-lg: This makes the button size large. - .btn-sm: This makes the button size small. - .btn-xs: This makes the button size extra small. - .btn-block: This creates block-level buttons-those that span the full width of a parent. And these classes will take care of all the padding and font size for us. Next, we will be adding a checkbox. So, the checkbox is a component used to allow a user to make multiple choices that are broadly used in forms. For reference, you can search for bootstrap 4, click on documentation then components then forms and then scroll down to checkbox. You can choose whatever you want to. Write the code in the HTML file inside the form right under the button. Also to make the space under button look more neat we can add a margin-bottom in the css file. And write the code as follows: button.signin-btn { color:#ffffff; background-color:#d64829; width:100% margin-bottom:1.2rem; } Then we need an anchor tag saying ‘Need help’ for which we can use our label class of form-check and add an anchor tag. After that, we have to add a link to create a new account at the bottom which has to be outside of the card. So, create an anchor tag outside of the card close. You can create your own class, copy it to the CSS file, and grab it by its element. Add the font-size,text-align to centre, and a display: block to move and a margin-top to clear the space between the card and the anchor tag. And we can write the code as follows: a.create-new-account { font-size:1.2rem; text-align:center; display:block; margin-top:15px; } ---------------------------- Week 2: Day 3 Section 8: Bootstrap 4: Creating a Login Portal Tutorial 62: Bootstrap 4 Buttons Adding button and labels in the login form. ---------------------------- 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)