Responsive Image Gallery with Bootstrap From Scratch

1. Introduction: Hi, guys. In this class, I will teach you how you can create your own responsive image. Reality using bootstrap. Absolutely. From scratch. This will be if I lot put. You can see a girl. They will be responsive on all the devices. Make sure you have some basic knowledge of bootstrap. If you don't have, you can simply fall along because getting intimate gallery is a very easy seeing the glass . Have a nice trip. 2. Downloading Bootstrap Package: Hi, guys. Credible on how you can create your own responsive image gallery. Using bootstrap, he's able to step up side to get started. First Folio to download the package that simply click on this button and your download will start. After that, you have to go toe decree website and you download this package. I have already done so. And after extracting the goose step package, you will get this folder, this folder and this folder and make sure the degraded file should be in this for love. Okay, When you are done with this, you can simply put them in a boat. Steph. Older like this. You got all your content in one folder? No. It is a basic template to the head. The website off the good step where you can find the basic template. And this is the camp. It was simply to copy this and based it on these of lemon text. You can see you already got a reference for the bootstrap files. But since they are in the would step fold up, which is this one, you have to make little tea in his hail. Make it bootstrap. Just copy this to see what I am, Bester. Kill and kids are degrading. We need the final aim. But in this case, is this one. Just simply copy the file him and replace this here. Make it DRDs and copy the part, which is bootstrap. This one and baster tail. Make it J. Grady. So we're done with it. Just save this file and we won't ask this on a local host. Refresh it. And this is your so we're gonna be the download installation process off our boots. Step in the next video. We'll start with the recording process seven X radio. How will I straight? 3. Adding Images: Hi, guys. Whose time to wear the images? You know, really good. Couple of images in this folder. They're around eight images. Just remove this one because we don't need this No character development here. You take last name or container? No, we need a true here. So cater development. Here. You take a last name off through for it's time to Kuwait, heading to our mid guilty career development class will be call held it. Well, as you know, more Starbucks with the group system. And in a great system, Each row contains 12 columns on one last device, so the heading will occupy the entire coral columns. Next, Media's off at three. Hiding Hill and make it responsive Image gallery to save this. Got about, uh, but a fresh it. And this is the output. Just closed these types. It's time to wear the images. Good development Tail. I want 40 minutes. Peru. When the last device. So I'll make it called algae three amid sorts will be images, one dart gpd. Just save this good Rosa profession. It and this is David. That's the danger element here so that we never use every click on this image he can see the actual size off the image because we're going to reduce the size and we're going to make it look like a thumbnail. It will be images. One dark deputy, you take last name off. Tom. Neal, just save this photo browser. Refresh it. And this is the outward. Just copy this Mr To. Here. Here, here. We need almost eight images, so it should be at least eight times. No. Make it do here. Also. It will be three people before five. Six. So when on here it will be eight. Just save this. Go to Gaza. Refresh it. And these are your images. Whenever you click on this image, it rejected you to the image like this. Their stride with this one. This one. And this one starts working absolutely fine. The next would you? Well, right. We're heading to these images. See, in the next video, how will I stay 4. Giving Names to Images: hi guys. So far, we're done with adding the images and justify a lot. No. You want to add a name to the image which can be in the form off. That's three tack. Or you can simply make use off. Peter, I'll go with the Peter the court file. If I want to give a name to the image, I can make use off you. Tag Hill. Make it image one. Just copy this, Mr Tail here. Just do it for all the images. Extort us. You want to go with the heading that like a tree? A 25 foot six where you can go with this beauty, you know, make it it. Seven, six, five, full three. And do save this good browser, the fresher. And you can see we got images with the headings. We can see images with their names. This is extremely useful for the end user. Just to know what these images are all about. So far, we're done with this part. The next video. We'll try to work with this alignment because you want this heading to be in the center, seeming the case off these images well to next video. How when I stood 5. Text Alignment: hi guys. So this week we will try to align this text in the centre. I'm talking the world, this text and this decks. Let's go to court file and go to fight, get a new file and see what has my style. CSS. It's like the development and make extra lane center. Let's say this goto as human fight and just copy this Mr Tail this one also and make it my style dot c. It says Just say of this What browser profession and you can see? No, the text is in santo No one except anybody kill perfect. She won't be in the background. You continue background Hail select the body and Mr Background color Great. No other city in the color of this heading So it's like the as three element Technicolor white Great. If you wanted in a big letters you can make it. That's too nice. So we're done with the alignment part in the background part. In the next video, we'll try to make this image gallery responsive. See the next video. Helen, I stay 6. Making it Responsive: Hi. Guys in the studio will try to make our image gallery responsive. As off. Now, it's not responsive. Just click on this button. You can see how big the images we'll work. Absolutely finding express more devices, but not in the medium devices or this morning, Isis. So we haven't fixed this. Go to court file, and we need to make some modifications here in case off small alleyways. I wanted to be to make this bottle in case off medium Devise. I wanted Toby three minutes borrow. Just copy this Mr Thiel here. Yeah, just do it for all the damages in your reply, these two classes to make a medically responsive on all the devices. And when mooting we happened in the title, make it responsive. Mitch Gallery, Let's have a look over the court just to see. Is there any mistake or not? Okay. Actually, we don't need this hill in case off hurting. Keep it handy. Club. No, Save this. What about, uh, profession? And they are trying to reduce the size. You can see they're only medium device and we are getting three witches. Peru? No. Make it a small device. We're getting to make this patrol. If I'll go express more, I'll get one image bedroom. So finally a remedial res. Responsive and Acidifying. Lockport, I hope you like the project to the next video. How a nice day.