From ca0fb736c70b6fd2814254fd8750eef42a3c9d86 Mon Sep 17 00:00:00 2001 From: Nikita Rushmanov Date: Fri, 23 Jan 2015 02:02:21 -0800 Subject: [PATCH 1/3] Center images in carousel example In order to see the changes, you must shrink the browser to below the md threshold. --- docs/examples/carousel/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index a0ff8d7468..71fdb3ec75 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -160,7 +160,7 @@

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

- Generic placeholder image + Generic placeholder image
@@ -168,7 +168,7 @@
- Generic placeholder image + Generic placeholder image

Oh yeah, it's that good. See for yourself.

@@ -184,7 +184,7 @@

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

- Generic placeholder image + Generic placeholder image
From d41f114e9b11eddd3c947755801a35c0687c40e1 Mon Sep 17 00:00:00 2001 From: Nikita Rushmanov Date: Fri, 23 Jan 2015 02:14:12 -0800 Subject: [PATCH 2/3] Fix image order in carousel example When the screen is shrunk below the md threshold, all the featurette columns stack. However, since the second featurette is "backwards", when stacked the second featurette looked awkward as the image came before the heading. --- docs/examples/carousel/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index 71fdb3ec75..eaa5ff89a3 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -167,13 +167,13 @@
-
- Generic placeholder image -
-
+

Oh yeah, it's that good. See for yourself.

Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.

+
+ Generic placeholder image +
From 6e782ed42d90a54e8d548cee66be3627b0a1d077 Mon Sep 17 00:00:00 2001 From: Nikita Rushmanov Date: Fri, 23 Jan 2015 03:16:07 -0800 Subject: [PATCH 3/3] Add a warning in images.html about text-align People normally center images using text-align. However, the `.img-responsive` class changes the display type to block. As a result you can no longer align the image with text-align. You must instead do it with margin: auto. There was no note about this on the web page, and no mention about setting the display to block. Users were left on a frustrating journey to figure out why they can't center images anymore! --- docs/_includes/css/images.html | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/_includes/css/images.html b/docs/_includes/css/images.html index 73516afbae..9ce88698e0 100644 --- a/docs/_includes/css/images.html +++ b/docs/_includes/css/images.html @@ -2,7 +2,11 @@

Images

Responsive images

-

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

+

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

+
+

Center aligning images

+

Since .img-responsive changes the display type to display: block;, you can no longer align the image using text-align or any of the alignment classes. Instead, use .center-block on the image element itself.

+

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.