Bootstrap tutorial 10 - Images

Bootstrap tutorial 10 – Images



hey YouTube how's it going it's Quinton here and welcome to tutorial number 10 and in this tutorial I am going to show you guys how to work with images in bootstrap because there are actually a bunch of different things that we can do with our images so one of the really awesome things that bootstrap allows us to do is actually make our images responsive so you don't land up having a really big image that's you know larger than its parent or its parent container so just to show you guys an example of that let's take a look at what I've got over here so right now you can see I've got a container and inside my container I've got a row and here's the important part because inside of that row I have a div that is set to take up only four columns on a medium device and six on an extra-small device which means our image that we add should only take up a quarter of this or a third of the screen so like from here to somewhere around here our image should end but let's go ahead and add an image and see what happens so I'm going to add an image tag over here and I'm going to give this image a source of something so source is equal to and you can see that I've got an image over here and obviously my path to that image is going to be images Mac jpg so let's go Mac dot jpg oops and I'm going to go add my images folder in front of that okay so now we've linked to the image let's go ahead and save this now and see exactly what happens I'm going to hit refresh and you can see that now with this really big image which is actually taking up definitely more than the column size so like I said this column is set to take up all this div is take set to take up four columns and four columns should kind of end somewhere around here where my mouse is and obviously this image is way bigger than that so that is because M in bootstrap by default are not responsive and if we want them to become responsive we have to add a class so I'm going to go ahead and add a class of IMG – responsive and that is going to make my image a responsive image which means it will always fit 100% of its parent so let's hit refresh and you can see that now our image only takes up those four columns that we assigned to this div so it's not going to be bigger than that and it's not going to be smaller than that it is going to be 100% the size of its parent and obviously see if I change the size of the parents so let's say I decide I want this image to take up six columns instead of four I could go ahead and change that and my image will scale to fit that size and of course as the screen gets smaller because this is responsive the image also gets smaller so that is quite awesome that bootstrap added that functionality and yeah I just wanted to show you guys how to do that but there is something else I can show you guys and that is how to make image shapes in bootstrap so bootstrap actually allows us to create different shapes and we actually have three shapes three shapes to choose from three shapes hmm that might have sounded weird but yeah we've got three shapes to choose from image rounded image circle and image thumbnail and I'll show you what each one of those does so let's go ahead and add a class to this image of image – rounded and then I'm going to copy this class and paste that three times so now we have three rows and three of them with taking up six columns each and I'm going to change this one to image circle and I'm going to change the last one to image – thumbnail and now if I go ahead and hit save and we jump back over to the browser and hit refresh you can see that our first image now has rounded corners might be a little bit hard to see on that little YouTube player but it's there the image now has rounded corners then image circle would probably have worked better if I used a square image because if this image was square then this would be a perfect circle but of course I've used a longer rectangular shaped image so now it kind of looks like an ellipses or what's the webknight ellipses elliptical circle something like that yeah and then the last one over here is an image with a like white border and then a thin dark line around the outside as well so yeah that is what image thumbnail does and I'll leave it to you to kind of try each class out and take a closer look at what each one of these classes does but I thought that these shapes are pretty awesome especially the image circle I use that quite a bit and that is all I have for you guys in this video so don't forget to subscribe please feel free to leave a comment like and share this video it's really going to help my channel grow and I will see you guys next time

22 thoughts on “Bootstrap tutorial 10 – Images”

  1. Bro i hope you see this and know that your time and knowledge and teachability is really worth ten stars 😀 Thank you so much bru

  2. Quintin teaches four important classes namely
    1) img-responsive
    2)img-rounded
    3)img-circle
    4)img-thumbnail
    Like if u want to save someones time and keep this comment as note under the video

  3. Hey Quentin! I am grateful to you. I am a big fan of you. I am from Bangladesh. I am not in a position to donate You but hope so. I am continuing a course getting a scholarship from Islamic Development Bank. My course subject is WPSI(web presence solutions and implementations). i am not satisfied at all with my teachers lecture and teaching style. I think he is not willing to teach us. He is just doing his job. One of my batch mate told about your tutorials. Specially when i got stuck in JavaScript you helped me a lot. We all are grateful to you. Thank You Quentin. I wish i will meet You. And You are invited to my Country Bangladesh. Best of luck Quentin!

  4. hello guys ,please I need a help ,I loaded a picture from the interent but it is very big and
    when I made it responsive ,it appeared vertically I dont know how can I solve it
    ,I am using codepen website

  5. i got 6 images, on desktop or laptop view i want to have 2 rows of 3 images , when in mobile to have one under each other, but my images are going under each other on laptop view my code <div class="col-lg-3 col-md-4 col-xs-12">

    <img src="images/colours.jpg" class="img-responsive">

    <img src="images/finaladjustment.jpg" class="img-responsive">

    <img src="images/font_pairs2-01.jpg" class="img-responsive">

    <img src="images/graphs2.jpg" class="img-responsive">

    <img src="images/retouchsnow1.jpg" class="img-responsive">

    <img src="images/magzinecover1.png" class="img-responsive">

    </div>

  6. I wish to share with you guys an issue that is probably known for some of you, (but I didnt know) and It took me a while to find the solution: The class image-responsive must be placed AFTER the src of the image, in this way it worked for my 🙂 if Im wrong please tell me. Sorry for my english Im from latinoamerica, I hope this will be of help to another beginner like me.

  7. I love you man 🙂 really thank you for the great tutorials. I have learned a lot. Should you pass by Amsterdam, the drink is on me.

  8. Very easy to understand tutorials. Much easier than digging through the extremely wordy Bootstrap site to find solutions or just learn. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *