Python for Entrepreneurs Transcripts
Chapter: Web design: CSS Frontend frameworks and Bootstrap
Lecture: Images in Bootstrap
Login or
purchase this course
to watch this video and the rest of the course contents.
0:03
When it comes to images, Bootstrap has a lot of options to work with. We'll see that they will into two basic categories.
0:11
First of all, Bootstrap lets us define responsive images. And, one of the challenges with images can be, on small screens,
0:20
they can create like huge scroll bars and tweak the design to not fit on the page of say a phone, but on a large design,
0:27
if you have a 27 inch screen like I have at my house, then you have these little tiny images designed for phones and it looks silly.
0:36
So, how do you set the correct size? That could be a challenge. So, with responsive images, you can tell the image to basically
0:42
take the size of the container, and often that container could be a grid cell
0:47
that is like one third of the screen or a quarter of the screen, something like that. So we have these responsive images, we also have a couple of ways
0:56
to apply different looking feel without actually changing the images. So we can change their shape and style, not in some image editing software
1:04
like Pixelmator or Photoshop or something like that, but just apply in CSS and that way if you change your mind, you maybe want to circle at one point
1:13
then you would like it to have just a little polaroid border later, you can do that and you don't have to actually redesign the image.
1:20
So let's look at these two aspects of images in Bootstrap. Let's start with responsive images, so I am going to open this in a browser,
1:34
there is a very large logo and if I zoom it back, you can see that's its size.
1:39
But more importantly, let's have it keep the size and let me see if I can change it, nope, it's just too big and now we've got to scroll to it
1:46
and imagine this is a phone it looks like this, it's not a super experience looking at this image, right. So let's see how we can change this,
1:56
well, we come over here to say this is an image, and it is responsive. That's all we have to do.
2:04
Because we are including Bootstrap, it defines its class, img-responsive, and this does not use JavaScript, it just uses CSS styles.
2:10
So now, if I refresh, you can see it fits into this area, and as it gets bigger, it sort of fits the full screen.
2:18
Now, it's huge, because all that is on this page, is the image, so the image besides a 50 pixel border that I've added on the body itself
2:27
it's just taking the size of the body. But, imagine this is just some small part of an overall page,
2:33
we can see this over at training.talkpython.fm, down here. So if we make things wider, you can see we have these images here
2:42
but as things get skinnier, you can see that we have these images here, these little featured courses,
2:50
those have image responsive style as well as they are in the grid so here when they break like this, they fit onto a single row,
2:57
because the grid is too small to be grid-like, as it gets bigger,
3:00
then they break into their various grid cells and now they fit exactly within the grid,
3:07
I've actually set a maximum width so they don't get like ridiculously big but they are still responsive.
3:14
The other style is the shapes, so let's look at those. So here we have that same image once again,
3:22
and it's just included three times in a grid, each one takes up one, there are four columns, so one third of the screen.
3:29
Now, what if we would like this one to be by itself, this one to be rounded, this one have a little polaroid thing, so I'll show you those styles here,
3:38
let's start up with the first one to be rounded. So if we apply rounded to it, you can see it just takes a little bit of an edge off the corners.
3:49
And, I personally really like that, again, you can see I have these are image rounded over here,
3:56
and there it is again, right, super easy, you could set the border radius and so on, but image rounded lets you put the idea of rounded images,
4:05
rounded edges on the image, but then tweak that with CSS on what exactly that means. Now over here, very common thing is to have a circle,
4:14
maybe we have one on this page, let's see, if I go to about, I think I do, yeah, there,
4:21
so there is a picture of me and that's actually a square picture but it has the image circle style applied to it.
4:29
So if we actually view this image, you can see it's square, I didn't edit that, make it round in Photoshop or something,
4:35
I just applied the style to it, so let's do do that over here. Let's make this one a circle.
4:42
Now, circle is not quite the right word, circle implies equal radius all the way around, what that really should be called is oval but there you go,
4:55
we have a perfect circle because it's a square image if the image was twice as long as it's wide you would get kind of an oval thing;
5:02
so just be aware, really the images you are going to apply the circle style to have to be basically square.
5:08
But this I really like the circle style, I don't know why it just seems a little class here, it lets you focusing on as long as it's in the center
5:18
whatever is the real subject of the image. In this case it's the logo not the sunbeamy things around the outside.
5:26
And finally, the last one is going to be a little bit hard to see but you can use the img-thumbnail style, let's wrap this around,
5:37
and this gives you kind of a little polaroid effect, this one I've used before but I use this much one less often, this one,
5:44
these two are my go-to styles from Bootstrap. So for responsive images, you can see we can set the class img-responsive.
5:54
And as our screen goes from wide to skinny, you can see that the image basically adjusts to however much space it has,
6:01
in this case, like I said, it's taking the full screen, which is kind of ridiculous you would never really do that
6:07
but it makes perfect sense in one of these grid cells or something like that as we saw it. Also notice that we are applying two styles,
6:14
the shape style and the responsive style together. So img-circle to make it circular, to give it a shape and then img-responsive to give it its size,
6:24
so you can combine these without any problems. We also saw we have the three image styles we have rounded, circle, and thumbnail.
6:33
So we can set just img-rounded, img-circle and img-thumbnail, and I also applied img-responsive because this is in a grid
6:42
and I want these three elements to take up basically however much room they have within their grid cell, which is more or less a third of the screen.
6:48
So before you reach for Photoshop or Pixelmator or some sort of actual editing tool, of course you need to trim up your images and so on,
6:56
but before you overdo it trying to create circles, and rounded edges and whatnot, be sure to leverage these Bootstrap styles
7:04
so most of the design of your image can actually be done in CSS.