Next JS React Bootstrap || Tutorial || Design mobile ready responsive apps

Aug 15, 2023

Next JS React Bootstrap || Tutorial || Design mobile ready responsive apps

The ultimate bootstrap 5.2 tutorial. You start as a beginner and come out as an expert with live project and one page tutorial.

Hi Logical People, this is an exhaustive tutorial to make you an expert in designing 100% mobile ready responsive apps.
We start our journey by understanding the fundamentals and then we start using it as a standalone project and subsequently build a live project from scratch.

Learn:
✔️ How to Get started ?
✔️ How to use (install) bootstrap as standalone project and with NEXT JS / React
✔️ How to setup VS Code for NEXTJS with typescript
✔️ How to create a responsive Navbar with hamburger icon
✔️ How to correctly import bootstrap in NEXTJS / React
✔️ Grid and NavBar in bootstrap with example

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Hello Logical People
⌨️ (0:00:22) Why Bootstrap
⌨️ (0:03:25) How to Get started
⌨️ (0:04:51) Bootstrap on a standalone project
⌨️ (0:10:33) Understanding YoutTube, LinkedIn, and AirBnb
⌨️ (0:16:07) VS Code IDE setup for NEXT JS and Bootstrap
⌨️ (0:21:03) Understanding the wireframe/Layout using MSPaint
⌨️ (0:24:27) Containers class
⌨️ (0:26:37) Live Project
⌨️ (0:28:36) Navbar
⌨️ (0:38:18) How to use icons (Bonus)
⌨️ (0:40:27) Main Banner- with spacing, margin and padding.
⌨️ (0:45:56) File Upload banner. How to create rows, cols, grids, and form controls.
⌨️ (1:00:14) How to center align a div (d-flex justify-content-center)
⌨️ (1:08:59) Cards with advance JSX syntax and map function on list
⌨️ (1:19:44) Designing a responsive footer
⌨️ (1:29:15) Closing

Bootstrap 5: https://getbootstrap.com/
NEXTJS: https://nextjs.org/docs/getting-started
NODE JS: https://nodejs.org/en/
VS CODE: https://code.visualstudio.com/

Next JS / React Fundamental series: • Next JS Tutorial || The ultimate gui…

#bootstrap #nextjs #reactbootstrap

Content

0.199 -> Hey Logical People, GKV here.

4.519 -> in this tutorial we will learn everything that you need to know

8.359 -> to to start building awesome looking websites with the help of latest Bootstrap.

15.319 -> But I think the first question, the obvious question that comes to mind is this.

19.719 -> Why on this green Beautiful!! earth should you care for Bootstrap? And I think it's a

25.479 -> fair question and it's important to answer this question before starting with this tutorial.

30.919 -> Number one: because everyone else is using it. I know for a fact that LinkedIn, Twitter, Spotify,

36.919 -> AirBnb everybody is using Bootstrap.

40.279 -> Second reason is that it's 100 free. So you don't have to pay any royalty to anyone.

46.119 -> And the third reason is that the front-end developers are paid really well. I believe

50.519 -> that if you want to learn a front-end development framework, Bootstrap is the one to go for and if

57.879 -> that is not enough motivation for you why don't you come with me and I want to show you something.

63.159 -> I have arranged two websites for you. The first one is called the 'biguglywebsite.com'.

68.599 -> Imagine that you Google something and you land up to a website that looks something like this

72.919 -> or remotely like this. Something like this. Would you ever, like literally ever go and

79.079 -> do any kind of business with this website and I think the answer is obviously no. And now look

85.399 -> at this website 'speechai.com'. When you look at this this app, this looks far more cleaner,

92.919 -> super minimalistic, and it looks bit more engaging. You can actually see different contents

98.759 -> and separators sections and you know color contrast and things like that. So let's get

106.039 -> started. So before we get started, I want you to remember how you learned to ride a

112.439 -> bike. Like literally close your eyes and think about the first time that you were able to rode

117.559 -> a bike. Did someone, you know maybe your mom or your dad just asked you to hop on and try it?

123.319 -> Or you did or you did something radical? And when I say radical I'm looking at this. Not that dude.

130.759 -> So before riding a bicycle did you actually go about and learn about pedals?

136.439 -> chains? cranks? Did you learn about maintaining balance for forward motion?

141.639 -> Or did you went ahead and got an advanced degree in circular motion? or got a phd in physics?

147.079 -> And if answer to all those questions is NO, then you are on a right tutorial because we

152.759 -> will not learn Bootstrap the way you see on the screen right now.

156.279 -> But we will learn Bootstrap this way, which means that we're gonna do things and I am we're

162.279 -> gonna we're gonna approach a problem and we're gonna learn the tools along the way as and when

166.759 -> required. And I would I would argue that not for just this tutorial but anything that you want to

172.279 -> learn in life, you should follow this approach. Because this gives you a holistic picture and

177.479 -> it gives, it it helps you understand the 'WHY' purpose of doing something, rather than just

182.519 -> mugging up the concepts and then not able to use that or apply that in real projects. Beautiful!!

189.479 -> I think with that the first question that comes to mind is how do I get started? And as and as

194.759 -> always we're gonna go to Google and look for how how the hell do we get started with Bootstrap?

203.079 -> So I'm going to go to Google and I'll search for Bootstrap 5. Because 5 is the latest version of

208.119 -> Bootstrap. If you click on this, the first link that appears it will take you to basically get

213.479 -> started page and there's let me zoom in a little bit so there's a lot there's a lot of information

219.159 -> um for getting started with Bootstrap. It's the world's most popular framework for

223.479 -> building a responsive mobile first website blah blah blah, but the quickest way to get started

229.799 -> is what they are emphasizing here. So the Bootstrap offers two things. Number one is css

236.759 -> which basically gives the styling to any page so the way you see the button

241.879 -> you know the colors the padding the spacing when you click on it the way it moves the mouse over

249.239 -> effects everything comes from the css. And Bootstrap also comes with a bundle of Javascript.

256.199 -> Now this Javascript helps us a lot of things that are related to programming.

259.399 -> For example, when you click on a button this dialog box opens up, when you click on this button

265.239 -> something opens up on the screen as an overlay so these effects come via Javascript. So when you

270.439 -> click on this button this overlay goes back so all these effects needs to be handled by Javascript.

277.559 -> Again just for a quick quick pointer css is for styling

282.359 -> and Javascript for you know functionality that needs some sort of programming.

291.079 -> So the first thing that I really want to talk about is, how to use a Bootstrap on a

294.679 -> standalone project? Just to give you like 100% concrete understanding of how Bootstrap works?

302.199 -> It's important to understand how Bootstrap can be installed on a standalone project?

307.639 -> What I have done, I've arranged a test project for you and as you can see on this test project we

314.679 -> have nothing much going on. The couple of things that we have is this meta tag which is important

320.439 -> because with this meta tag Bootstrap understands that okay everything needs to be device

327.639 -> dependent. Then I've given it a some give it some title so this is just plain 'test.html' page.

336.359 -> And what I will do, I'm gonna go and delete this

340.199 -> I'm gonna delete this as well. I'm gonna save it and what we will do we will go and

349.479 -> open this code in a browser. Just to see how this looks? So here you go, this is my 'test.html'

356.839 -> and you can see that we have hello world. So I'm gonna go back to Bootstrap.com and I'm

362.839 -> gonna copy the css from this. Like that. I'm gonna paste it in the head section like this.

370.919 -> Now I want to style this head in a way that it should look a little bit better.

375.879 -> Um maybe some padding, maybe some styling and to do that

379.799 -> I'm gonna I'm gonna look for the documentation that we have received from Bootstrap.

388.039 -> So if I go here and I say look at layout I've got something called containers and okay.

398.919 -> It says, our default container class is responsive fixed with container something

403.559 -> like that. So I'm just going to copy this and we'll see if this class works for us.

409.959 -> I'm going to cut the hello world here I'm going to paste here.

