]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Images | |
4 | description: Documentation and examples for styling images with Bootstrap. | |
5 | group: content | |
6 | --- | |
7 | ||
8 | Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## Responsive images | |
16 | ||
17 | Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. | |
18 | ||
19 | <div class="bd-example"> | |
20 | <img data-src="holder.js/100px250" class="img-fluid" alt="Generic responsive image"> | |
21 | </div> | |
22 | ||
23 | {% highlight html %} | |
24 | <img src="..." class="img-fluid" alt="Responsive image"> | |
25 | {% endhighlight %} | |
26 | ||
27 | {% callout warning %} | |
28 | #### SVG images and IE 9-10 | |
29 | ||
30 | In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. This fix improperly sizes other image formats, so Bootstrap doesn't apply it automatically. | |
31 | {% endcallout %} | |
32 | ||
33 | ## Image thumbnails | |
34 | ||
35 | In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/borders/), you can use `.img-thumbnail` to give an image a rounded 1px border appearance. | |
36 | ||
37 | <div class="bd-example bd-example-images"> | |
38 | <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> | |
39 | </div> | |
40 | ||
41 | {% highlight html %} | |
42 | <img src="..." alt="..." class="img-thumbnail"> | |
43 | {% endhighlight %} | |
44 | ||
45 | ## Aligning images | |
46 | ||
47 | Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering). | |
48 | ||
49 | <div class="bd-example bd-example-images"> | |
50 | <img data-src="holder.js/200x200" class="rounded float-left" alt="A generic square placeholder image with rounded corners"> | |
51 | <img data-src="holder.js/200x200" class="rounded float-right" alt="A generic square placeholder image with rounded corners"> | |
52 | </div> | |
53 | ||
54 | {% highlight html %} | |
55 | <img src="..." class="rounded float-left" alt="..."> | |
56 | <img src="..." class="rounded float-right" alt="..."> | |
57 | {% endhighlight %} | |
58 | ||
59 | <div class="bd-example bd-example-images"> | |
60 | <img data-src="holder.js/200x200" class="rounded mx-auto d-block" alt="A generic square placeholder image with rounded corners"> | |
61 | </div> | |
62 | ||
63 | {% highlight html %} | |
64 | <img src="..." class="rounded mx-auto d-block" alt="..."> | |
65 | {% endhighlight %} | |
66 | ||
67 | <div class="bd-example bd-example-images"> | |
68 | <div class="text-center"> | |
69 | <img data-src="holder.js/200x200" class="rounded" alt="A generic square placeholder image with rounded corners"> | |
70 | </div> | |
71 | </div> | |
72 | ||
73 | {% highlight html %} | |
74 | <div class="text-center"> | |
75 | <img src="..." class="rounded" alt="..."> | |
76 | </div> | |
77 | {% endhighlight %} |