69. Bootstrap 4 Adding images and buttons - Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial course series video, we will learn how to add #images and #buttons using #bootstrap CSS. First, add a div class for sectionLight. Then we will add content inside this class. Then create a div class of row and have a column inside it that would take up the entire viewport and therefore, we will have a common width of 12. For adding content create another row and then add a column width of 4.As we know we have to add 3 images for our project that is 12 divided by 4, we have to make these columns equal and add a div class of 4. Also, we want our images to stack on each other when it is in a mobile state. Then add the first image for which we will use the bootstrap class img-fluid which is going to put a width of 100%, a height of auto so that if the viewport changes size our image is going to flex appropriately. To style the image we will create our own class. Grab that class, copy and paste it in the CSS file. Add display of block and margin of the auto. We can write the code as follows: .imgCenter { display:block; margin:auto; } Right under the image create another row then add a column class small width of 12 which will give us the full grid system. Then add a button class inside the column. Also to style the button we'll create our own button class. Grab that class, copy and paste it in the CSS file. Add display of block, the margin of auto, margin-top of 15 pixels, margin-bottom of 20 pixels, and a width of 54%. We can write the code as follows: .btnCenter { display:block; margin:auto; margin-top:15px; margin-bottom:20px; width:54%; } ---------------------------- Week 2: Day 5 Section 9: Bootstrap 4: Skate or Die Website Tutorial 69: Bootstrap 4 Adding images and buttons ---------------------------- 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)