414.439 -> Save it and if we go back to our test.html and refresh the page now you see that it got some

423.639 -> sort of styling. It it moved to the top which is good and now let's see what else can we do.

433.239 -> Um I know for the fact that in the helpers we have got colors and in utility we have got backgrounds

439.559 -> and borders. So I just want to play around with this for a while. So I want I want to

443.239 -> see if I can give some background to this div and in the documentation they are saying that

448.999 -> this is how you can apply, this is how you can apply background. Okay. So I'm gonna go

455.799 -> back to background color I'm gonna copy um maybe this one bg-light so I'm gonna go and copy this

466.359 -> come back here and I'm gonna paste it and I'm gonna copy this as well I'm gonna

473.639 -> say hello world here. Now if I go back to my test.html and refresh. Now you see that

480.279 -> we have got a div which I've got a light background and this looks pretty nice.

487.799 -> I can go here and I can also say, for example, dark save. Come back and refresh. Now this

494.679 -> the div becomes dark and I can have a text as light. Refresh. So this is how you can do styling.

503.799 -> There's much more that we can that we're gonna learn about Bootstrap but this is the starting

509.239 -> point that I wanted to show you. There's one more thing that I want to highlight. Is if I

514.119 -> click on this device toolbar you see that how nicely everything wraps up on a smaller device

522.999 -> so you see that the way the moment I start scrolling through the

528.119 -> through the window size the text size and the dimension and the floating and every styling

533.639 -> adjust itself accordingly. Kinda nice Right? Now, let's look at one of the components that I

541.479 -> wanted to emphasize and that would be if I go to components here and maybe I will go for a card.

551.559 -> This card looks good, so I'm gonna copy everything.

554.999 -> I'm gonna put it in the container so that it's also responsive.

561.639 -> Save it, refresh. now you see that we have a card

566.039 -> inside a container and just to distinguish I'm gonna say bg

572.759 -> maybe light. So that we have a background for this container. Here you go. I hope you're able to see

580.119 -> some difference. Now if I go here and I start changing the screen size you should notice

586.759 -> how card is able to readjust its height width and that's the beauty of using Bootstrap. Beautiful!!

595.639 -> I like it. And from here we're gonna stop using Bootstrap as a standalone and next we're gonna

602.199 -> talk about how to use Bootstrap on a Next JS or a react project. So I'm gonna see you there.

611.879 -> All right moving on to the next chapter and where we will learn how to use Bootstrap

616.999 -> with next chairs or react framework or you can extend this to any framework you like before

624.679 -> that I just want to give you a quick reminder this is the methodology we're gonna follow

634.679 -> So now, before jumping into the coding and understanding how Bootstrap is designed, let's

640.439 -> go and look at a couple of websites that you know uses Bootstrap and try and understand their layout

646.519 -> and how things are how they design their app right? So I have opened youtube in incognito mode

653.479 -> and I'm surprised to see what people are watching in Canada anyway. So if you look at youtube,

660.519 -> it has a header section on top and then there is sub header where you can do filtering

667.319 -> and then on the left side we have a menu bar a vertical menu and

674.359 -> on in in the mid section we have all the content that youtube want us to

678.039 -> see okay? I've also opened linkedin and if you go to linkedin you would notice that linkedin also

685.639 -> has a header or a menu bar however the difference between youtube's menu and linkedin's menu is that

691.959 -> youtube menu is static so if you scroll down the page the menu or the layout does not change

696.999 -> it stays where it is however on linkedin the menu goes scroll with the scroller.

704.519 -> Linkedin is designed little bit differently compared to youtube of course so you see that

708.279 -> we have a header and then we have a section where you can technically log in and then we have our

713.479 -> image which kind of depicts what linkedin is then we have another section then we have next section

720.279 -> another section so they have designed they have they have divided their website into different

724.439 -> sections which is okay and then at the end we have a footer. I've also opened airbnb and you should

731.319 -> notice that airbnb also has a header then they have sub filters if you scroll down you will see

737.719 -> that the header stays or it becomes static on the top and then the content starts scrolling we also

744.439 -> have a small menu bar which opens something like this and we've got couple of filters. Beautiful!!

751.399 -> So here are the topics that I noted from youtube: it has a header which is static,

755.959 -> they have a left menu, they have a top right sign in button and content in between.

761.959 -> Airbnb is almost like youtube: they've got a header, they have a search bar, they've got a menu

768.119 -> and they have main content and I've also marked down that their content looks like they have this

775.559 -> hair, they have this cards available different cards right that we just saw a moment ago.

784.359 -> Excuse me, then. We've got LinkedIn and LinkedIn got header which is not static something different

789.959 -> and then they've got few banners and pages and then they have footer

794.039 -> with that understanding I would like to go back to Bootstrap and can we use Bootstrap to do all

801.879 -> this? So I'm at the Bootstrap homepage. I'm gonna go to components and if I open my notepad again.

810.919 -> the one thing that is common for everything that they have a header.

815.959 -> sometimes static sometimes not and the header is also called a navigation bar

824.039 -> or or as they call it navbar

830.279 -> If I go back to Bootstrap and we look for components that are provided by Bootstrap to us,

836.199 -> I see there's something called navs and tabs. So this provides us kind of navigation styling, okay?

846.599 -> which is good they've got different tabs

852.199 -> this is not where something which we are not interested in let's look at nav bar

859.079 -> Now, this is something that I might be interested in. It looks quite reasonable and quite relatable

865.959 -> to what we have, for example, here. Right, we have a navbar. We have options, YouTube sign in,

872.919 -> and things like that. Okay, so we can provide that because we can customize this navbar basically

879.719 -> okay there there are a few other styles I can put image with tag with text

887.079 -> So you can scroll through the pages. I've done this before, so I'm going to go back to responsive

890.919 -> behavior and I'm interested in this kind of nav. But what this does is, so if I press ctrl+shift+I

899.399 -> and if I go to responsive behavior and I start

903.319 -> scrolling the window, you see that this navbar collapses into a nice looking um button.

910.999 -> And if you remember that's what YouTube is also doing. So this is something which we would like

915.079 -> to have. So that's one component that I think would be useful for us. Beautiful!!

925.479 -> The other things all these websites have is a left menu, sign in button, and then they have content.

932.359 -> So let's see what else we have here. We also have buttons, so I think we can use buttons to create

938.999 -> sign in and login buttons, which is good. We have looked through the cards, so I think we can

945.879 -> use cards to display different things. They also have carousels, which basically works something

953.239 -> like this: So if you have moving content and you would like it to slide through, that is

957.639 -> something which we can use. And there are a bunch of other things that we're gonna have a look at

967.799 -> And now let's set up our project. So I've created a folder and inside I've opened that folder.

976.519 -> What I would like to do is I would like to click on this address bar and type cmd

980.519 -> and press enter. This should open a command window for me.

985.319 -> And I'm going to go to Google and I'm going to say "Next JS installation with typescript."

994.519 -> And I'm going to copy this command. If you're not sure what this command is,

997.559 -> I have created another video which you should watch.

1000.759 -> I recommend that because that will give you an understanding of what this code and project setup

1005.639 -> is doing. So press enter and now it's going to ask me about a couple of details. I'm going to

1011.319 -> quickly give that and I'm going to come back once everything is updated. Lovely! So everything has

1017.879 -> been downloaded. I'm gonna close this window and I'm gonna open my project in visual studio code

1023.879 -> again. If you if you're not sure how to do this, please go and watch the video that we created in

1029.239 -> this playlist. So here is my visual studio code. I'm going to click on file, click on open folder.

1037.239 -> Here's the folder where I created the next project. Make sure you select this folder.

1041.639 -> You don't have to go inside this folder. You just select this folder and click on select

1045.559 -> folder. Wow! That's a lot of select folder in one statement! Beautiful!! So your visual

1051.959 -> studio should look something like this. Click on terminal, click on new terminal,

1056.919 -> and here we're gonna write a command to starter to spin up a server. So I'm gonna say npm run dev.

