Understand Bootstrap easily and use it with React JS | Shingai. L Munyuki | Skillshare

Understand Bootstrap easily and use it with React JS

Shingai. L Munyuki, Design Lead | Front End Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (2h 16m) View My Notes
    • 1. Welcome to the course

      3:36
    • 2. Setting up our starter theme and environment

      5:53
    • 3. Let's explore the Bootstrap grid

      10:13
    • 4. Digging into columns and responsiveness

      9:23
    • 5. Exploring padding and margin

      9:36
    • 6. Let's align columns vertically

      14:34
    • 7. Let's learn how to align columns horizontally

      9:49
    • 8. Let's dive into Sass theming and maps

      13:53
    • 9. Learning to work with the awesome card component

      13:14
    • 10. Let's finish off working with cards

      12:21
    • 11. Let's put it all together - 01

      10:11
    • 12. Let's put it all together - 02

      10:41
    • 13. Let's put it all together - 03

      12:43

About This Class

Do wanted to learn how modern web applications such as HubSpot, Asana are styled? Have you ever wondered how websites for Barclays Bank or HSBC handle all that design? 

How do they create all those components? How do they style them beautifully and professionally and on brand?

There are many styling frameworks out there, but the best that has stood the test of time is Bootstrap.

In this course, I will teach you the fundamentals of Bootstrap. How to use it to prototype and build sites and web applications fast.

Using Bootstrap SCSS, we will leverage the power of SASS to design everything on the go. Using variables and superpowered CSS.

Using React JS in a Gatsby environment you are introduced to a powerful stack. One used to create applications such as Uber, Airbnb, Facebook, Instagram, and many more.

Don't worry about installing anything on your computer. We will get set up fast using Codesandbox. An online IDE for rapid web development, then get right into coding.

This course covers the fundamentals needed to create outstanding, professional components. 

It gets you up and running with the most used components, styles, and elements. Create and prototype awesome websites, web applications without spending weeks learning Bootstrap itself.

These include:

Layout and grid

Starting right from the fundamentals, We will learn how the Bootstrap grid works. we will understand the scaffolding of a website or web app, dealing with containers, rows, and columns. We will go through how to make them responsive and adjustable.

Paddings and margins

We will dive deep into creating spacing around elements. We will learn about paddings and margins and how we can use them. We will explore their use for different situations such as responsiveness.

Alignment

We will explore how to align columns horizontally and vertically. We will align columns from the row. Ss well as the individual columns themselves, for greatest flexibility.

Theme

We will explore how to brand our web application by creating a color palette. We will use that palette to create a root map. We will use that to theme different elements and backgrounds quickly. All this gives our web application a professional and branded look.

Card

We will explore the card component, as well as the components within the card. So that we can understand different layers and facets of customization. Including background colors and shadows etc.

Putting it all together

We will take everything that we've learned and put it together. We will create a simple layout to display the three benefits of our software or service.

Other stuff you will learn

Within all that will explore all sorts of stuff. This includes different buttons, borders, typography, responsive text alignment, and many more.

Transcripts

1. Welcome to the course: Hey, thanks for joining me and welcome to this course. Rapid UI prototyping with Bootstrap says react via Gatsby day. Yes. My name is Shing guy and I will be teaching you this course. In this course, I will teach you the fundamentals of Bootstrap, how to use it to create awesome UI and rapidly prototype anything that you want to quickly design and put out as components will be also leveraged the power of SAS, so that we can use things like variables and color maps and use those to create a consistent theme all across our website or our web application. We will also leverage the power of React JS in a Gatsby environment, which is a static site generator that will allow us to build really awesome and fast, highly optimized web applications and websites. And don't even worry about setting up and all that kinda stuff. We will be using codes sandbox to dive into it as post sandbox is an IDE used to rapidly prototype web applications online. So we will be diving into the layout and greed. Learning how Bootstrap works, scaffolding, et cetera, will also go into the padding and margins and how we can space things and elements, as well as the wind that responsively will also go into alignment, where we learn how to align different elements horizontally and vertically. Just to get that flexible look. To anything that we designing. We will go into the beam where we create color maps or themes in Bootstrap itself so that we can keep a consistent look throughout a website. Also explored the cod component, which holds other components. The perfect entry points to understand how the components work together. And with that, we'll be explaining different things such as how to use shadows and background colors and text colors, et cetera. And then we'll put it all together, taking everything that we've learned from the roles, the layout, the greed, all the way to a cod component and the other classes such as shadows and buttons and et cetera. And then put it all together to create a really awesome component which you can use as benefit cards or price cards or price component or anything like that. Without further ado, let's jump into it. Let's take a look at what we'll be building. 2. Setting up our starter theme and environment: Hello everybody. Alright, so what we wanna do here is to go into what Bootstrap is, the basics of it, and how you can navigate yourself around all sorts of stuff. So we're gonna get into the grid that the columns and just your whatever that can make you. There will be versed in Bootstrap itself so that you can go and you can design it with a using HTML, CSS and JavaScript. Or if it's JavaScript, something like React principles, they are the same. So obviously you know what Bootstrap is. It's quickly designed and customized, responsive mobile sites. But here we also include apps. So if you are building a web application, you can certainly use React, which I would advise. And because Bootstrap is pretty powerful and it's very easy to use. So we're gonna go into a lot of stuff. The first thing I want to do, I just want to jump right into it. And what I will be using, I'll be using Gatsby js to Buddhist tutorial. So gasp EJS is a react based open-source framework for creating websites and apps. Won't have to change much. And the link this here, this get, I'm gonna link it in the, in the description so that all you need to do is to go to Code sandbox. And code sandbox is, it's an IDE for rapid web development. It's free. You don't really have to pay for anything and we want to get this thing up and running fast without you having to download files onto your computer and go to all that setup process. All you need to do is just go to New sandbox and you take that URL and you just import important fork. So it's creating our repository for us. All right, so once it does that, now this is a, a framework, a Gatsby Stata framework, which I have. So it will be something like best Gatsby Stata. It's a Gatsby started him Standard Library. And you can get all sorts of Gatsby is data libraries here. Then what I've done is I've went ahead and did that. And then I've included node Sass and Gatsby plugins as this will allow us to use SPSS or SAS for Bootstrap, which is and I've included rehab Bootstrap or that sort of stuff so that you don't have to go in and do that. We just want to say and and and stop messing around with everything. And so once we have that in place, let's just reload that. So we have it right here. There's nothing in it. It's just extracting a whole bunch of stuff, setting up. But just to explain it a little bit. So we have our pages here. We have our index.js where we'll be doing most of our coding. Most of this, we're going to take it off and see what the console is saying. Not so these are just errors which have to do with LinkedIn. You can ignore this is just there to make your code look nice. So you have your SCSS here, as you can see, I've included some stuff in here which we'll go into, especially like colors will go into when we built them with the themes by Tom. You know, you have your default colors here, but then you have colors that I've included in here. And I'll show you how to do all that. And then we can use them as variables for our SCSS. Alright, let's just go ahead and see if, and see if that has anything. Okay, so we can see that it's working. Alright, so let's take that off. Okay, so this is the, this is what we need right here. 3. Let's explore the Bootstrap grid: Okay, so this is the, this is what we need right here. So let's take this off. And then the scope gets tick that off. Let's go back to bootstrap. So obviously, the first thing you need to think about when you are looking at Bootstrap is you're thinking about the grid system, right? And the grid system is the scaffolding. You know, sometimes you want websites that are, you know, if we go to just a random website, let's just say, I don't know. Say sh Gatsby itself. Actually. We can see that here we've got a grid system where you've got 12, right? This is, this is a column right here, and then this is a column right here. So how do we organize our work, our screen into different columns. We might have one, we might have to, you know, this is one right here. And you can see there's a lot of padding around here, right? And this you've got to hear. Right? And he got to it's mostly two to two. And then here below you go 123456. Okay, so we're gonna be using a grid to do all that sort of stuff. And it's very easy. So first thing I would say, obviously is you go to the grid system and you can see that your greatest right here, you've got your container. You just take that and we'll explain that, right? So if you put that in there, just like that, save that. You've got three columns, right? You've got your role. And your role is what holds, what's, what holds all of them. So if we, when we say call SM, that means called small. Alright, take that out so that we can get to C, So we can see that it's like that. And then when we minimize it, we make it into mobile. It becomes like that. So we'd like when it's, when it's small, it's full width. Okay, we're gonna even inspect that so that we can see that it's all full width is four width, right? Because it just says call SM, Right? So when you're dealing with these columns, they represent how, it's, how your, your, your columns, your, your devs, how they stack up in different areas, whether it's mobile or desktop, et cetera. And that's determined by what you type in here. So if we say, for example, call SM. Coalescence to call FSM. To save that. You can see that what happens is that when it's, when it's full width is only it only takes a place of like just that like it doesn't take the full width. You know, it takes the thing is, what happens is that within this space here at 12 columns, right? A makeup, a role, okay? Because you divide it by 12. So what happens is that if your div call SM T2 is, is to write it, that means it will take up the space. It needs six of them to take up the whole space because you are dividing it by two, okay? You just taking, you taking two columns out of the 12. Ok. So the best way to show you that is let's just say something like this. We copy that. And then we'll do something like that. It takes up the whole place and what's going on here with the container. And I haven't spoken about the container. In fact, that's what we should do firstly, so if we black containers provide a means to center and horizontally Paget contents. So container will give you a padding at the side so it doesn't take the whole space when it's full width. Okay. It just takes it it takes it leaves padding outside. See how you have this padding right here, outside. Dislike that this whole, this whole section here. But let's say you want to full width, ok. If you want to fool with, you have to make this fluid like there's fluid. And then that should allow us to take the whole space like this. So we need 1234566, which are taking two space of two. That will fill up the whole place. Okay? Now, if you wanted to be 12, if you want. So at this moment right now, if we do something like this, it means that it will stack up, okay, because it's taking two, so that means six above and below. Let's just say for example, you want to fit all of them in the way you need. Do you have to do it as column one? It only takes 11 space out of that, out of all the 12 spaces that make a role. Okay? So if we have one, says take all that off and n 2123456, and then So we've got 12, right? And then we do that. It takes all at 123456789101112. It does full width because again, within a role at 12 spaces. Okay. And the bigger the space you have, the less it takes within the row. So the less, the less columns you can put in a row. So if a column is called SF6, right? That means that it would take, you would need just two. Okay, so if we say code SF6, let me take that off. That means is taking half, okay, so SF6 is half obviously. And here you just break it down. 66 by six times 212, okay, and for the same thing, if you want to make it for, then that's a quarter. Right? So you need four of them, four into 12. Like that. You still have you have four that are taken up to three naught, four a2 off my bed, my meds is wrong. What am I saying? It's not bad is three. That's embarrassing. Okay. So that's, that's how you deal with grids. Okay? So if we have a situation where, let's say we want to and say we just want for here, right? In order to fill in the full one. We can say what remains after full, right? So it's eight as what remains like that. Okay? And then what happens is that we have extra, this one is much bigger than this one here. Now you can use, Maybe you can put an image in there. And then here you can do something else. So let's just say EG. Okay, so and then this one, let's say yellow. I don't know if that's a variable. Let me just check. Node does not have variable. Let's go back to our variables and nc, actually what we have, NFO. Nfo. Okay? So we can see the differences that are made with that, right. 4. Digging into columns and responsiveness: And then from here, what we can do is, let's say we want to mess around with different sizes, okay? And remember that's all you need to do for the grid. You can have that lag, that copy. You can have a like like three men here. You can have nine. Right? Something like that. Let's give this a text white. This one and text white background which is dark. So let's do that. So you can see, you can stack it up differently. You can have different columns, different size. And so the key is that number 12. And what goes into number 12? You know, if you want just two columns, you can have, you know, you can have SF6, but then you can also do other stuff like md, which is medium. Now this md and SM, these are breakpoints, OK? Ie most of the time use MD. Okay, sometimes you won't notice the difference until you use that like literally like working around different mobile and stuff like this. Okay? So for example, if we have it in mobile, but we still want to break it up the way it was. And usually there'll be a case of Maybe you are displaying logos. You can just say call for Apollo eight. And don't put a breakpoint in death. So you can have something like that. Is a so when it's mobile, it's still it doesn't stack up. It will still have the different the different break points just the way it is like that. But if you so so what does that tell us? It tells us that when you have coal for it doesn't matter whether you've, you, you're in a mobile screen or you're on a desktop. You haven't told Bootstrap that you want to to stack it up any other way than the way then just as a, as, as four columns on the left and n h columns on the right. It doesn't matter whether it's, it's it's it's bootstrap or is I mean, it's it's mobile or tablet or whatever, it doesn't matter. Ok. But then when we say col, md For col md eight, ok, what we're saying is that we only want it to break down when it's when it's medium or above. Okay. I mean, we we only want to We only want it to just stack as in full width, right? When it's, when it's mobile, but when it gets to full screen, we don't want it to do that. So you can see like that because we've given it an option of just doing this on the MD breakpoint, which is probably like the tablet or the the the laptop screens. It does that. Okay. So inspect. Okay. So let me take this off so that we see properly. So you can see that in mobile. We told you that when it's in more bow, right? Make it full width. But then when it's MD and above, like a laptop or a desktop, we want to break it into, into the respective size is like this. The respective breaking it up like that. So that's the whole point of SM, MD And just pure coal. Now the other thing you can do is you can have it just as cold MD, right? So what happens is that you define the first column to be four spaces out of that 12, right? And then what you wanna do is you tell it as whatever is remaining, give it to the, to the next column. Okay, so we have that saved dance already saved. Still looks the same. But then what's happening is that this one here is taking up a remaining space after this bit here. Okay? We just defined this bit here. Now. The remaining has to be taken by this here. So we can even do something like m, d three. And then, so let's say BG success. You see, so we only define these ones here, right? And then this one is taken up the space that's remaining. Okay? And that's how you create a scaffolding. Alright? So let's say you want to create like some icons, right? Or let's say benefits. And you want in a company and you want, you want, you want to put something else in here. So benefit, benefit one. And then here, same thing, benefits to benefit three. You can do something like that. And then you can put your cards in here or things of that nature. And you've got a grid system, you know, and that's how you work with a grid system. And now to, to summarize, again, what you wanna do is when you have just coal. Coal. Coal, right? It's still say is it's the same, but you haven't defined any break points, right? So when you just have cold, that means even when you put it into mobile, Right? It will still have the three, Like this is not going to step up. But if you wanted to stack up for Mobile Responsiveness, right? You want to give more, you have a lot of information here and you needed to take up the whole space, right? You then give it, you then tell Bootstrap that. No, listen, what I want you to do is only break it into the respective columns when it's mobile or above, right? But when it's, when it's when it's when it's tablet or above. But when it's more bile because you need more space, you don't want it to break into four. You actually want it, you want this column to take the whole full width. And it will be like that. So that's how you deal with responsiveness with the grid in Bootstrap. Very simple. Alright, so that's it. I will see you on the next video where we'll go more into bootstrap and talk a little bit more. Now, what you wanna do is just go ahead and check out. We have a full course about how to deal with building a landing pages and Gatsby and just dealing with React situation, in fact, this sort of thing. But we actually building a full landing page and it's very fast, is like lightning speed and all that kinda stuff. So make sure you check that out. But I'll see you in the next video. 5. Exploring padding and margin: Hey everybody, welcome back. Alright. So last summer guarantee to a grid system where we belong with breaking it down, breaking down the columns that you can put in a row. And we determined that in a roll you can have 12 columns. And depending on how big you want the role, you can have the role as one. You can have a column to take the space of like two or three or four, or even the whole full width if you are it before we, it is going to be call 120 col md two, depending on how you want to stack it and how you want to break it down. So for example here, benefit one is taken up coal 12, so is taken up the full role. And it's for width and same as the other ones. But you know, when you have it as more, when you have it as desktop, it just takes up the space of four columns within the row. And then same thing. So because of that, you've got three in here. So those are the basics of a grid. Now what we wanna do is we want to mess around with like how to create spaces and paddings in that nature. Because obviously you can see that there is no padding here. It's just like that. We want to put in some padding here and explore some of that. So the first thing we wanna do is let's give our container fluid a padding itself. So the basic thing is you have padding from one to five. So if you have P one, you've given the container a padding of one, r e m, e m is k. Not bad. Happening root e m. It provides a way to specify lengths as fractions of the root elements font size. I usually use. Now it now by default, Bootstrap is built this way. So if we have one, p1 is equal to one RAM, Okay? So we've given it some padding like that. As you can see, right? Is all the way. The padding is all the way. And it is simply like that Lucent that it created a space inside the container. So padding creates space inside the container, okay. As opposed to margin, which creates space outside a container. Okay. And that shows up as orange. Okay? So like that, ok. So usually you want to be going with padding and creates less issues unless there's a specific need for you to create margins. Okay? So our container has this right here. Okay? And then this goes up to five. So if we say adding five, it gives us. Much bigger padding to deal with. So like that, something like that, you know, pretty simple. So it's a way for you to space, okay? Now, what happens is, let's say you have padding five like that. But then when you take it to mobile version, ok, you have all these padding here by, let's say you don't want it to have all this kind of padding when it's when it's in mobile. Ok, so what you wanna do is you have heading. So remember Bootstrap is mobile first. So what that means is that the initial code deals with mobile. So this p5 bills with mobile first. Ok. So what you want to tell it Is that okay when you're a mobile, right? I just want you to be P2P, okay? But when you are Desktop, right? I want more padding because there's more space to work with. So we say p MD five, okay? First let's say p adding one here. So you can have something like that. So you see when it's in mobile. In fact, let's do p2 so that we can get to see it a little bit more. See it gives us a little bit more padding. Just a little bit padding, and it takes up the space. For mobile. It utilizes space within mobile. But then when you are, when you have it as a desktop, it's literally you've got five. Okay? So padding five for desktop and tablet, right? And when it's in mobile, it goes down to padding to okay, right. So you can even have it like that. So you see this screen here is because before it was empty, so this will be like a tablet screen. So it was taken that by now we just made it to major desktops. I don't even know if Yes. So my desktop is got bad. But then when his dad when it's mobile, it's it's just a little bit, a little bit of space is like that. Let's refresh that. Like that. So that's how you deal with responsive padding and responsive margins would order pending. So we can say, we can do the same thing for our columns, etc.. So we're going to have something like that. Five. Let's go back to MD. I like to use M B a lot. So we say. Something like that. Okay, so you see we've given our columns bigger padding. And what that does is, of course it's padding within the column itself. And for column itself has a background color. Okay, so the background color fills in, including the padding. Ok, but if we were to do it, not padding, but margin, let's do that. Then. As you can see, margin causes extra kind of problems. But then because it's outside, the background color is not included in that because what it's doing is it's creating space outside of the container, outside of the column, right? It's wrapping space outside it instead of as opposed to inside the column. Ok. So when we have it, Baghdad again, goes back to a situation like you just fix that. Like that. Okay. Which most likely you will be using this kind of thing. That's what you'll be using. So that's how we can give our padding give more space within our obviously depends on what you'll be doing. You'll be using them. Maybe five is a bit too much. You might wanna do three depending on the user case, right? So you've got three like that. And then it's just a little bit. And there we go. That's all you need. And then when it's like that same thing. Right? Okay. So that's how you use that's how you give space within your paddings and your, your, your columns and your elements. And we're gonna even do the same thing here, padding five. And then he just gives that space. So it just depends on what kind of space you are looking for, how you're trying to create your, your UI, right? So here our padding is in the div. You can see padding three RAM and it's important, et cetera, et cetera. Ok, easy peasy. That's how, that's how we create space around this whole, this whole day. Very nice. 6. Let's align columns vertically: Hey everybody. So let's carry on with our bootstrap essential masterclass. So what we did last time was explored the spacing. We want to give our containers and our elements, et cetera, et cetera. It just, you know, you want to give a breathing room and we found out that you can break up the spacing in with different breakpoints. So when it's large or wellness desktop it will have spacing, but when it is an it might not have spacing, you know, if we take that. But that assisted with the spacing that was there. If it's mobile, there's no spacing. But then if it's desktop, you've got spacing and we dealt with the padding and margin. And the difference being that padding is space within the container, the main container, like here, this is our container, right? As you can see, div container fluid right there. And that's got a padding. So the padding is inside as opposed to margin which is outside. Okay? So now what we wanna do is we want to find out how you can position the elements within, for example, within a container, like horizontally and things of that nature. So in order to do that, we're going to go into it with a little bit of CSS, right? So the first thing we wanna do, we want a container that is come down here. We want to create a class, let's say class viewport, height 50. And then we want to give this a height of 50 VH. That means a viewport. So if our viewport, this our viewport here, this is our whole viewport right here. This is the height of a viewport. Now, when we give an element view port 50, we wanted to take up half the space of our viewport, right? That's all want to do. And if we have width, height of 50, we want to give a width. Now, this is not W b, width of 50 W V, which means the width of the viewport, this width here of our view, but we wanted to take half of the width like that. But usually you can do that easily with with with the grid system. But when it comes to hide it, you know, it can be beneficial sometimes to deal with that. So we're gonna go into that, especially for what I want to show you. So we've created this class here, right? And then what we wanna do, save that. Let's go here and let's give our row.s. So one to make our role like that. So as you can see, the role has taken up the height of. And then what we wanna do here, let's say this might, we'll see how this works out. Let's see if we give the container, but it should be the rule, not a container like that. And then let's give the background to be warning. Right? So as we can see, our height is now 50. The height of our container is taken up 50% of the viewport, right? So the question here now is, how can we stack up B's elements inside them? Let's say we want to put benefit one or even all of them to begin with. We want to put them right in the middle of this viewport, right here, like around here, instead of being at the top, like that. Okay, so what you wanna do is you go to bootstrap and you want to look for vertical alignment. So vertical alignment uses flexbox alignment utilities to vertically align columns, right? So we want this one here that puts it right in the middle. So the one you want is this one here. Align items center, right? So will come here. And then in the row itself, we say align items center. Okay? And so if it doesn't work like this, where you wanna do is also make this, and to make this into height 100. And sometimes you have to work at these things. Yeah, so what we've done because before what happens is that before it's like this. Even though the column itself is a container itself is viewport 100. The role itself is still small, right? It's not taken up the full space. So you can't move the elements within the row because the row is not taken up a 100% Of the container. The container is half the size of the screen. What the role is only is not taken up that so you can't move the elements within it, ok? So if you want to be able to vertically align, you have to give the row, you have to make the row take up the whole height of the container. So you give it a 100. So that's H 100, okay? That means it's taken up a 100% of the space in which it exists. In the space is this container fluid which has got a view pot of half the size of the viewport, right? The size of half the size of the viewport. So we give it a 100 and then like that. And then here we go. All of a sudden, our row is right in the middle, okay? But let's say you just want to, you don't want all the whole, the whole thing, all these to take up this space. Maybe you want to, to differentiate them this way. You want it on top, this when you want it in the middle, and then this one you wanted down there. Okay, so what you wanna do here is instead of this right here, a line item Center. Just take, take that and you want to say a line items start. So this one here you say self. Let's do it this way. Align self. Start, right? And in here you want to say a line. Self is a central middle center. And then this one you want to say. And let's try that and see. So as you can see, is taken up this one here. You've aligned it to the start of the, you know, to, to the top. And then this one you've aligned it to the center, and then this one you've aligned it to the bottom. Okay? So that's how you deal with this sort of issue, where you want to position the columns, you know, at different places and different spaces, et cetera, et cetera. It's pretty easy, isn't it? Okay. Very simple. So again, what we have here is depending on what you want, maybe you want the full row. If you wonderful role. And everything in that role to be centered. Or let's say, let's give it an end. You want everything to be right at the end. Let's say it's a photo or something like that. And and if we come here style, let's take that. And let's give that 100100 and m. We take that. And then we give that there. That means it's taken up and it's putting right at the, right at the end. So what you have is your footer section. And it's right at the bottom. And it's taken up the space at the bottom and it doesn't have to be full-time and you can work out the footer other ways, but it just gives you a way to organize your staff in different ways and stuff of that nature. And again, we can even do start. And then it comes to the stat. So align items start. Align items center, align items n. And then that's it. That's how you organize that. Now remember, if you want to go deeper into this and in terms of reactor itself at react, creating websites with gas B, with using React as an engine and just how to style that easily without going through all sorts of issues and whatever, you know, I definitely would recommend you to use Bootstrap because it's very easy to do your UI. And so checkout, just check out the cost that we have. And that will give you that goes more into actually building a landing page that is workable and professional and how to go about all that using Bootstrap, very easy, very quick, but very, very beneficial. And you know, it's a web application. So you'll be creating a web application. And when I say web application, HubSpot, let's just say HubSpot. Hubspot is a web application, okay? So as we can see here, you know, you've got different rows. This is a role. This is a row. Here. You've got a row with two columns. In. This column is probably four. This is a container. This, if they use Bootstrap, which I am not to show if they do. It seems like they maybe, maybe not. Marcia where they use here. But let's see what else. I don't think they using Bootstrap, but it doesn't matter. I'm still the same thing. So if this was bootstrap, this would probably be a container nor a container fluid. And then this will be maybe call a call em D4 and then this will be col md six, and then this will be CoMP 12. This is a role which is called 12. This is another role. And this is, this is probably, this is another row. This again is a container and this is, this will be call ME If we are to do that and we're to do that. So this will be called MDG6 NN. It stacks up when it's mobile. And this is a web application. So you'll be doing, you'll be creating a web application like this, using bootstrap and react. So definitely check that cross out. And you definitely are going to learn a lot. That description a link is, is, is right there in the, in the description. So yeah, there we go. Now I see you in the next one. 7. Let's learn how to align columns horizontally: Hey everybody, welcome back. Alright, so last time we talked about vertical alignment. And what we did is we gave our our container a height of whole viewport, and we use the CSS viewport height in order to make sure that every anytime we have a screen size, it takes the whole screen, full screen size like that. So we just did it like that. So we've got all all that. They're so our container will be a full size right there. And we also did 50 width, not with 5000 viewport height and just messing around without sort of sizing. And just to see how we can align the staff in our role. And what we did is that we made sure that our roll takes the whole height of the viewport, the whole height of the container, which we set our initial size to our initial height two. So for example, here is taken up a 100% of this height right here. We could have easily said 50, that it takes up only 50% of the height and it will work out the same and NSA col md center sent. So what's happening here is that as you can see, the stuff in here is not is not actually middle of the viewport is only middle of the middle of the full view port of the container. But it's middle because the height of the row itself is taken up 50%. So it's 50%, it's in the middle of the, of the role, which is 50% the height of the container, right? So that gives us a lot of flexibility and stuff of that nature. But now we want to go into horizontal alignment. So instead of dealing with height, we want to deal with, with, with that the other way. Okay? So basically the way to do that, and again, always good to check the Bootstrap documentation. You know, everything is right there. So with the Illumina horizontally alignment, as you can see, it's got the justify contents and this and that, and how does that look? So when we are here, let's just say we have col md and we just have two of them right here like that. And let's take that and copy that. And then let's say three. And then let's say to write, what we wanna do here is for this one, let's say Justify. Content start. So as you know, if you do your word and you know, like web documents at whatever, whatever, you know, you know, that justifying texts, you can justify it to the right, you can justify the center, you can justify it to the left. So this kind of symbolize the same thing where you just define the content at the beginning or the center or the, or the other side, right? So do come up like that basically. So we have a situation where we are live bat, See here, rho. Yeah, perfect. Okay. And if we say justify content, not sure if this is middle or center and a strong middle class go back to the documentation center. So if we take justify contents center, what happens is that we justify our content into the center and is like that, as you can see, that centered nicely. And then the next one will be justified content. Justify content. And so this one will be at the end like that. So you have different justifications. And then let's give this a padding. Some other stuff that you might want to do when it comes padding and all we're talking about alignment, but this is relevant here, is that maybe you just want to give a padding, horizontal padding. That means you want to you want to give just the top and the bottom padding, right? What you do is you say PX, PY five, right? And then what happens is that only padding is only given a padding of the top and the bottom. Okay, but not the sides. As you can see, if we come here, this side right here, if you take a look at this n here, there's no padding. As opposed to if we had done something like px five, which is padding at the sides. That means it gives padding only to the sides like that, as you can see now this padding there and then the other side here, there's also padding, right? So and let's say you just want to give padding to the top. And we need to do is PT five, right? And then you've given padding only to the top, like that. On the bottom there is no padding. And then let's say you want to give adding only to the bottom is PB. And there you go if given that only to the bottom. So in our case, let's give it just a padding, the top padding, right? And then this one, let's give that a P, B. Five, So we're given the top on a pairing of five. Okay, as you can see, is doubled. So this one has got a padding of top five RAM and, and this one has got a padding of bottom five RAM. So they double up like that. You know, just to give you some breathing room for example. So here you go. You've horizontally aligned this information and this works well. Different user case scenarios may be I have a background image here, and you simply want to do it that way. Let's see how it works in mobile. So in mobile is obviously not doing that because this is for width. But if you had something like coal three called T2, then we say like that, It gives it this sort of thing right here. Okay. And they go easy-peasy. Okay? So that's how you organize your elements in different ways. And you know, if you want to justify different elements all over the page, obviously there has to be a system around it. You have to do it in a certain way. That makes sense for the user. Most of these you will need to use them really, but you can certainly play around with them. I rarely use stuff like justify content around. Rarely, rarely used this kinds of things. And it just depends on what you're looking for. All right? It just depends how it is that you, you, you, you want to organize your information. So this will come out something like that, right? Is like justify the content around. But it's very rare because it creates weird spacings and stuff like fastened in Doobie. Unless you build in something quite complicated in terms of layout, you only have to really do much of that. Mainly. These ones here will be the ones that you'll be using if at all. You using that again with the justified. So I really used that. I usually use only the align items, especially when you build on websites, but it can be different depending on what kind of web application that you want to build or you build in, et cetera, et cetera, is just flexible. Bootstrap is very flexible as, and as you can see, we really had to go and actually write CSS. So CSS, we literally using the classes that are provided to us by bootstrap. So rapid, rapid prototyping, fast prototyping and just getting in day and doing what you wanna do. And there we have it. So thanks for joining me and I will see you in the next one. 8. Let's dive into Sass theming and maps: Hello everybody, welcome back. Alright, so carrying on with what we were doing in our bootstrap series and the fundamentals we discussed, and we explored how we can align elements within a role. These elements, how we can align them horizontally. So either starts or in the middle or at the very end. So for example, we did something like this and we say it, align center. And we did that. And then we found out that that will align our, our content in the center. So depending on how big that is, it, it comes through, obviously if it's full width and is taken up all the space, then you can't really align it to anyway. However, that was pretty cool because we're building upon the vertical alignment where we were able to align vertically, middle starts, or at the end. So that was critical. Now what we want to talk about this time is we want to go into a little bit of themes, right? It's like, why is it, and how does it come about that we have something like this. Or if we go and we inspect element. And then we'll look at our root. We find that we have these, these colors here. And what happens with these colors? So for example, we have, we have lights or info, right? What this means is that we can say, for example, this, our background, we are using this warning here. And we can verify that. Yes, right here. So we can actually put like a key here called BG, which means background warning. Now we just take that color and then we'll put it because it's already mapped out, right? So how do we have our colors here? How does that work? Okay, that's what we're going to explore. So what we're gonna do right now is to just simple, simple blue color. Say blue color, right? And then we just, let's see what a shade we can get. Say hex. Let's go ahead with til for the purpose of this, right? And N2 explored that. Let's go to palette and never say Palatine right there. And let's put our color in there. Okay, so that's our color. Now we have different ways and different things, different options of how we can have our colors. We can have them adjacent to each other like this so that the color system is like that. We can have them as a triad so that it can, our palette is like this, or we can have it as a TETRAD, which will have our colors like this. So let's go for the Tetris. And what we want to do is we want to export as SAS SPSS. Okay, so let's take all that day. In fact, we don't need them as RGB. Let's just take this right here. And let's go back to our files into CSS, and I will go into color. And as you can see, bootstrap comes already with these ones here. And what we did, what we do is we are adding S right here, as well as adding this right here. Okay? I'm just gonna take that off because we're not using an endless. Put the colors that we downloaded all we, we added as SAS, ok, so once we have that, what we wanna do is we want to put these colors here and we want to make them. Second. Ok, so let's bring back is because they already mapped out. So don't worry about these. Come with the team, but they not necessary for this. So let's put that there. And then let's rebuild that. Okay? So what we want to use this primary color, right? This is our primary kalgugsu one to put that into the spit here. Ok. So in order to do that, take that and unless colo style SCSS, okay. And then you see that in Bootstrap, you have a system where you can map colors as in Tim colors, right? And these mapped colors are the theme colors that come up right here. Okay? They come up as root. So what we want to do is we want to map our newly added colors, which are right here. Want to map the list one or two of them into our map, into our, our route. Okay, so if we come back here and then we'll go to style. And then let's take this and let's just do it that way. I come here to that. And then let's go to secondary. Let's take a secondary color. Let's just choose one by randomness, just this one right here. And for a tertiary color, let's come back and then we just choose our complimentary. Like that has put up. As you can see, these are already mapped out. I mapped these out when I was creating the started him for this project and a course project that we use heavily that comes from this started him. So however you can ignore this. We might explore them a little bit off for now. This is what we have, right? And let's save that. Okay? And then what we wanna do now is we want to explore that. What does that mean? So if we say EG tertiary, and then save that, you'll see that it takes our tertiary color. Okay? And we can also say text, tertiary. And then you see that it takes up our tertiary color. Again. You know, we can also do right here. If we add an elements, let's just go in here. And let's say BG, BG white, which is already mapped out. Okay? And then here let's say, and let's include a ten. I mean, let's say class equals. And then let's say here, try, try now. And in here let say Batson, secondary. Oops. What's going on here, but the wrong, there we go. See it takes on the color of our secondary color, which is this one here. Okay? So you can do, you can do a lot with root colors, whatever you wanna do, you can do, for example, if you come in here and we say. Now, let's see. Now here's something that I can't remember. Whether border Yes, I think you can do but folder. And then you say border primary. Let's see if that works. I cannot remember. Yes, it does work. So as you can see, is taken the primary color and then it's created a border with that. So what we're doing is that you can have text, you can have border, you can have Button and background. And then you can put the color that we want for the root right here, which all these colors are in there. Like that. You're gonna use any of these colors that are in the root. And it just makes it very easy for us to team. You don't want to be going into, into CSS and doing something like this. Maybe you have, this is the long way of doing it. So maybe you, you say, you give this a name, a class, and you say button. Alright? So we add className, but could take that. And then we go in there and then we say that button. And then we say border color, primary Zero, which you can certainly do. But then the problem with this is that you have to, if you want to be consistent, then it becomes a case where each button, you have to give it this element all the time. And it's just an extra step that you're trying to avoid, you don't really wanna do. But again, as you can see, because we're using SCSS, we can use our our variables within the CSS because it's an SESS file. So the fact that we're using SESS just makes everything a little bit easier and easier to work with and stuff of that nature. So to recap, if we want to control certain elements that we want to give them certain colors like our texts and all sorts of stuff like that, then go back ground or border color. Anything that needs a color, right? We can give them. We can use the key word. The key can be BG for background, it can be taxed for text, it can be border for border color, and then stroke. You give it a primary, secondary, tertiary, or any of the colors that are mapped up in this route right here. Okay? And there you have it. That's what you need to do it as the only being that you need to do when you are deciding what to give this and that. So you can literally do 95% of your code, of your CSS styling. And we're not talking about animations and stuff like that, like literally just prototyping. You can do it right here because of SESS. That's how powerful it is and that's how powerful Bootstrap is, right? So I hope that you took something from that and that was helpful or I see you in the next one. 9. Learning to work with the awesome card component: Everybody, welcome back. Alright, so last time we took a look at our ways. We can map out or we can create a, a color map or theme map. And what we discussed was this bit right here, down limit risk, reload. So what we did was we visited a how to create a color theme and how to map that and be able to use them as theme colors. So we have primary danger, you know, secondary, tertiary, et cetera, et cetera. And we went into palette and we imported a Sass file of our palette. And we put that into our colors dot CSS, and we'll put that right there. And then we took the primary color, secondary, primary, secondary and tertiary color from this. And then we mapped those out into our css, style.css like that right there. And we found out that when we do that, we can then open our index. We can then do stuff like text white or border, primary or order, or texts tertiary, do you know or background, tertiary, things of that nature. So we found out that it's easier to do that and it's easier to keep a consistent theme. And you get into rapid prototyping when you do it that way, instead of going into SCSS, instead of creating a class for each element and then go into your CSS or CSS. You create a LacA class and, and you give it dads and all sorts of stuff like that. So what we're doing here is we want to be able to understand Bootstrap, and we also want to be able to understand how to prototype quickly and reduce the amount of time that we're spending on coding. And focus more on putting the designs that we actually want without dealing with a lot of issues and a lot of code and a lot of bloated code, which is what's good with SESS. So this time, I want to go into a component. We're going to explore a little bit of what happens when you, when you take components such as a card and then you can, now, you can do quite a few things with that. So here what we want to do is take take that off. Let's take that off. And let's take so, okay, so now we've got saved that. Perfect. Alright, so the first thing we want to do, and we're just going to put all the things that we learned. We're going to put them, put them together, and then just see how we can build all sorts of stuff with what we have. So here if we just delete all this and all that, and then just leave the paddings and stuff like that. So let's go back to our bootstrap and let's go and find a component to work with. And usually, I'd just like to deal with the cod because of cod has got many other components in it. So this is your basic COD. Alright. If we take this one here and then we bring it into here. So obviously if we look at what it's saying, card is a flexible and extendable, extensible content container. It includes options for head is a wide variety of content. Blah, blah, blah, blah, blah, blah, you know, that sort of thing. So we're going to take that and then we're gonna work with that. So just we want something like this to begin with and then we're gonna mess around with that and see what comes out of that. So in here, we just add that, right? Okay. And we can't use dial like this if we're using React and we don't really need it. Now, if you use a style in here like this, it will bring up an error because this is not, this is, HTML is not, is not react. So what you wanna do is just get rid of that. Okay? And then just do that. And then we've got our card right here. Okay? And then let's take, copy that again. From here to here. Copy, and then paste that in there. Okay? So we have two cards. Right? Now what is going on here? Right? So we've got our row and then we've got our, let's do it this way. Let's just take that is how to use this one because, oh, my LinkedIn is not coming up. So code quality is a bit difficult, but we can work with it. So we've got two cards right here. So what can we do with that? So you have your card title and you have your heart subtitle, and then you have your text, and then you have your card link. Another card link, et cetera. So what we wanna do is explore a few things we can do with this. 10. Let's finish off working with cards: So what we wanna do is explore a few things we can do with this. So for example here, obviously we have our title. We can literally change that into maybe h3 if we wanted to Slack H3. And then it just, you know, you can do it that way. And then here you've got your cards, a subtitle. Now, the cuts subtitle comes with this text muted. Text muted is something. It's a class that makes the texts like this, this kind of color right here. Okay? And you can change that if you want or you can leave it, you know, again, you can use the similar examples that we're using. And then you can say maybe text, text primary. Although I wouldn't recommend that we're not doing UI as, you know. Good luck, good design. I'm just teaching you how to work with the classes. So if you do like text primarily like bad is going to give you your text primary. Ok. And then here. Now the paragraph tag comes with the card. It comes with obviously your class itself for the pod. And when you find out when you see that like a lot of bootstrap websites are similar, is because most of the times that they have the, this is classes that come with it. And designers and developers don't really change that. So you find that there will always be similar and stuff like that so you can change it up. Now bootstrap is very, very, very extendable. If you know how to design, you can literally create our websites and web applications that are completely unique. If you know how to design is not necessarily done. Bootstrap is hard to customize, is very, very flexible. It's just that you yourself need to understand design principles. And which is something we'll go over in the extended Coast Guard, which follows up on, on oldest kind of stuff. So take a look at that. Now here, one of the things that, that paragraph tag has a class called lead, okay, now lead is a class that makes a text look really nice. It makes it look very much, you know, quiet, readable and it just looks aesthetically pleasing. Okay, so what I like to do sometimes is alive to substitute that here and then put that in there and then have this to be lead, right? And then what you wanna do is just make it like a few lines, right? This description here, you just make it into a few lines, maybe two lines, and then you've got something like that. You know, as you lead. And then maybe we can even take off the card subtitle, you know, maybe we don't need that. We just have a like that. Okay? And then here, what you have is, is links here. Alright? Now, obviously the modeling is different on its own. It's specific to the cart, although you can use that wherever you are, but then it's much better to use it within the context of the card, but you can equally use button. Okay? And then you can say button primary. Right? And then you, you have something like that. Okay? And then what you can do is you get even give it some padding or let's say margin margin tree. So that it's got some breathing room like that. But you see now that we have this test margin here, we don't want it, we want it to align like that here. So what you wanna do is say something like MY, Which is the modern margin for, for the top and the bottom, MY three. And you can have M margin, right? Three. And then you can have something like that. And then it gets aligned nicely to this bit here, right? And then four here for this, this is usually this is OK. But then you can also have a different kind of button because there's quite a few buttons that you can work with. So in this one we can have that. But then we can say bottom line. Let's say button, outline, Duck. Let's see what happens there. I can remember if that's an actual Yes. So we have that like that right there. But then we don't need now is we don't need the speed here. So we can have it like that, you know, so that's a different button. So if we go here, if we go to our buttons, you see that you have all sorts of patterns that you can work with. You have the length, which is similar to the one that, you know, the cod linked. You can use all these buttons that you like. And it's not just restricted to that. Obviously we using an outline button, which I do like outline buttons, and they come differently as well. You can have different sizes, small buttons. So you get something like button the button, small sum. And then you can do something like that. Is that right? Let's take a look. Here. Should be OK. Button small. Yes. Yeah. So any air Exactly that. So you see that it went and it became a small button. Obviously you want them to be the same, right? So you've got something like like that. And then what you can do is if you want to make that a little bit more, you can actually go and say lead. And then you can give it a font, weight, bold, right? And then you give it a font-weight bold. And maybe you just want it to be quite subtle. So you give it a text and then it's taxed, muted and then like that. So you see how easy it is to customize something, to customize an element. And another thing you can do with a card is, for example, you can have the card like that, but then you can give it a shadow shadow lodge. And then let's say we don't want this one to have a bada, so we can just give it a bada 0. And then it no longer has a board is 0. So if we come again here and then we take off the cod subtypes. So let's give this an H3. H3. And this one here, let's give it a lead. Font-weight, bold text, secondary. And then we'll see how that looks. And then we just take that off. Will done this. Now we just have its subtle, OK. That's another small cloud that you have. We can even do it this way. We can say cod shadow, and then we can say background. Now not background, BG, tertiary, right? And then here we give this a title, but then we also give it a text white. And obviously we want to give this one and text white as well. Okay? And then this, we want to give this a button. But in light and see how that works. We also have to give it a PY three and an MMR three margin, right? Three. Ram. And my genotype notices PY. So you see because I've made it padding, padded the button inside and they became bigger, does not want to give it a margin. So my tree and MR. Three, okay. And then here we can say button, but an outline light. And there we go. And in here, this is supposed to be text wide, texts secondary, like that. Or we could even say, to give it a little bit of differentiation, we can say text delight. This comes with Bootstrap. So I don't know if we will see that, but it'll be a little bit subtle. Ok? And then, you know, that's how we have different cards and that's how we can style different things using, you know, everything that, well, not everything, but most, mostly as you can see, we didn't actually have to go into SCS, has to really tweak things and do all sorts of stuff. We can literally just come here and do the same thing on our classes because we already have the classes. We just need to know what kind of classes we're looking for. So that's how to do that sort of thing, which took a card and then we just manipulated it. And we, we changed like the texts, colors, the background colors, and we gave it a shadow, you know, and for your shadow, you can have all sorts of shadows, while not all sorts by just a few, you can have shadow. I think it's shadow, small. Just subtle shadow here. You can even see properly barista. And then you can you can just have shadow, which I think is the middle. Yeah. And then you can have shadow lodge. There you go. That's how to deal with that. Thanks for joining me. 11. Let's put it all together - 01 : Everybody, welcome back. Alright, so last time we went through the cod component and we looked at other components that we can include in the code as well as some other text. No class-based styles that we can put and how we can rapidly prototype and quickly come up with something without having to deal with a lot of CSS. I'm just using the basic pluses that we have and manipulating those to get really cool results. So and previous to that or prior to that, we went through everything else dealing with the fundamentals, the grid system, the layout, and everything of that nature. So now what we wanna do is want to put everything together and see how we can come up with a system where we are developing. Maybe like cards that are like benefits for a company. Like maybe three benefits like, you know, if you use the software, It's fast, it's good, it's excellent, et cetera, et cetera. So let's go into that and let's see what we can come up with them. I haven't done this prior, so we just go in and then we'll see how fast we can actually develop something and make it responsive, make it nice, et cetera. So the first thing we're gonna do is let's delete everything in here, right? And the first thing we gotta do, obviously, is to do our class. And the thing about this is that it's much better to use className. Well, you have to use className. Now, this code sandbox, it somehow works with just class by if we're using J, S, x S, React HTML attributes, we have to use class_name. So it might work encode sandbox, but then if you take it and doing it on your own IDE or, or editor, you might find that you will bring up an error. So just get into your mind that instead of using class, use class_name. So we get className echoes container. Right? And then let's close that. If. Alright, so in here, let's put our row and all I'm gonna do here is I'm gonna copy that because I don't want to type all that out. And I'm gonna say roll. So remember with our role, you get a row, you can have 12 columns of one spacing h. Or you can have maybe like two columns of six h, right? Because there's 12 spaces in a row. Okay, so we're going to have row and then within our rows, now within our row, we're going to have a column. Let's copy that again and then paste that in there. We're going to have and what we want to do is we want three cards, okay? So we say col md for take that, take that. Ok. So once we have that, let us put our cards in there. How will cut component? Alright, so we don't want to deal with images. We just won something thats plane like this. And then we put that in there. And I remember you, you can't use Dao like this here. So we take that off and in heavy like that. Okay? And then we're going to do is to take this. And in fact, before we do that, let's start styling MRD. A Tim would react now is in another, in, in, somewhere else. Or let's say a much more. For example, the course that I'm doing, the extended one for this, you will create this as a component and you just have to do it once. You just have to an unused props. And then you use the component that you've done to literally go and place it on the other row and the other row. So you're only dealing with one style or you styling only one component. And then that carries over and all you have to do is make the properties change the, change the text in there and stuff of that nature. So here, let's say, great Shen Si. Plus how you spell efficiency, which I highly doubt. Actually don't know if that's the correct spelling tested out. Okay. That's what we want right there. Some of these words are confusing. Okay? Great efficiency. Okay? We don't really want this subtitle for what we can do. Instead, let's do that and let's put it up here. And then let's make it small. And then let's call it benefits. Benefit. Okay. And then we have something like that. Has perfect. And then here, okay? And then for here, let's make that an H3. Just boosted a little bit. And then what we wanna do here is to make this into lead. And then let's say faster and faster and cleaner workflow. I think there should be a right for for faster and cleaner workflow. Okay, and let's give this a one. I do want to give this a font, weight, bold. And then for this, let's give this our primary color. So text. In fact, let's give that text tertiary. Let's give it our tertiary color. See how that looks. And then in here we just want one link and wonders to be button, button, button, outline, primary, right? That in fact let's say button primary, dark, like that and be here. Let's, let's make this text. So let's see how that works. Okay, and what we wanna do here is we want to get rid of the border for the 0. And we want to give it a shadow. Small, or let's just say shadow cast the middle one. Okay? Right, and let's take a look at that. Let's get rid of that. Get rid of that. Okay, that's perfect. Has perfect, right? So once we've got that, there were going to do is let's center that. So for the body can say text. In fact, what we want to do is make sure that it is cleaner workflow and cleaner workflow. And process has tried that. Spoke a little bit more words in there. 12. Let's put it all together - 02: Cleaner workflow and cleaner workflow and process. Let's try that. A little bit more words in there. Yeah, I think they should do k. And let's make this container LG. Okay, that's perfect. Alright, so and just to mess around with that, let's just go ahead and so we've got that. And we say find out. Find out. Now here you can have another class which allow, which you can go in there and say something like text uppercase. So usually for buttons, it's always good to have them as uppercase, the text as uppercase. So text uppercase. There we go. And then maybe we can even say but block. Let's see how that looks. So you can have it like that. So it's great for UI. But then what it is is that because it's lined up, if it's left aligned, it doesn't look really, it doesn't look that good. So let's just say, let's just leave it as it is like that. And then here we wanna do is, let's give this class that we gave it before, which is the class that we created, which is VH 50. That means we want to make the viewport BY 50 have a u. We want the container to have the size of half, half the viewport. Ok? So if we say that, that's it. So our container is half the size of the viewport. Okay? And then we want this to be the full height of the container. We wanted to be a 100. That okay. And then what we want to do is we want to horizontally align. No, vertically align is in the center. Let's say a line. Items or align the items? Align items. Center has let's try it that I think it is. That work yep. Exactly that. In fact, less, less, less make this a 100 so that we can see properly. So we gave it a full viewport. And then we have this ray in the middle. Okay, that's all benefits. All right, so we've got that. Now. We have these colors right here. And if we go down, we should be able to find them. So these already created, these. We can actually use these as, as BG, BG and whatnot, but then you can use it as this. As you can see, I've made CSS for this, but then you can do the same thing as you can, put them in here. And then just have it mapped out so that we don't use the S, like, like this here. Ok, so if we take this off and remember this comes with the theme itself. And then let's just use this right here. So if we go to colors, we can see that they are already there coming from here, right here, is that the colors that we want? So what I wanna do is change the background color here so that this is more prominent. Okay, so we can try something like background lighter or neutral lighter. So if we take neutral lighter and remember it's right there, it's right here. Neutral lighter. Okay, it's mapped out. We take that and then we come back here and then we say for our container, BG, neutral, lighter, like that. And then we have it this way. But what I wanna do is make this fluid container fluid. Okay, is like that. And then within the container fluid, let's create a container. And let's get rid of that. And then let's give let's close it. We have something like that. Like that. There we go. Okay, so we've got something like that. Now what we wanna do is we want to take this card, right. Copy. And then we want to put that in there. We also want to put that in there like that. And we go number of benefits like that. Okay? And once we have it like that, so you can see that we have a situation where it's kind of like this. So we can actually go in and say, for example, H two, h two. And then we can say something like find out benefits. Benefits for using the software, flow, using the software. Whatever software that we are. This is about an unless give that a class name equals. And then we can say something like that. The text center. So text center is our class to sent out with text and see how that comes out. K. Now, it's way too high because it's outside of the role. So let's, let's see how can we do this? How can we do this? Let's just go in there and then say something like that. And then we can say coal. Coal. Coal, coal, coal, coal 12. So it's still up there. And see how can we work. This work is how can we, what S, Let's see, column D and C. Yeah, that's a problem isn't anything we can do is we can reduce that to 15. And then in here, I can put that there. And then we can give it some padding. P five. And you know, we can do, let's give it a container. Class name equals the div that give it a container. Okay? And in here we can say p. Oops. Let's give that a padding, I mean a P, p class. And let's say lead. Removed that, say lead. And slim that works. Okay. 13. Let's put it all together - 03: And let's say lead, lead slim that works out. In fact, get rid of this because it's messing up with our. So if we just have something like that, okay? And if className H2, go container, we don't need that. If they're running that, Dave, dad, we don't need that anymore. And let's say p and k, something like that. One, right? So we got something like that. And if we have that in there, let's see what it looks like. Wait, quizzes container. It is a n, this container here, that's fine. Let's take that. What happens if we put it in row stays the same as putting vacua? Was that right? So if we say v, VH 100, because what I want to do, that's it exactly that. I wanted this background here like that. So we've got that an n. What we wanna do is let's just give our container PY five. Give it some breathing room like that. And then maybe we want to say PT padding top five. Give that more breathing room. I think that's great. That is great. So we've got something like this. One thing we can do here is container fluid, garbage, and natural ladder. And then let's, let's make sure that one of these is has got a BAG. Give it to the core. So look up background color, BGP to, to, to, to, to, to, to tertiary. And then here, because of this, this whole thing here, we want to give this a bg transparent background, transparent, transparent, transparent. Perfect. And when I do is I want to take the shadow of here and we want to put it on the column so that it doesn't have this weird looking thing right there. Like that. That's perfect. And then we want to, want to do, is we want to give our columns a BAG. Because you can see that. It's in fact, let me take a look at that. Now actually does pass grade because we want to emphasize this. So these are a little bit thinner, but this one is ok. So let us go back to this one and n, let's say text, text, light, text white. And then this one text tonight. When in fact what we can do, yeah, texts light like that. And then for the button, outline light. Okay. Perfect. Alright. And then let's save that. And then there you go. You've got your benefits system. All right, now let's see what happens when we take that and we do that so we can see that we have issues. Okay? So the issues that we are having here for what we should do is we should just take this off here because it's causing too much problems and put it on the card itself. And then let's say, okay, now we have that. Now we need to give these some kind of margin, right? So if we say M margin, giving it a margin of two. Now this might knock off a few things. Let's see how that looks because margins usually cause some problems. I don't know why. So we've got that right. Let's see if it still you see like bad it causes some issues. So what we can do here is we can say margin. Md at the M2, MD 0. So we can prompt the margin to come up only in the mobile. So we can say margin in the mobile. And then when it's not mobile, when it's Desktop, it has no margin. So if we say that, say that, and then we say that. We go like that. That's perfect. So let's put it to and they will go. And then one thing we can do here is that we want to make, when it's in mobile. What we wanna do is we want to make the we want to center everything when just like this, a centered. So we want to center everything here. So how we can do that is we use the same principle. So we say, let's say for the car body, which we'll go through everything in the CAD, everything inside the card body, which is the benefits are greater efficiency and deaths. Or want to do is say text center. Because again, remember Bootstrap is mobile first, so the initial class will be for mobile. And then if you want to manipulate that for desktop, you have to give it another class. So you say Text, and then you say text, MD, left, like that. And we're going to take these copy and we're gonna do the same thing here, like that. And here we're going to do the same thing and save that. Oh, there we go. And then when we don't have that is still left aligned, c like that. Okay? And there it is. We've created our cards, and in fact, let's take off this font-weight bold. Let's see how that looks. Font-weight Bold. Just have it a little bit differentiated, that's perfect. And there you are. You've created your cards for the benefit system. And you know, we have this as our main, main one. And then this one and this one are kinda like the other options or whatever this could work for. If you make an Price, price plans or things of that nature, the unknown, then all we have to do is do the grid system and just do something simple, fast, rapid prototyping and you're done obviously you, you can go into it and then just that literally doing it a little bit more with the styles and all sorts of stuff like that. But for now, this is exactly what we need and it's completely responsive. When we overlapped, that is responsive. And it, it responds differently in mobile as it does. And then, and then there you have it. You know, that's how we build that. That's how we can rapidly prototype with Bootstrap and react. It's really not that difficult. And it's quite fun. And you know, the more you go in there and find out the classes for all the classes that you need. And you know them like these classes right here that come with Bootstrap, the more fun that you will have. So, you know, just go in there and do that. And if you want to know more, if you want to take this knowledge and n, one to find out how you can build something that's functional. Like lack of proper landing page that's well-designed, that goes into typography, goes into imagery, image optimization, that goes into your continuous integration using good, using modern tools just like we're using here then. And as well as going into components that we need as a components. Because right now here as you can see, we had to like put all these classes in the individual card itself, you know, but then in the cost that I did, which you can find in the description we have put this. You will see that you only have to do once. And then you can create a component, a reusable component, and then you can just do that, which just makes even your prototyping even more efficient, faster and you can work at lightning speed. And on top of that, we using tools, modern tools too, literally have your website or web application, whatever you're building is lightning fast. And it's got great modern design, great UX checkout, our cause. And yeah, I hope you found this useful and just carry on coding, carry on designing, and see you in the next time.