I am trying to create a Bootstrap grid layout with different images. Everything is fine except when viewing on different mobile devices in the mobile inspector on Chrome. Below is a picture of what it looks like in the inspector. The second image is slightly off-centered from the former image.
<section class="container" id="main">
<section class="center-block text-center">
<h4>Random Column Number 1</h4>
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" width="500px" height="262px"/>
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 2</h4>
<img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" width="500px" height="262px" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" width="500px" height="262px" />
</section>
</section>
Here is the JSFiddle. The problem is that I am trying to off-set the second section as a "col-lg-6 center-block text-center" class. If I remove the col-lg-6 it works just fine. But I want to be able to stack two images next to each other. Is there any way to correct this so that it is centered like the first image? The JSFiddle contains three images.
This is what it looks like at full screen.
The images are not the correct aspect ratio because of the force width and height set. Perhaps just set a max-height so they image width can change responsively.
Also, center-block should be used on the images instead of the col-
<section class="container" id="main">
<section class="center-block text-center">
<h4>Random Column Number 1</h4>
<img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" class="center-block img-responsive" />
</section>
<section class="col-lg-6 text-center">
<h4>Random Column Number 2</h4>
<img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" class="center-block img-responsive" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" class="center-block img-responsive" />
</section>
</section>
http://www.codeply.com/go/JBhTWnvfv5
Just add a media query when on mobile devices.
It would look something like this:
#media screen and (max-width: 720px) {
.center-block {
padding:0 !important;
}
}
Fiddle
<div class="col-sm-3">....</div>
....
use this code in your div where you are placing your grid and and div with these classes as i mentioned above. It works
Related
I have this setup in a section, but Bootstrap break the 3rd column into a new line, why?
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3 pl-3" id="portraitPreviewColumn" style="padding-left:0">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3 pl-3" id="socialPreviewColumn" style="padding-left:0">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Looks like this:
I removed padding left, but has the same phenomenon.
<div class="row mt-3">
<div class="col-lg-6" id="landscapePreviewColumn">
<img id="landingImageLandscape" src="https://pic.speechifai.tech/1000x1000/F8619E40-A392-4FE1-99BC-8FCCDF81BFA7.jpg">
<img id="landingImageLandscapeOverlay" src="/img/landing_preview/Desktop2.png">
</div>
<div class="col-lg-3" id="portraitPreviewColumn">
<img id="landingImagePortrait" src="https://pic.speechifai.tech/57F7B4C0-9A38-4184-874B-707E97EA3977.jpg">
<img id="landingImagePortraitOverlay" src="/img/landing_preview/Mobile2.png">
</div>
<div class="col-lg-3" id="socialPreviewColumn">
<img id="landingImageSocial" src="https://pic.speechifai.tech/2FF280BE-DCB3-4235-9B2C-87558D4D26F1.jpg">
<img id="landingImageSocialOverlay" src="/img/landing_preview/Mobile2.png">
</div>
</div>
Try to add
class="img-fluid"
to the images.
The documentation says:
Responsive images 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.
Source: https://getbootstrap.com/docs/4.0/content/images/
I think, your screen is too small
https://getbootstrap.com/docs/4.6/layout/grid/#grid-options
try col-6 col-3
Problem was that the parent container had padding. I set it zero, and then all the 3 item got into one line.
When shrinking the screen, these images are overlapping each other. I have made no changes to the css for container-fluid or row.
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4">
<img src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
I would like the images to just stack on top of each other, instead of overlapping.
Thanks
The columns will overlap because the <img> elements have a fixed width value. col-*-* have a set percentage width and as soon as that becomes smaller than the width set on the images, overlapping will occur.
To make images responsive you can remove the width property and use the class .img-responsive so that the <img> doesn't exceed the width of the column. It utilizes max-width: 100%.
<img class="img-responsive" src="..." />
You should defined your columns for narrower screen, e.g. col-xs-12. It means that on screens smaller than 768px each column take all the available space, so they stack.
In your code you have 3 columns in a single row and a single column take 33.33% of available space. What's more, you have declared fixed sized of your images. In order to make them responsive, you could use Bootstrap img-responsive class. Notice though, that you must remove earlier fixed height and width. Otherwise images won't scale.
If any of the two valid answers above and below did not work for you, try to add the css attributes attaching your own class to the images:
.myclass{max-width: 100%; height: auto;}
<div class="container-fluid bg-grey">
<div class="row center">
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
<div class="col-sm-4 col-md-4 col-xs-12">
<img class="img-responsive" src="http://www.fpcbp.com/wp-content/gallery/tkGallery/OYIaJ1KK.png" width="425" height="319" />
</div>
</div>
</div>
I´m using the bootstrap grid system with full-width and I want to have a section, where I have four img-elements with equal margin and the margin should be responsive. The section is in the center of the page.
I could say for every img-element margin-right: 20px or something like this, but can I get this also responsive?
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8">
<section id="services_section">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
The stylesheet:
#services_section{
}
#services_section img{
height: 275px;
width: 275px;
display: inline;
}
if its only ever going to be 4 elements - use a nested column structure. Each image will display across the page in a single row across the screen on medium and large viewports, will display in pairs on small viewports and will stack vertically on small viewports. You will still need to style the images to display in the center of each (either with a text-center class on the parent div as I have done or via css on each img). If you need to alter the number of images - remember that the magic number is 12 - each column can be divided into 12 columns so you can alter the sizings for different numbers of image elements.
Also just note that a section semantically requires a heading (h1 - h6 - which defines its title ) within its structure to be valid html5. Hope this helps, Gavgrif
<div class="row" id="content_services">
<div class="col-md-offset-2 col-md-8 text-center">
<section id="services_section">
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
<div class="col-md-3 col-sm-6">
<img src="pictures/test.jpg" alt="Test" class="img-responsive">
</div>
</section>
</div>
</div><!-- END ROW CONTENT_SERVICES -->
I have three Bootstrap thumbnails which vary in height because of their respective content. How am I able to make the bottom most element aligned with the bottom most element of all three of the thumbnails? So I want all of the buttons to align with the bottom most button.
Here is what I have so far:
<div class="container" id="section-6">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.blancocountycat.org/images/Ear-Tipped-Cat.jpg" data-holder-rendered="true">
<div class="caption text-center">
<h3>test</h3>
<p>The most popular front-end framework for developing responsive, mobile first projects on the web. The most popular front-end framework for developing responsive, mobile first projects on the web.</p> MEET OUR PEOPLE
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="http://www.hillspet.com/images/en-us/seniorCatBrainAging.jpg" data-holder-rendered="true">
<div class="caption text-center">
<h3>test</h3>
<p>The most popular front-end framework for developing responsive, mobile first projects on the web.</p> SUPPORT THE CAUSE
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img class="grayscale" alt="200x200" data-src="holder.js/200x200" src="https://media4.giphy.com/media/mIPlgBgw9dgS4/200_s.gif" data-holder-rendered="true">
<div class="caption text-center">
<h3>Our History</h3>
<p>The most popular front-end framework for developing responsive, mobile firstework for developing responsive, mobile first projects on the web.</p> EXPLORE OUR HISTORY TIMELINE
</div>
</div>
</div>
</div>
</div>
Link to JSFiddle:
https://jsfiddle.net/obliviga/qze6g77g/
P.S. I would prefer the solution to work in IE8 or greater.
I just gave min and max height to <p> with overflow. See if this is suitable to you.
p.middle-text {
min-height: 130px;
max-height: 130px;
overflow: hidden;
}
https://www.xtendify.com/en/snippets/bootstrap/9-equal-column-height
This isn't the most ideal solution depending on how you plan on implementing your site over all as it needs to take into account any changes in the amount of text that will ultimately sit in the p tag above the href element. The margins will have to be adjusted in order for the links to remain aligned across the bottom. I added these classes to your second and third p blocks class="bottom-even-2nd" and class="bottom-even-3rd".
I also changed the col-sm-6 col-md-4 you have since Bootstap works across a 12 column grid otherwise the last block will be pushed below the second when the window is decreased.
I want to stack four images which are next to each other at desktop size, to be above each other in 2 columns (1 and 2 3 and 4) in mobile screen size, using the bootstrap 12 column grid. The original 4 imgs are similar but are not exactly the same in size. The heights vary between 40 and 57 px and the widths are between 176 and 220 px. When displayed non-responsive they come out the way they should in desktop size, next to each other. However, when I make them responsive by adding width=100% in the html, the last one comes out magnified compared to the rest, both in desktop and in mobile size, and the first one takes up more space than the rest if I inspect them. The pics do line up in 2 columns in mobile size, but the last pic is not in line with the third one but displaced a paragraph below. If I adjust the size of the last pic to 85% then the sizes are okay, but issue with the pic being out of position still remains.
Here is the code:
<section id="section">
<div class = "container">
<div class = "row">
<div class="col-md-3 col-sm-3 col-xs-6 col text-center">
<img src = "img/1.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/2.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/3.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/4.png" style='width:100%;' alt="Null" />
</div>
</div>
</div>
</section>
It depends by use of float on items of different height.
You have 2 options, one adding a special div provided by Bootstrap, that is visible only in mobile breakpoints:
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/2.png" style='width:100%;' alt="Null" />
</div>
<div class="clearfix visible-xs"></div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/3.png" style='width:100%;' alt="Null" />
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-center">
<img src = "img/4.png" style='width:100%;' alt="Null" />
</div>
</div>
</div>
You have to add it after each two elements.
Another solution is to set auto-clear with only css (you have to manually set the right media query value) and the idea is to clear:left every 3rd element:
#media screen and (max-width: 720px) {
.col-xs-6:nth-of-type(2n+1) {
clear:left;
}
}