1066.279 -> Back. I'm going to go to my browser. I'm going to open a new tab and I'm going to say

1070.679 -> localhost:3000. Press enter and if you did everything correctly you should see a page

1076.919 -> which looks something like this. If you see this you have done everything the way it should be

1082.199 -> so a pat on the back. And from here we're going to start our Bootstrap journey with nextgears.

1088.199 -> First thing that I normally like to do is I go to pages. I select this index and I delete this. And

1094.439 -> you can clear the content manually which is fine but I just like to delete it myself.

1102.279 -> And now I'm going to go to pages. I'm going to create this file again, index.tsx.

1106.919 -> And I'll say const next page equals to

1112.839 -> return what do I want to return I want to say in h1 I want to say hello world

1124.199 -> Now, as always, we always export this component

1128.119 -> so that next is able to find this component and render it for us. Beautiful!! You might

1134.439 -> have noticed that when I click on control s so when I saved this file my code got

1140.439 -> restructured it become much more pretty and that's because I'm using an extension called prettier

1146.359 -> and if you don't have it you need to click on this extensions search for prettier P R E T T I E R and

1156.679 -> The extension should look something like this. Again, we have created a video for that

1161.719 -> in the basics playlist. If I would recommend that you go and check that out. Beautiful!! So,

1167.639 -> with that going back to my index page, I'm gonna refresh the page and we got the hello

1172.599 -> world lovely. And from here from here we would really like to you know and go and create our own

1178.599 -> website our own responsive apps using Bootstrap and for that I have identified a really nice

1186.679 -> app that I use. It's called speech with ai. It's using Bootstrap because I created this

1191.879 -> and then you can see we have clear segmentation in terms of um banners images sections

1199.719 -> and you know all these fancy stuff that should be there. If I press ctrl shift I and open my

1206.679 -> console and I start changing the width you see that how the content aligns itself into

1212.839 -> into much more readable format. Beautiful!! And I think to learn Bootstrap I'm gonna replicate this

1219.799 -> website in front of you and you're gonna you're gonna love it you're gonna love the journey.

1225.879 -> Perfect. And now moving forward and trying to replicate this website there's one thing that

1230.519 -> I would like to do is open my favorite tool of all time and that would be wait for the drum roll

1242.839 -> that's ms paint I know I know and some people don't like it but I kind of love it

1248.199 -> love it because it's a really good scratch bag to you know conceptualize

1253.239 -> conceptualize different topics into really meaningful and you know understandable chunks.

1262.999 -> so if you go back to YouTube you'll see that this is what we were looking at this is what we

1266.839 -> referenced a moment ago and what I want you to pay attention to is the way the website is structured

1274.199 -> and I'm going to draw a parallel of YouTube in my ms pane so.

1281.879 -> this is YouTube right on top we have got something like this and inside we have got YouTube

1293.719 -> and we have got a search bar and we have got a button

1300.919 -> and we have got a mic then we have got sign in right and then

1308.279 -> here we have another box for all the menu items here we have got another

1315.319 -> section where we have all these filters then we have this big section inside that big section

1323.959 -> we have a lot of smaller sections like that

1330.199 -> it's not like 100 accurate representation but you get the gist

1336.759 -> now with this if you compare YouTube with this or for example if you go to LinkedIn if you try and

1343.159 -> compare this with LinkedIn it's pretty much the same here is the LinkedIn and we've got the header

1353.719 -> and we've got a section and in that section

1357.239 -> we have got the login section and then we have got an image

1361.959 -> then we have got another section which says explore then we got

1365.239 -> another sanction to find the right job and so on

1370.759 -> the reason I'm doing this video is to give you an understanding that

1374.199 -> this is a very simple geometry so if you look at this this outer section is a box

1381.479 -> and I am gonna fill this box with a color let's say light blue

1387.319 -> Okay, then we've got another box which is this. Then we got another box which is this.

1394.039 -> Then we've got another box which is this. Then we got another box which is this. And then we've got

1399.799 -> many other boxes which look like this. And with this, we should understand that the

1405.879 -> core concept of using Bootstrap is to design everything into different grids into different

1411.159 -> rows and into different columns. For example, what I want to emphasize is if you look at.

1420.039 -> If you look at this, I'm going to take another color. This is a is one row and inside that row

1427.639 -> we have one column. This is one row and this whole thing is also certainly I'm pretty sure

1436.519 -> is also another row. So we got a big row inside that we have got a smaller row and

1440.839 -> in that row we got three columns. Then we have a new row and in that row we have three columns

1447.479 -> and so on and that's all it is. It's rows and columns.

1450.759 -> That's all it is and with that understanding with that super fundamental understanding,

1456.679 -> let's go and look at the Bootstrap that if Bootstrap can help us with rows and columns

1466.759 -> Fortunately, Bootstrap does provide us with containers. If you read through,

1473.479 -> I highly recommend that you go and read through it if you have time.

1477.159 -> However, in this tutorial, I'm going to give you all the understanding that you need to have

1481.239 -> in order to you know build any responsive app that you like. So Bootstrap technically comes

1487.559 -> with technically comes with a lot of classes. The one class that you see here is container. What

1493.079 -> this means is we're going to we're going to see this in super practical. We're going to copy this.

1497.959 -> I come to my index page. I'm going to say ##here and just so you know that

1505.239 -> is the keyword in Javascript. Therefore we say class name. And here I'm going to say

1510.919 -> hello world. And just to distinguish this from other elements, I'm going to say bg.

1519.079 -> Warning. I'm going to come to this class in a while, but just understand that this class gives

1524.679 -> a background of warning color to this div. Okay, if you come back here, if I refresh the page,

1534.039 -> this does not work because of course we did not include Bootstrap into our into our project

1540.919 -> and we started using Bootstrap. So let's do that first. All right, so let's fix the blunder we made

1547.479 -> that I made in the last video. So I'm going to go back to Bootstrap and click on get started

1555.159 -> and go to download. And here we have different ways of using Bootstrap in a project. We have seen

1562.999 -> this version, the standalone version. Now we're going to look at the npm version.

1567.639 -> So, in order to install Bootstrap in our project all we need to do is we have to run this command

1573.399 -> in our project. So I'm going to copy that, come back to visual studio, stop the running server,

1578.999 -> paste it, and I'm going to say --save so that this dependency is saved in my package.json.

1585.399 -> Beautiful!! So that is done and dusted. So now let's see how we can include Bootstrap

1591.559 -> in our project. There are multiple ways of including Bootstrap in our project, but

1597.559 -> the right way of doing it is including the css styling in the app component. So import

1606.439 -> Bootstrap/distribution/css/Bootstrap.css like that. Save it. If you're not sure

1618.359 -> why we are importing Bootstrap in the app component, and in a nutshell that's because

1624.199 -> my app is the root app that gets initialized or gets mounted on the web app when next year's

1633.319 -> project is started again. If you're not if you want to go into the details check the

1638.679 -> video that we created in the basics playlist and we want to move on with this this import.

1645.719 -> So, since we have imported Bootstrap here, I'm going to run my server

1650.679 -> and there you go got hello world in a container and that container is yellow in color.

1658.119 -> Beautiful!! So now go back to Bootstrap and we were in layout and container.

1667.079 -> Another class which is quite useful in my experience is

1675.319 -> container of course but container fluid and here I'm gonna say success

1684.519 -> Now you see the difference. Now, if you go back and try and draw in parallel what LinkedIn has

1689.399 -> done, if you see here the LinkedIn's menu starts from a point and ends at a point,

1694.919 -> seems like they are using container and YouTube seems like they're using container fluid

1701.399 -> so something to keep in mind anyway. I'm going to close this because we're going to focus on speech

1707.559 -> aI and we're going to try and replicate speech aI and hopefully we're going to pick a lot of things

1713.879 -> about Bootstrap. I'm gonna learn a lot of things about Bootstrap

1718.439 -> lovely. Before that, I just want to give you a quick reminder this is the methodology we're

