Improve image layout in the carousel example. #15648
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
In order to see the changes, you must shrink the browser to below the md threshold.
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.
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!
|
I decided to take the liberty to edit the web page on These are all the issues I could find within a 30 second search with instances of people trying to center align an
|
mdo
added a commit
that referenced
this pull request
Feb 9, 2015
Improve image layout in the carousel example.
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The way the featurette images positioned themselves when the display was below the
mdthreshold was very ugly.Not only does it look better, it also does a much better job of showcasing bootstrap functionality. The new layout is a good example of the usefulness of push/pull. It also serves to educate people about
.center-block, because it is instinctual for people to try to center images with text-align, but in this case that would not work since.img-responsivechanges the display type on the the img to block (which the website has no mention of btw). See this guy (I made the same mistake): #14596.I used this template in my project, and it took me a good while to figure out how to fix these two problems.