60. Bootstrap 4 Cards & Creating a Sign-in Portal Box - Full stack web development Tutorial Course
13.9 هزار بار بازدید -
6 سال پیش
-
In this FullStackWebDevelopment
In this FullStackWebDevelopment #tutorial course series video, we are going to learn about #bootstrap 4 #cards & Creating the Sign-in Portal Box.
We have the starter template which has all the required meta tags, scripts and doctype.
You can also check the latest version of the bootstrap, download it and add it to the project.
Link the styles to the project, we know how to do it from the ‘project setup’ video.
So, first, we are going to add a container to the project because bootstrap requires everything within a container. We will be using a regular container because we are building a login portal and it's going to be in the middle of our viewport.
Remember all of our content has to be within the columns and columns can only be an immediate child of a row. So add a giant row and then add a column.
For this project, we are going to create 3 columns.
- The first column would be the regular one so that it can take up an even amount of space on each side of the column.
- The second column will have all the content. This is where we are going to keep the login portal.
- The third column will also be the regular one which will take all the extra or any extra space on the sides and distribute that evenly as the viewport changes sizes.
Now, we are going to add a bootstrap component to build our login portal. We are going to use a panel.
Write this code inside the col-8 class. This card is important to hold the content that we want.
Or you can open up the browser, search bootstrap 4, click on documentation, then on components and then select the card where you can find different types of cards and can choose whichever you want to.
Next, add a background to the project. So, for the entire viewport background, we are going to add a class to the body and name it whatever we want. And then copy the name of the class, go to the CSS folder grab the element and then grab the class by the element. And then add a background colour.
body.signin-body {
background-color: #e6f2ff;
}
Now, we will move our card element to the centre and for this, we can add a margin to the top of our container to push it down from the top of the screen to the centre. Then add your own class to the container. Copy the class, go to the CSS and then grab the element by its class and then add a margin-top.
.container.signin-container {
margin-top: 8%;
}
Then add drop-shadow or you can use anything to make the card look better for which we have to work with the card. Add your own class to the card then copy the name of the class, go to css and then grab the element by its class. Add the respective padding, background colour and then add the box shadow. Also make sure box shadow works on multiple web browsers.
.card.signin-card {
Padding:40x 0px 20px;
background-color: #f4f4f4;
Box-shadow:2px 2px 5px rgba(0,0,0,.5);
-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.5);
-moz-box-shadow:2px 2px 5px rgba(0,0,0,.5);
}
----------------------------
Week 2: Day 3
Section 8: Bootstrap 4: Creating a Login Portal
Tutorial 60: Bootstrap 4 Cards & Creating a Sign-in Portal Box
Project Link: https://wbweb.co.in/learn/60-Devslope...
----------------------------
Do subscribe and hit Bell Icon
----------------------------
Follow us in social media handles for opportunities and code related support.
Instagram: Instagram: wb.web
Facebook: Facebook: wbweb
Twitter: Twitter: wbweb_in
LinkedIn: LinkedIn: 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 an 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)
We have the starter template which has all the required meta tags, scripts and doctype.
You can also check the latest version of the bootstrap, download it and add it to the project.
Link the styles to the project, we know how to do it from the ‘project setup’ video.
So, first, we are going to add a container to the project because bootstrap requires everything within a container. We will be using a regular container because we are building a login portal and it's going to be in the middle of our viewport.
Remember all of our content has to be within the columns and columns can only be an immediate child of a row. So add a giant row and then add a column.
For this project, we are going to create 3 columns.
- The first column would be the regular one so that it can take up an even amount of space on each side of the column.
- The second column will have all the content. This is where we are going to keep the login portal.
- The third column will also be the regular one which will take all the extra or any extra space on the sides and distribute that evenly as the viewport changes sizes.
Now, we are going to add a bootstrap component to build our login portal. We are going to use a panel.
Write this code inside the col-8 class. This card is important to hold the content that we want.
Or you can open up the browser, search bootstrap 4, click on documentation, then on components and then select the card where you can find different types of cards and can choose whichever you want to.
Next, add a background to the project. So, for the entire viewport background, we are going to add a class to the body and name it whatever we want. And then copy the name of the class, go to the CSS folder grab the element and then grab the class by the element. And then add a background colour.
body.signin-body {
background-color: #e6f2ff;
}
Now, we will move our card element to the centre and for this, we can add a margin to the top of our container to push it down from the top of the screen to the centre. Then add your own class to the container. Copy the class, go to the CSS and then grab the element by its class and then add a margin-top.
.container.signin-container {
margin-top: 8%;
}
Then add drop-shadow or you can use anything to make the card look better for which we have to work with the card. Add your own class to the card then copy the name of the class, go to css and then grab the element by its class. Add the respective padding, background colour and then add the box shadow. Also make sure box shadow works on multiple web browsers.
.card.signin-card {
Padding:40x 0px 20px;
background-color: #f4f4f4;
Box-shadow:2px 2px 5px rgba(0,0,0,.5);
-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.5);
-moz-box-shadow:2px 2px 5px rgba(0,0,0,.5);
}
----------------------------
Week 2: Day 3
Section 8: Bootstrap 4: Creating a Login Portal
Tutorial 60: Bootstrap 4 Cards & Creating a Sign-in Portal Box
Project Link: https://wbweb.co.in/learn/60-Devslope...
----------------------------
Do subscribe and hit Bell Icon
----------------------------
Follow us in social media handles for opportunities and code related support.
Instagram: Instagram: wb.web
Facebook: Facebook: wbweb
Twitter: Twitter: wbweb_in
LinkedIn: LinkedIn: 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 an 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)
6 سال پیش
در تاریخ 1397/03/09 منتشر شده
است.
13,908
بـار بازدید شده