1723.719 -> gonna follow. So, with that and let me close this with that, we're gonna step into our very first

1732.599 -> header. So, if you look at the header that our spgI has,

1737.079 -> so let's see if we can find that in Bootstrap somewhere. So we know in components we can go

1743.639 -> to nav bars and we want the responsive behavior of course and we want this one

1753.079 -> so let's just

1756.759 -> no we want this one with the brand name shown to the left and toggler on the right

1760.919 -> so let's copy this

1764.439 -> we're gonna create a new folder called components

1770.439 -> and inside this I'm going to call it navbar.tstsx

1775.399 -> like that and here we'll create a component

1783.119 -> navbar

1784.119 -> we're gonna return

1788.519 -> and we always export it's export default

1794.199 -> Navbar like that now? React is complaining that they don't know what class is, so we'll say class

1800.999 -> equals to last name. Place everything for input, it's saying that it has no corresponding closing

1809.719 -> tags, so let's give it a closing tag. For tab index we need to put it this way like that and

1819.719 -> that's it. Now if I save everything should get pretty thanks to our prettier extension

1828.759 -> Now, what we need to do is go to the index page. I'm going to remove all of this and I'm going to

1834.679 -> just include the nav bar component in my index page. And that needs to be imported like this.

1841.479 -> In general, visual studio will do it automatically for you, but if it does not do it, either you have

1847.079 -> not exported your component like this, or, um, you just need to do it manually. It's not able to find

1854.679 -> it. Nevertheless, now if I go back and I refresh, you might see that the page looks little bit

1863.719 -> over fetched. That's because I have zoomed in so that you can have a better view, but that's how it

1869.719 -> is, right? So 150. Now we want to customize this nav bar, so how do we do that? We go to nav bar

1878.839 -> And we're going to start looking into the I'm gonna remove these tags so that

1883.239 -> we have more space. So I'm gonna look into a couple of classes that are being used here.

1890.039 -> It's saying navbar and it's saying navbar expand lg. Fine, it says snap bar light and

1895.799 -> background as light. These guys are using a different color. I think I'm not gonna go

1900.199 -> into the color combination. So I'm gonna just keep it keep it dark or light. So I'm gonna say

1906.279 -> my dab my nav bar should be of dark color and background should also be dark. If I save it

1914.439 -> I've got a dark background nice. If I press ctrl shift I and if I go to mobile mode

1922.039 -> you will see that everything everything works perfectly. There's one thing that you might have

1928.759 -> noticed that when I click on this button the menu bar doesn't appear and that is because we

1935.559 -> have missed one thing. So if you go back to get started and go to download and if you remember,

1942.279 -> Bootstrap provides us two things one is css for styling which we have got so everything is styled.

1950.439 -> Bootstrap also provides um a Javascript file for all these you know functionalities of clicking a

1956.919 -> button and how do we enable that well we need to include that just like we included our css.

1964.039 -> And the correct way and the right way of importing Bootstrap Javascript is not like this.

1971.159 -> The reason uh you're not supposed to import Bootstrap like this I mean it

1975.719 -> wanna it's gonna work so if I go back and click here now it's working. However

1982.039 -> few of the components in the in Bootstrap needs or requires a window object that is provided by the

1989.319 -> browser we therefore we need to wait until this component is mounted and has been initialized

1997.239 -> 100 percent and to wait until then we use the hook called use effect

2002.519 -> and this use effect hook needs to be imported from react like this.

2007.159 -> And again if you're not familiar with use effect I would recommend that you go back to the basics

2014.359 -> playlist and have a go on how use effect works. With that in place I'm going to close this and

2021.479 -> this should work the way it was. Beautiful!! now let's go and customize couple of things here

2028.519 -> and for our purpose we don't need a search bar for sure so coming back here I'm gonna

2034.679 -> go and look for the search bar which is this one so I don't need that I'm gonna remove that

2042.599 -> nice we also need home link and disabled so let's remove that as well

2049.239 -> we don't need disabled

2052.599 -> we don't need home

2056.519 -> and you know what we're gonna keep the home I'm gonna remove everything else

2061.239 -> like that and for navbar home we can use

2067.159 -> a branding so let's say

2070.919 -> let's say we say speech ai

2074.359 -> like that and I'm just gonna remove this as well because we don't need it that we've got speech aI

2080.919 -> and at the moment this is a reference however um I know this is a Bootstrap class therefore

2087.239 -> I'm not going to change this but what we should be doing we should be doing something like this

2096.039 -> this is the best practice of

2101.479 -> this is the best practice of using next

2114.279 -> What we have done is we have wrapped we have created a button which, with the text of speech

2118.679 -> aI and we have wrapped that with a link component provided by next needs to be imported like this

2125.799 -> and of course we need to give it a class so let's do that we will say

2133.079 -> "now it's a button and if you click on it it should take you to the home page

2138.359 -> okay perfect um if you go back again to the speech aI so they've got branding and then they've got

2146.599 -> get started button so let's try and put that

2151.479 -> technically we don't need this button because this is the button that gets enabled you know

2156.919 -> when you see this toggler so we're going to remove this as well because we don't need it

2162.199 -> and here we're gonna create another button type will be us button and we will say login

2175.239 -> and this should have a class name of button and button doc

2183.399 -> like that and there couple of things that are missing right now and let's have a look

2188.279 -> so this button is okay but I just can't see it I can't distinguish this as a button whereas these

2195.799 -> guys can because obviously they have a different background but for me it's not being so awesome so

2201.159 -> let's go to Bootstrap and see what can we do with buttons so going to components going to buttons

2209.239 -> we've got different types of colors right now we are using the dark button but apparently we

2214.039 -> can use primary secondary and so many how about I try a light one designing designing an app is also

2227.159 -> a lot of testing so I think this looks good and don't worry if this looks a

2230.679 -> little bigger because I'm zoomed in so if you reset this should go back to the normal

2236.359 -> and what else can we do with button let's have a look

2240.039 -> I can have also a button which looks something like this this also looks quite interesting

2244.919 -> maybe instead of light button I can use maybe I can use this one

2252.119 -> save

2254.679 -> now this doesn't work here because of the background this is okay

2260.199 -> we got size we got large button so if you add a class

2263.959 -> something like this a button will become bigger

2268.879 -> you see however what I am interested in I'm interested in a small button

2275.399 -> I'm going to use something like this

2279.479 -> nice again if I reset everything this should become a smaller button and this looks good with

2286.359 -> that I'm happy but as always I tend to give lot of bonus during my tutorials so let's go for a bonus

2299.399 -> if you scroll up for the Bootstrap you will find icons if you click on icons

2304.679 -> there's a there's a lot of icons that you can use in Bootstrap

2308.599 -> now how do we use it super simple copy this go back to terminal I'm gonna start a new terminal

2318.759 -> paste it and I'll say save reason I opened a new terminal is because I did not want to

2325.319 -> kill my server

2330.199 -> so I'm going to wait for it

2333.799 -> once everything is downloaded and installed I'm going to close this

2338.759 -> And the way we include Bootstrap CSS, we also need to include Bootstrap icons like this. Save it.

2349.319 -> Process. Now we've got a lot of options. So, for example, if I look for login,

2354.999 -> but this box arrow in right, click on this and on the right you can actually copy everything that

2360.599 -> you have here. And they have given some examples. For example, you can use these icons in a heading,

2366.199 -> inside a button without button without text, in an input group and things like that.

2372.679 -> Okay, I'm going to go back inside the login button. I'm going to copy paste this.

2377.319 -> Cut everything. Paste it here. And as you know

2381.639 -> it should be class name, so I'm going to replace it. Save it. Now going back to our app

2388.599 -> nice I've got really nice looking button with icons Beautiful!! I think with that our

2395.959 -> our nav bar is ready and I kind of like it

2401.319 -> now look back to his pcI and what they have done next they've got a banner section this

2406.599 -> you know sections like this normally are called banners and what I can see is they

2412.519 -> have two things on the left they have some text and on the right they've got this image

