HomeОбразованиеRelated VideosMore From: Quentin Watt Tutorials

Bootstrap tutorial 10 - Images

557 ratings | 64146 views
In this tutorial I show you how to make images responsive and create image shapes. Useful links: ----------------------------------- Don't forget to subscribe: www.youtube.com/QuentinWatt Follow me on Twitter: www.twitter.com/QuentinWatt Follow me on Facebook: www.facebook.com/quentin.watt Feel free to donate: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N ------------------------------------ Tags: ---------------------- 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,
Html code for embedding videos on your blog
Text Comments (51)
Nikhil Ghodke (16 days ago)
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
neil kumar (21 days ago)
Why did you attach theme.min.css what is the propose of it and why we used it?😒
Fazal828 (4 months ago)
Could you update your tutorials mentioning this is bootstrap 3?
tiesfa (5 months ago)
Resposive class doesn't work for me :(
Meton97 (6 months ago)
img-fluid instead of img-responsive for bootstrap 4
Mahmud Hasan (7 months ago)
Thanks. Realy it help me
張羿訢 (8 months ago)
thanks Quentin great video
Dhaivat Chhaya (9 months ago)
Brilliant tutorials! Thanks, Quentin.
Abdessamad Boutamente (9 months ago)
Thank you bro
Musfiqur Rahman (11 months ago)
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!
Donatas. S (1 year ago)
A lot of these codes don't work for me :/
Kawaii Toys (2 months ago)
Same for me. But when I look the new documentation of boostrap, its has a new form of version. Its already version 4.0 and theres a new one which is 4.1. We are outdated bro. Im confuse either yesterday
Gurika khasia (5 months ago)
https://www.w3schools.com/bootstrap/bootstrap_get_started.asp get from there maxCDN links and paste it in your editor
Evrard Bendjek (9 months ago)
This video was made in 2015, a lot of udpates have been made on bootsrap since. The syntax has changed.
pouvoir Cerveau (1 year ago)
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
blackhawks88 (1 year ago)
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>
The Web Master (1 year ago)
5:01 It's called an oval
Pablo Dusi (1 year ago)
Quentin, thank you very much, you are awesome!
Gman Kotovski (1 year ago)
how can i add videos ???
Bhawna03 (1 year ago)
The Web Master I think he meant on bootstrap lol
The Web Master (1 year ago)
At the top right of the main youtube page, click the arrow with the underline.
Mark Evans (1 year ago)
Great video Quentin How do I get a full screen responsive background img in bootstrap please Mark
Paola Parra (1 year ago)
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.
Patricia B (1 month ago)
IT worked for me that way but using <img src="2.jpg" class="img-fluid"> and not <img src="2.jpg" class="img-responsive">
The Shroud (1 year ago)
Doesn't seem to make a difference to my code..
Omar B. (1 year ago)
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.
Matthew Wright (1 year ago)
Very easy to understand tutorials. Much easier than digging through the extremely wordy Bootstrap site to find solutions or just learn. Thank you!
Grzegorz Drozdzak (2 years ago)
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 1920x1080 it scales perfectly but some smaller images just "don't fit".
Quentin Watt Tutorials (2 years ago)
The best thing to do is edit your images to the correct size. If they're too small, use a bigger one.
Momin Parveez (2 years ago)
you used col-md-6 , wasn't 2 images supposed to be in-line? as bootstrap is 12 grid system
Riddhima (1 year ago)
+Momin Parveez because he has used different rows
Michael Liu (2 years ago)
how to make these images in-line ? and changes to 2 or 3 lines when the size is shrink?.
Johnny - JSP (2 years ago)
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! :-)
Quentin Watt Tutorials (2 years ago)
Hey Johnny You can actually customize your Bootstrap theme on the bootstrap website here: http://getbootstrap.com/customize/ It's not the greatest editor, but that's whats on offer. There are also different bootstrap themes to choose from. Although you can also link your own custom.css file for any additional changes or overrides you would like to may to Bootstrap. I hope that helps, if not, I'll be taking a look at another front end framework in the future.
Raziuddin Mohd (2 years ago)
hi, i embedded a youtube video in my code and that is not responsive as images,so is there any class for that too....!
Miguel Leandro (2 years ago)
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 ?
Saeed Artportal (2 years ago)
Thanks , it is very helpful.....
nattsurfaren (2 years ago)
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.
Xiaolin Chen (2 years ago)
Thank you, Quentin!
Lively Shively (2 years ago)
Is there a way to center the image, or put it on the right side?
Quentin Watt Tutorials (2 years ago)
+Drewsith Films The text align classes should work. You can also float right. There are a bunch of different options.
Alexander Bogdanov (3 years ago)
Tell me, why pics have the same dimensions but look different size on the screen? Thanks!
Michael Trier-hofby (3 years ago)
Hey where do you find the different classes that bootstrap lets you use??
Michael Trier-hofby (3 years ago)
+Mehdi Abderezai thanks , how do you make 2 images or more stand inline next to each other?? Do you give the images a style of display: inline-block; ?
Mehdi Abderezai (3 years ago)
+Michael Trier-hofby http://www.cheatography.com/masonjo/cheat-sheets/bootstrap/
Brian Pitts (3 years ago)
Thinks for the tutorial
Adriana Giancarla (3 years ago)
great tutorial.
Lesley Mitchell (3 years ago)
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 :(
Alex (1 year ago)
It looks fine to me.
Sasukie Uchiha (3 years ago)
Sir Quentin I just to ask if you have also a Tutorial in the Validation of form.? :)
Rango FROG (3 years ago)
Thanks brother a very nice video

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.