Bootstrap tutorial 10 – Images


In this tutorial I show you how to make images responsive and create image shapes.

Useful links:
Don’t forget to subscribe:

Follow me on Twitter:

Follow me on Facebook:

Feel free to donate:


Bootstrap (Software), Tutorial (Media Genre), Web Development, HTML, CSS, Cascading Style Sheet, Hyper Text Mark up Language, How to, Bootstrap, Responsive, Design, Framework, Front End Framework, JavaScript, JQuery, What is Bootstrap?, LESS, Tut, Development, CSS Framework, Quentin, Watt, Bootstrap for Mac, Sublime Text (Software), Mac OS (Operating System), Mac Text Editor, Creating a website,images,responsive,shapes,


Xem Thêm Bài Viết Khác:


  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
    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">


  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!

  9. Hey Quentin.
    What should I do in a case where I want to put an image and a caption in <div class=thumbnail"> but every time I post a picture that has width less than 900px or sth it leaves huge white blankets on its sides. When I post a giant pic like 1920×1080 it scales perfectly but some smaller images just "don't fit".

  10. Thank you for your great videos Quentin. By now at least I know I could not possibly use Bootstrap for anything more than a mock-up – if that! It really is so amateur-like to use classes on every element that needs styling … and basic styling which then requires further CSS anyway in order to make it look unique. And if one needed to change the styling of every page on a site, they'd surely have to go into every page to make the class amendments – particularly as you say it's bad practice to mod the Bootstrap file – which completely defies the whole idea of having just one or two CSS files. It may be adequate for cheap, run-of-the-mill sites and some people's quick-fix satisfaction, but I'll continue to use my own responsive CSS files I think. This is no reflection on your videos Quentin. You are doing a wonderful job of showing us Bootstrap … and then whether or not we actually want to use it or not. I am a grateful subscriber. Keep up the good work! 🙂

  11. how can i change from an image to another… for instance, i have a big logo, to be shown in the big screen computer, but i have another logo, fit for mobile.. how can i change from one to another just by changing the size of the window ?

  12. I have an issue with an image. I need the width to be hitting the right side of the screen while on the left side I have a text that should be vertical aligned with a text in the header.
    As soon as I start to work my way up with container row col-lg-# the image tends to be squeezed to fit the div as you showed in this video.
    I tried to solve it with setting width to 200% or more but that fishes up the responsiveness.
    I tried to use container-fluid but that will not align the left text to the header text.
    I don't know what to do.

  13. Really annoying you made such great tutorials and screwed it up using dark backgrounds on your code editors making them hard to read… such a waste 🙁


Please enter your comment!
Please enter your name here