2418.999 -> let's see if we can find something like that on Bootstrap

2422.199 -> so if we go here and we start scrolling through the components provided by Bootstrap

2433.239 -> Let's have a look. If you go for collapse and that's not the one I know, I have seen this

2439.479 -> somewhere. I think if we go to example and if I go to maybe in carousel there, it is there you

2449.319 -> go. So, in order to use this, we probably need to build this ourselves and I'm gonna

2456.279 -> do what most of the artists do when I steal it. So right click and go to view page source.

2463.159 -> I'm gonna find this where this section is

2467.399 -> and there it is. What I'm going to do, I'm going to copy everything

2475.079 -> I just want to read through it so

2480.279 -> let's copy this two of these

2484.919 -> come back and create a new component and we're gonna call it main banner.tsx first in banner

2501.639 -> paste everything will always say export default

2508.279 -> main banner now let's do a couple of cleaning class should be class name good

2518.039 -> and this needs to have an ending that also needs to have an ending

2527.399 -> Then we save it and then everything should align the way it should. Beautiful!! Now let's go to

2534.679 -> index and we're gonna call this component so I'm gonna say main panel like that and it should be

2541.799 -> imported like this. If it's not automatically imported, you need to import it like this.

2547.879 -> Going back to our page, okay this looks good but there are few things that we need to tweak.

2554.599 -> I mean overall we got pretty good pretty good deal right? Copying from there,

2559.799 -> so let's see what we can do in order to fix this.

2563.639 -> Now, honestly speaking, to fix this we need couple of things. We we can see that this is way too on

2569.719 -> the left and way too much on the right and same goes for this section. And to to learn that,

2576.439 -> let's go and see what Bootstrap has to offer in terms of margins and paddings and you know in

2582.519 -> general cleaning things to do that I'm going to go to Google. I'm going to say Bootstrap

2588.519 -> margin like that. I'm going to open this and yeah take me to the latest version. So it seems like

2598.279 -> spacing is designed inside the utilities so I'm going to close this. I'm going to go back to

2605.479 -> latest Bootstrap. I'm going to go to utilities and we're going to go to spacing and it says margin

2611.879 -> and padding. So what they're saying is we can set margin to any class or any row or any column

2620.199 -> by saying by using the class m and then if we want to select a sides like

2626.839 -> if we want to have a margin from top or padding from top we have to say t

2632.039 -> this is from bottom this is from start this is from end and this for the horizontal one and

2637.079 -> this is for the or the vertical ones and this is how we decide how much margin do we want

2644.279 -> so with one two three and four. So for example you can technically go and say p2 which means

2652.839 -> for this div I want a padding of two. So let's see if that works for us. I'm going to copy that

2660.999 -> um

2664.839 -> one more thing before we jump into that as you can see this is one thing is actually a row and

2675.239 -> for this row we want that everything that's inside this row should have some sort of padding

2682.599 -> all right so let's go and do that we're going to say

2685.879 -> padding of 2 and save it now it looks a little bit better so now it's not going all the way

2691.799 -> to the end it's not sticking to the top and it's also better from the right side

2698.359 -> maybe if I increase this go to five I like it better when I have a padding of five

2706.279 -> and maybe we can do the same for this one so I'm gonna copy this

2711.639 -> and I'm gonna say

2715.239 -> for this row I want a padding of five there you go now this looks much nicer and as you

2721.639 -> know that you can put your details here and if you go back to speech aI

2727.159 -> these guys are using using a text and an image so we can do the same we can go to

2732.199 -> our code and this is the row that we don't want I'm going to delete this save it oops I'm sorry

2742.999 -> this is the row that we don't want and there you go

2749.799 -> Beautiful!!

2752.359 -> moving on to the next section of speech aI we have already implemented this banner section

2759.319 -> now let's see how we can build another banner that looks like this

2764.839 -> there are a couple of things that I think we should look for so when I look at this section I

2771.239 -> see that they have got they've got a file button to choose a file there seems like an icon here

2778.999 -> and same goes for this one right and then we have a button

2786.039 -> this seems like we have a section which looks like a div but it also has some

2791.239 -> sort of shadow at the end and seems like it also has a border all right um let's see if

2797.639 -> we can find these things on our on Bootstrap and how we can create this using Bootstrap

2805.719 -> So, there are multiple ways to basically look for these things. For example, you can

2811.799 -> use the search button here. I find it useful sometimes, but not as useful as it should be.

2817.799 -> So, let's see and figure out if we can find something like shadow. There it is. Okay,

2824.359 -> so here's the div that has no shadow. This has a small shadow, regular one, and a large one.

2831.959 -> And here are the code to basically create shadows. So, if you look, it's a simple div

2837.959 -> and it's the class is shadow lg.

2841.639 -> Um, that's it. Okay, that sounds comforting. Let's move to our vs code and create a component.

2848.759 -> We'll call it load file dot tsx. And as always, you're gonna create a component

2862.839 -> I am from upload file what do we do we always export

2868.919 -> it Beautiful!! in the index page we would like to import this so let's import upload file

2883.079 -> Should be uploaded like this. Lovely! Going back to our app at localhost, we see that we have got

2892.279 -> this. So let's create let's create a div that will look something like this. It has a heading.

2900.039 -> It also has it also have another heading. So let's try and create those. So if you remember

2906.679 -> from our Beautiful!! image everything that you see on the screen is either a row and a column

2912.759 -> within it or some some combination of that. So this is what we will try to create here when we

2919.479 -> want to replicate this section. So I I'm gonna say this whole thing the white background is a row and

2925.079 -> this and the background here should be a column because we only have one row and one column.

2930.679 -> So let's try and do that. So we'll say div row and then we're gonna say div

2936.439 -> last name as column I'll say I am from column

2944.519 -> Okay, nothing has changed because visually it does not change much. And now I would like to

2950.759 -> go and take a deeper dive in how rows and columns are designed in Bootstraps. I'll

2955.879 -> go to layout. I'll go to grades and this is how it works in a in a row in a column way.

2963.239 -> So you create a div with row and within the row you can create multiple columns. Let me try that

2971.799 -> copy this

2974.999 -> and I know this for a fact I'm going to write it here

2981.159 -> all with

2983.639 -> equal

2994.039 -> The way it works in Bootstrap is, in a given row,

2997.639 -> let's do one more thing so that it's much more visible. We're gonna give a background of,

3002.039 -> let's say, red to this row so that we know, okay, we have one row and within that row we

3007.879 -> have three different columns and all of them all of them should be of same width because that's

3013.079 -> how Bootstrap divides the available area between different columns. Okay, I'm gonna do couple of

3021.159 -> things just for the aesthetics point of view so that it's easier for you to see on the screen.

3031.319 -> So that's how Bootstrap divides different column and how do we know that these columns

3034.999 -> are of same width and that should be simple. Let's give a background to each div we're gonna say

3041.239 -> ring so it should be yellow.

3048.599 -> Primary this should be blue and info this should be it should be of teal color. We see that we have

3056.919 -> different columns with diff equal widths. If you're not sure right now that how this color

3062.199 -> how did I go for these colors um you can find these in utilities and in backgrounds and they

3069.079 -> have this they have told which class represents which color. Okay coming back to layout and grades

3075.639 -> so that's how columns look but there's one thing that is missing here that we have no idea how

3081.159 -> how big the row is and that is because the column is basically overlapping the row.

3088.359 -> So what we can do one more thing that we learned we can apply a padding and we want padding from

3095.079 -> the top maybe three with what this will do this will make sure that all the columns start after

3104.839 -> a padding of three in the row. Similarly you can say padding from bottom and let's say that is one

3113.319 -> so you'll see that we got some padding from the bottom and that padding is actually equals to

3117.879 -> like one and from top is three again you guessed it padding from start I could I could say two and

3127.799 -> I could say padding from end I could say 5 like that um need to check why we don't have a padding

3135.639 -> from the starting so going back to Bootstrap and this should be in utilities and spacing

3145.399 -> Padding from the start that is padding from the left,

3149.559 -> and we could use one, two, three, one, two, three.

3153.799 -> Going to say, "Padding from the top is three, which you can see here. Padding from the bottom

3158.999 -> is one. Padding from the starting is three, and from the ending we can have, I don't know,

3163.799 -> maybe five." Now you see that we got padding from all the sides of different amount.

3171.319 -> If you want, you can combine padding in the y direction. We're saying padding in y, and that

3176.679 -> should be 5. Now we've got five padding from top and bottom. Similarly, you can say padding

3183.479 -> in the x direction should be, I don't know, four. Then you've got four padding from left and from

3189.959 -> the right. Okay, so that's the first thing to understand. The second thing that I would like to

3196.999 -> emphasize is that Bootstrap provides 12 columns in one row. What that means is, conceptually,

3204.599 -> this column (I could say take a width of one), and I could say take a width of three,

3210.839 -> then take a width of eight. Eight plus three is eleven plus one is twelve. If I save it

3217.879 -> now, you will see that the columns have changed their width. So the first column

3222.039 -> is of width 1, the second column is of width 3, and the last one is of width 8, which also

3228.759 -> means that if you don't define a width here, the remaining width will be provided to this column.

3234.999 -> Okay, beautiful! With this, you should now be able to understand that you should be able to create

3241.879 -> any geometry you like. So I can say the class name another row inside this, and I can say div

3248.119 -> class name column. Let's say column width is 6. I am column 1, and I can copy this.

3255.719 -> I can paste it again, and I can say I'm column two. Now, um, let's give it a let's give it some.

3264.439 -> For this column, I'm gonna say margin. I'm gonna say margin from

3267.639 -> x to, and this one again margin from x should be two.

3275.959 -> And I'm going to reduce the size of the column so that it's able to adjust itself in one row.

3281.319 -> Last but not least, I also want to give some border.

3284.679 -> These classes can be easily found on the Bootstrap website. Give it another color, so we'll say bg

3291.399 -> secondary. So now you see we have one row which is of red color. Then we have three columns:

3297.639 -> yellow, blue, and teal. And inside the third, inside the third column, we have another row

3304.039 -> which has two columns. And obviously, you can expand this to any level that you like

3311.799 -> and have multiple columns within this

3316.279 -> because we have misspelled this class, therefore we were not seeing any border. But here you go.

3321.719 -> And now, if going back to our awesome example from ms paint, now you should be able to draw a

3327.559 -> parallel with rows and columns. So, for example, on the YouTube website, the left section was a

3332.599 -> row, and this row was a big one. And then we have another row here in the middle. We have one row,

3339.559 -> and within that row we have multiple rows. And within each row, we have different columns. So as

3344.679 -> long as you understand this concept, you should be able to design any website that you like.

3350.519 -> Beautiful! Okay, moving on. Of speech aI, and then we see that okay you've got one row with no

3356.999 -> background, so background is white. And within that one row, we have one column, and in that

3362.839 -> column we have couple of items. If you're not sure what this is, you can press ctrl+shift+I,

3367.399 -> click on this element icon, and then you click on any item that you like, and this will show you the

3376.199 -> this will show you the html code of that section. So you see that this is a row,

3379.799 -> and within that row we have a column, and inside a column we have

3383.879 -> an h5 tag, a p tag, and another div. And that div has couple of items inside that

3392.039 -> that's another way of you know understanding things stealing things copying things

3398.039 -> all right so let's do that for our our project as well so what I want is

3406.999 -> I want

3410.359 -> want one row I don't want it to be danger in color I want padding from all the side

3415.959 -> and I want padding to be five and I want another divs I want to call it as a column inside

3428.439 -> now going back to Bootstrap I also want some components so for example these guys are having um

3435.239 -> a select button a file choose button and those are the things we can find under form

3439.879 -> or you can also go and search here for example

3445.159 -> and select and that will take you basically here and now Bootstrap gives up gives us a couple of

3452.999 -> options to you know design our our elements you can have different sizes different types

3462.279 -> This is what they're using, but we're not interested in this one because that's not

3465.639 -> how speech AI looks. Speech AI seems to have an icon, and then they have a then they have a

3471.479 -> HTML bar control, so let's have a look how we can find that. Got radios and checks,

3479.319 -> okay fair enough, and I like this one so if you want to use this sometime you can go for it.

3487.719 -> Input groups, that's it. This is what we need, basically, right? This is what

3492.679 -> it looks like. These guys are using, so let's try and use that. So I'm going to copy this

3500.839 -> and I'll just paste it here just so just so I

3503.879 -> can see how this looks and full h plus should be equal to last name

3513.479 -> and input text should have an ending

3518.519 -> going back to our localhost this looks this looks good first thing that we need is we need a select

3524.599 -> button so let's copy that I'm going to paste it here and just want to verify the class name

3532.759 -> so this should be form control

3537.719 -> and this should be okay let's have a look

3544.599 -> okay yeah that's what we need now instead of this icon

3548.999 -> we want to have a different icon and we already know how to do that so we will go to

3555.479 -> Bootstrap we'll open icons and within the icons we're gonna look for share

3564.679 -> I like share fill copy that

3569.639 -> and paste it

3573.319 -> there you go Beautiful!!

3577.959 -> Perfect. With that, we are able to get a nice looking dropbox. Um, in our case,

3585.319 -> so if you look here, this one is a bit more centered and smaller compared to what we have.

3591.319 -> And we can also achieve that by saying I want this column width to be equals to 7 for example.

3597.559 -> I don't want it to be super big. So now you see that this column let's give it a background

3605.079 -> this column is only seven with wider it's not going all the way until here

3611.239 -> and there's one more thing missing which is this is not center aligned no problem

3618.599 -> step 5

3622.759 -> center division and

3628.039 -> They've given some examples of how to manipulate the directions, and we are

3633.559 -> not interested in these. They were interested in this third one, so I'm going to copy this class

3642.599 -> and I'm going to paste it in the row section. So understand what this is saying:

3647.079 -> this is saying that within this row, center everything. So this becomes a child,

3654.359 -> this column becomes a child for this row, and then this child will be center aligned. So let's have

3659.559 -> a look. Beautiful!! I like it. Um, I also like to give some padding within this, within this column,

3668.759 -> so that we have some space. This is looking nice now. Let's go back to Bootstrap.

3673.799 -> Let's look for border, and border is just a simple class saying border, so we can copy that

3685.639 -> and we should be able to paste it in the column.

3689.239 -> And we also learned that you can give it a shadow like this.

3697.639 -> Lovely. Let's remove the danger, so now we've got the shadow, we've got a nice looking div.

3705.799 -> Beautiful!! Let's have a look what else these guys are doing. So they have some text here.

3711.399 -> We can also put some text, so how do we do that within this div? I want to say h5,

3718.999 -> and I'm gonna copy everything right here.

3724.839 -> Nice. And so theirs looks better than ours, and that's because

3731.879 -> they're on a normal zoom level than we are on 200%. Good. Um,

3739.319 -> we would like this to be centered as well, and we can again go to Bootstrap and search for font.

3750.439 -> Excel, press 5 here, font center, open this.

3757.559 -> Now they have given couple of classes that we can work around, and these classes could be found

3761.319 -> under utilities and text, and they are saying if you use this class, your text will be centered.

3769.479 -> And how do we want that? We could give it to h5,

3776.439 -> and then everything becomes centered, but I wanted to give this to

3781.399 -> a column itself because we're going to put more text within the columns

3785.479 -> like this and this, and I want everything to be centered. Okay, nice. Ours

3792.439 -> looks little bit bold. I don't want it to be bold because these guys don't have it

3796.999 -> as bold. Again going back to Bootstrap, within the text, I think we should be able to find it,

3802.759 -> so I'm just going to scroll a little bit. They have a lot of a lot of classes here: font size,

3808.999 -> font weight, and italic. There you go. And I want font to be normal. I don't want it to be bold

3817.559 -> so I'll just say

3820.679 -> maybe

3822.999 -> maybe I'll give it a class here I want and I want font wait to be normal

3833.399 -> good this is good next thing I see that they have got some sort of yellow thing so let's copy this

3842.279 -> and we're gonna create a paragraph I'm gonna paste this save it

3848.759 -> at this and it's not yellow as of now let's see

3853.239 -> if Bootstrap has something for us or we can do a custom color

3858.999 -> um okay if I remember from when we were inspecting this element

3865.399 -> I did find a class so let's try and do that again

3870.679 -> there it is they are using mark so I think we can also do that

3875.879 -> we can wrap everything the mark this should give us nice yellow looking feel there you go

3887.079 -> what else are they doing they have another text and they're saying upload now and listen to a

3892.919 -> book so let's create another heading I'm going to say h3 I'm going to give it a class name of

3900.279 -> font weight normal paste it we know that this is an icon so let's find an icon for ourself

3912.039 -> coming back to I can and we need sound on wave that's what we need copy

3923.079 -> and paste it here

3929.639 -> bit of a space so that all distinguishable okay looking good and we can give it a color

3936.439 -> how do we get give color to anything well we know in Bootstrap that we have classes for colors so

3942.519 -> if I go to utility go to bear sorry background I know that these are the colors but these are

3949.639 -> the colors for the background and I'm pretty sure there should be colors for text as well

3957.639 -> if not here we can Google it but I know that so I can just

3960.679 -> type it here and you can trust me that this is how it works so you can say text yes

3968.599 -> this will make sure that everything becomes as a success color class

3972.999 -> lovely um I think there's one more thing left so if we go here and see they've got this um

3983.239 -> they've got this another html element which is

3988.999 -> which is basically input type and type is file we're gonna copy this paste it and now we need

4020.439 -> okay there you go

4024.679 -> so if I reset the zoom

4028.359 -> this is how it looks and I kinda like it click on it select a file if you want last thing we need

4034.999 -> uh we need a button here and we are a master of that we already know how to do that let's do that

4041.879 -> within the column so we'll say button type of course is button and we'll say listen now

4054.759 -> and it should have some classes so it should be a button class of course and we need a button to be

4059.559 -> dark save it and there you go and of course we need an icon so I'm gonna copy this

4066.199 -> is this the icon now this where's the icon there it is you copy this and paste it in the button cut

4076.039 -> it here save it lovely and that's how it is and they're using a different icon but it's okay you

4083.959 -> can use the same icon and that's how you design your upload section Beautiful!! all right guys

4095.079 -> we have implemented the upload feature now let's go and look for the next

4101.399 -> section that speech aI has and that seems to be check out

4106.039 -> the reasons I think I'm not going to implement this because if you go up you see that

4114.439 -> the checkout section is actually almost equal into the

4118.999 -> to the banner section it's just that you need to switch the image and text to the left and right

4124.919 -> depending upon the row count so I'm pretty sure you should you will be able to do it yourself

4131.559 -> and now I want to jump on check out what they are saying to the testimonial section

4136.999 -> and this seems interesting because this have a couple of things that we would

4141.399 -> like to use and again this definitely is one row so if you go back to our awesome image

4149.799 -> this is one row and within one row we have three different cards and now if we go to Bootstrap

4160.759 -> search for cards we have seen this before so therefore I'm just looking for the cards directly

4167.319 -> most certainly we have used the same thing so I think I'm just gonna use this and

4173.399 -> but before using that which we should also notice that they have three different cards

4178.279 -> and if I remember correctly there's something called

4183.639 -> card groups what card group does is it groups certain number of cards in one

4189.799 -> column and depending upon depending depending upon the screen size they they rearrange themselves

4198.679 -> like this and I think this is the one I would like to use so I'm going to copy this go back to

4206.679 -> vs code go to components create new file we'll call it testimonials dot tsx fonts testimonials

4220.279 -> return

4225.559 -> the thing and then what do we do religiously we always export default b component like that

4234.919 -> now let's change let's replace the class with

4242.279 -> last name of course

4246.119 -> image should have an ending tag so let's do that

4258.679 -> lovely last but not least go to index page and we're gonna import this component

4268.039 -> like this you need to import it like this and I'm gonna put couple of you know break statements

4275.079 -> so that we have a better view

4279.239 -> nice going back to testimonials couple of things that you might notice that this section

4286.519 -> is equivalent to this section so we have different columns and all of them are technically identical

4300.119 -> so what we can do is we can say const

4305.479 -> and say const

4308.999 -> testimonials and that will be a list in this list we will have a dictionary

4314.279 -> the first thing we will have will be card title

4318.839 -> we'll call it title one second thing we need is card description we'll say card description

4331.879 -> and of course we need an image

4335.159 -> so we will say card image as img1 we have not imported this yet we're gonna do that in a moment

4346.199 -> what I have done also is I've created a folder called images and inside that there's a

4350.839 -> folder called testimonial and within that folder we got four different images

4355.159 -> so what I would do I would import all of those so I'll say import imv1

4364.359 -> from one folder up inside images testimonials one dot jpg

4374.679 -> like that I'm gonna duplicate that two three four

4380.839 -> two three four fine I'm gonna copy this

4390.199 -> and I'm gonna duplicate this four times now reason I'm doing this that this is a hard-coded

4395.799 -> list agreed however in the real life you might fetch this from a database so it won't be as

4404.279 -> as big a list as you see here this might be few lines of code Beautiful!! we got a

4409.239 -> row and within that row um we got couple of columns so let's try and do this dynamically

4417.559 -> and we will say we will write a jsx and we will say testimonials dot map

4428.679 -> okay so what we have done we are saying hey I have a list why don't you map

4435.079 -> this function on each of that item in the list okay this is an anonymous function

4440.119 -> if you're not sure how this works check out our basic playlist

4443.399 -> which you will get all the details the map function will get one item at a time

4448.759 -> so we'll say testimonial and it will also get an index of that item and here we want to say return

4458.439 -> what do we want to return we want to return a column so copy this paste it here

4465.239 -> probably we don't need this because they're only returning one item

4471.159 -> lovely and now what we can do we can go here and we can delete

4478.999 -> can delete all the columns like that what do we have right now we have a

4483.719 -> row and then we are dynamically creating columns within that row okay Beautiful!!

4490.759 -> now we have an image and we need to change the source and we can say for this object

4499.639 -> it should be an image to card image and we created just just a moment ago like this

4508.119 -> and within that card image there should be a source like this

4516.599 -> good for a given testimonial

4522.599 -> there should be a title and for a given testimonial

4529.159 -> it should be a description like that

4533.639 -> again a quick recap we created a list and each in the list we have a dictionary

4541.079 -> each dictionary have identical items title description and image

4545.959 -> and in general this will be this you will receive via some database okay

4553.239 -> save it go back to your localhost and you should you should see something like this

4560.039 -> title 1 title 2 title 3 and title 4. I like it and if I change the width

4568.119 -> this should become responsive okay lovely I would like to do some padding from the right

4575.159 -> on the top and maybe reduce the size so let's see how we can do that

4581.319 -> here I could say padding all around should be five now we got some padding nice

4587.799 -> now as you can see these guys have three cards in a row and let's see if we can also do the

4594.999 -> same so I'm going to go to Bootstrap and if you scroll down you'll figure out that

4600.439 -> if we change this class we should have fourth which would have fourth card wrapped up in the row

4607.799 -> so what we can do is I can I can copy this go back here and I could say something like this

4618.919 -> what we are saying is in general we only want one column however when whenever we are on a bigger

4624.359 -> screen screen bigger than medium size we would like to have three items in a row so let's see

4629.879 -> if that works nice and this this works pretty nice for a for us what we can do is we can go

4636.599 -> here and we can remove the fourth one so that it matches with what we have on the speech aI

4644.039 -> now they have a different background color and to differentiate that we can also give it a

4647.959 -> color we can say bg and secondary for example and we got a nice looking background here

4657.319 -> nice um I think I'm gonna do alternate so if this is white this should be

4662.759 -> gray and this should be white so let's follow that I'm gonna cut this save it

4667.959 -> back to upload and I will give this row a background of gray like this

4677.479 -> you see that some of the features are not looking so good now so maybe we can go here

4684.359 -> and just remove the remove the success okay there's one more thing on Bootstrap that we can do

4691.559 -> is we can set some transparency so if we go down look for utilities go for background

4705.399 -> it looks like we are on an older version of Bootstrap

4708.999 -> I'm gonna go to 5.2 and in the 5.2 in the background

4716.039 -> there's a class called opacity so I could copy this

4723.719 -> and paste it here now the background should have the opacity of 10 I think now it looks

4728.919 -> better compared to what we had before and that's how you can play around with it okay

4734.839 -> lovely now let's see what do what do they have as a second section

4740.439 -> they've got reading superpowers again this is nothing different than what you have

4745.399 -> already seen here or maybe in this section so all you need to do you need to run a loop

4752.039 -> and create one row with two columns left right another row right left another row left right

4762.679 -> and similarly I would I would argue that the pricing section is looks the

4767.399 -> same and what I would like to do is I would like to create a footer now

4772.999 -> so that you know we can close this tutorial on on a high note

4776.839 -> and with a happy feeling so let's try and do this

4784.559 -> um I'm gonna go to components probably I'll close all of this

4788.759 -> I'll go back to component I'll create a new component called footer dot tsx I'll say cons

4797.559 -> host footer requester

4805.879 -> now we are a pro of it so we'll say div last name of course has to be low we need

4810.599 -> some padding from all around for time being we'll give it bg secondary oh you know what

4821.159 -> like this save it and never ever forget to export for default

4831.799 -> save it index page after testimonial we're gonna say footer and that's how you import it

4840.119 -> like this going back to our app we should have a nice looking footer I like it

4848.039 -> now we can remove these break points because we don't need it anymore and that's how our that's

4853.879 -> how our footer looks lovely so inside the footer it seems like they have a

4859.719 -> row which has a border then they I'm pretty sure these are three columns and this is another row so

4868.679 -> even if you are not sure I'm 100 sure that you can do this on your own so let's try

4873.319 -> and do this we want to have one column we'll say dave last name column give it a border like this

4885.079 -> we got a column which is obviously of zero height but we have got a column here and

4890.359 -> again going back to our awesome image you should now understand that we have we can have one row

4896.359 -> within that row we can have one column and within that column we can have another row that's what

4901.319 -> we're gonna do here we're gonna say div class name as a row and we'll say div class name is column

4912.759 -> I'm going to copy this and here we're going to say e

4918.999 -> dress

4921.399 -> addresses toronto and we will say everything inside this should have a text

4928.999 -> that should be of light color like this copy paste and paste

4939.879 -> phone should be plus 1 647 832

4946.039 -> of course I'm not giving my real phone number best iterate gmail.com maybe or whatever

4956.119 -> save it

4958.919 -> and come back

4963.159 -> lovely we've got this

4966.439 -> what we could also do we could say I want padding from y directions

4970.679 -> to be full so we have some space in this in this row

4976.759 -> nice so let's copy this and paste it again now we only need one column and we're gonna say

4991.639 -> like that and there you go

4995.719 -> and this is how you basically create a responsive Beautiful!! websites using Bootstrap

5005.879 -> and you can add as many sections as you like I'm gonna reset the zoom so that we can see how

5010.679 -> it looks on a 100 zoom right of course these guys have used the icons so and you already know how to

5019.159 -> do that you can just go to Bootstrap go for icons and look for different icons for example location

5026.119 -> view alt fill simply copy this come back here and you can say I don't know

5039.879 -> like that so you can do that you can customize it as much as you like I can switch to mobile

5046.039 -> mode and you would see that everything becomes super responsive this section does not look

5051.559 -> good and let's see how we can fix that cars are looking nice footer is looking really good and

5057.079 -> this section is also not looking good because the phone number and email is getting congested

5062.279 -> first fix the footer and once we fix the footer you would also understand how to fix this section

5070.839 -> so what's happening is on a smaller screen this is still taking a column width of 4

5076.759 -> because we have 3 columns and 12 divided by 3 is 4. however what we would like to do is

5082.919 -> whenever we are we are on a smaller screen we would like this to take

5087.319 -> the whole column and once we are on a large screen this should shrink back to you know smaller

5093.799 -> columns and let's see how we can do that so going back to Bootstrap maybe Google how to switch

5103.719 -> to 100 percent column width

5111.399 -> w id gh on mobile using Bootstrap

5120.599 -> we go to grid section read systems

5125.319 -> so it tells us that let's see there it is

5131.399 -> so it tells us that whenever we put column minus something

5137.799 -> at that point the container will change it change its class interesting

5145.319 -> okay so let's see how we can do that

5151.559 -> there you go so you're saying that using a single set of column sm class you can create

5156.199 -> a basic grid system that stacks out stacked and become horizontal on a small breakpoint so if I

5162.839 -> if I go here before that I just want to give you a quick reminder this is the methodology

5169.319 -> we're going to follow and try and change the width you see that the column becomes stacked

5177.319 -> like this and that's it that's technically what that's technically what we also want

5183.079 -> so let's copy this

5186.999 -> go back here we're gonna say okay this is a column which is good but this should be a

5192.039 -> column of width 4 when we are on medium size whenever we are on size which is less than

5199.639 -> medium let's make it a let's make it a whole column going back now you see that the screen

5207.319 -> size is smaller than medium and everything comes in a new line or a new column so okay

5213.559 -> when we change the size things become in different columns and when we have more space this becomes

5220.839 -> column width of four and with that understanding I think you should be able to fix this issue

5226.679 -> that this is coming super super squeezed in and if you pay attention that's happening because

5232.519 -> of the padding that we have applied from the left and right so let's see how we can fix that

5238.679 -> with this kind of understanding we need to go to upload files we are saying padding of five

5247.079 -> let's remove this first and then let's see how it looks

5251.719 -> okay little bit better but not 100 awesome

5258.839 -> okay and that's also because of the reason that we are using column seven so if I go here and I

5264.199 -> remove this I make it a full full column now this looks much better again going back to the footer

5270.759 -> and trying to use this knowledge what we want to say is we want to say hey make it a column

5276.199 -> of width 7 only when we are on a screen greater than of medium size otherwise keep it as it is

5284.359 -> so now if I scroll here we the moment we go to medium size screen

5290.279 -> this section becomes a column of width seven so that's first thing first

5294.839 -> now we lost the padding let's fix that as well so we want to say in general we would like to have a

5301.879 -> padding of one however whenever we are on a bigger screen I would like to have a padding of five

5312.519 -> like this

5317.559 -> so in general padding of 1 otherwise I want padding of 5

5322.439 -> nice and I think we can copy this and put the same thing within the column

5329.239 -> now everything becomes super nice so we have a padding of 5 from the row and fretting of 5

5334.519 -> here from the column now if we switch back to smaller screen it becomes padding of only one

5340.999 -> which is still not too awesome so I would say

5345.079 -> it's just a matter of playing around and seeing what what makes more sense for your app

5351.879 -> but so far I think this looks good and with this I hope that you learned a lot

5356.919 -> and I hope that you were able to actually conceptualize everything that is there

5361.719 -> to get started with Bootstrap and I think I hope you are excited because I am super excited because

5366.999 -> when I first learned Bootstrap it blew my mind I was like wow this is so amazing I mean

5371.399 -> now I can create awesome looking apps um you know without even spending so much time if you learn

5377.719 -> something today then please go ahead and like the video and of course please subscribe the channel

5385.239 -> if possible share it with someone who you think might benefit from this video

5390.119 -> and as always in case you face any issue do let me know in the comment section

5394.439 -> and I will try to help you and now it's officially done

Source: https://www.youtube.com/watch?v=Uobih7_2E7s