I'm trying to get three images to cumulatively take up an entire bootstrap row (effectively each taking up a column that spans 4). However, my code right now has them leaving gaps in between, and on either side. I've attached a screenshot of the problem, with the ideal solution to have the images take up the entire space without leaving any gaps. Below is the relevant html:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%">
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%">
</div>
</div>
</div>
</body>
Screenshot of Issue
Bootstrap columns have default right and left padding of 15px. Inspect the columns in devtools and you will see it. You need to over ride it with your own custom css.
Here you go with a solution https://jsfiddle.net/hhzbxrbf/
.col-md-4 {
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928572/Waterloo_Image_abjgbc.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500928930/New_York_Image_ke8tya.png" style="max-height:100%;width:100%" />
</div>
<div class="col-md-4">
<image class="img-responsive" src="http://res.cloudinary.com/duocsoiqy/image/upload/v1500929276/Columbus_Image_t7oren.png" style="max-height:100%;width:100%" />
</div>
</div>
</div>
</body>
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.
I am working on a Bootstrap 3 grid (unfortunately, the CMS is not allowing me to use Bootstrap 4). At the moment I cannot link to the page, so maybe this question is too hard to answer.
Here is how the row containing 5 columns is looking in the CMS:
The max-width is 1200px.
The problem is that every time I add a column containing an image, the image height is not the same. In this example I set a height on 255px on all images, but the image in the first column is much taller than the others.
When I enter the code in a JSfiddle it is looking normal
See jsfiddle here
So it must be something in the CMS there is doing it? Is there some kind of clue what I could look after?
Best regards
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.padding-y {
padding: 20px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="section padding-y">
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255">
</div>
</div>
</div>
Step 1. Let's reproduce the problem
We don't need the bootstrap-theme.min.css. This file uses for the decoration only. First of all wee need bootstrap.min.css.
The 3.0.0 version is too old. Let'use the 3.4.1. instead. It's the latest Bootstrap 3 version.
Bootstrap assumes the row is inside the container. Sometimes the CMS has its own containers, and then you can get by with them, but to reproduce the problem, we need the correct code with the container.
Looking at your screenshot, I dare to assume that something on your site adds the max-width: 100%; restriction to all images. This is a fairly common solution for different themes.
I removed the block with the section padding-y classes, because the problem was reproduced without it.
So we get an example of a code that reproduces your screenshot.
img {
max-width: 100%;
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-sm-2">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Step 2. What's happened
4 small images are wider than their columns. With a total content width of 1200 pixels, a column in one sixth of the width is 200 pixels. In addition, each column also has a horizontal padding of 15 pixels. There are 170 pixels left for the 233-pixel wide image.
And something adds a limit for the maximum width of images. Because of this, these images become smaller and their height becomes smaller too.
Step 3. What can be done
Since we do not know your layouts for screens of different widths, I can only fantasize.
Suppose you want to put 5 pictures of different sizes in one line on the desktop so that their heights coincide.
Variant with backgrounds
For example you can replace the images with blocks and use the images as a background. Then the height can be set in the CSS, the gaps between the pictures will be the same, but the visible part of the pictures can decrease.
.image-box {
background-repeat: no-repeat;
height: 255px;
}
#media (min-width: 768px) {
.image-box {
background-position: center;
background-size: cover;
}
}
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="image-box" style="background-image:url(https://via.placeholder.com/348x255/69c/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
<div class="col-sm-2">
<div class="image-box" style="background-image:url(https://via.placeholder.com/233x255/c69/fff)"></div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Variant with flexbox
You can also make Bootstrap 3 columns behave like a flexbox. This solution is suitable if the sizes of the images are known in advance and you can calculate which part of the row each of them occupies.
In the comments you have wrote that you wish to stretch the images on mobile. So I use this info in the new solution.
.row-of-images img {
width: 100%;
}
#media (min-width: 768px) {
.row-of-images {
display: flex;
}
.row-of-images > div {
box-sizing: content-box;
/* images will be resized taking into account the padding of the columns */
flex: 1 1 18.203125%;
/* 18.203125% = 100% * 255px / (348px + 4 * 255px) */
}
.row-of-images > div:first-child {
flex-basis: 27.1875%;
/* 27.1875% = 100% * 348px / (348px + 4 * 255px) */
}
}
<div class="container">
<div class="row row-of-images">
<div class="col-xs-12">
<img src="https://via.placeholder.com/348x255/69c/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
<div class="col-xs-12">
<img src="https://via.placeholder.com/233x255/c69/fff">
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
The reason the images are different heights on the problem page "(domain) dot com slash da-dk/page/sbp" (but not in the posted source above) is because the images on the problem page have the .img-responsive class:
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/233x255" class="img-responsive">
</div>
</div>
From the Bootstrap 3.3 documentation, .img-responsive applies:
max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.
The first image is scaling to the width of the first column, which is col-sm-4. The other images are scaling to the width of a col-sm-2 column. So it's clear why the images are different height.
The simplest fix is to remove .img-responsive from all the images.
But if you want to keep the images responsive, you'll need to adjust the image aspect ratios so the wider and narrow images end up the same height.
Example with the aspect ratios adjusted:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-4">
<img src="http://placehold.it/348x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
<div class="col-sm-2">
<img src="http://placehold.it/153x255" class="img-responsive">
</div>
</div>
I am struggling adding spacing (or margin) between columns using the grid system in bootstrap. My html and css is below. I could not get any of the solutions posted online to work. The goal is spacing between col-8 and col-4. Any suggestions? Thanks!
HTML:
<div class="container">
<div class="row">
<div class="col-md-8">
hello
</div>
<div class="col-md-4">
<div class="row" align="center">
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/github_circle_black-128.png" class="icon-resize" alt="github">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_black-128.png" class="icon-resize" alt="linkedin">
</div>
<div class="col-md-4">
<img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_black-128.png" class="icon-resize" alt="twitter">
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
max-width: 960px;
height: 100%;
}
here is what you're looking for:
gridGutterWidth
It's usual to download the raw (.scss or .less) versions of bootstrap, so you can control the css output at build time. If you don't use any of them, you may find the http://getbootstrap.com/customize/ comfortable.
You could apply inline by
<div class="col-md-4" style="padding-left:1em">
I have a div that lists screenshots for my software that I'm displaying on a website. When the screen is big the images align properly.
The problem is when I view it on the phone or change the window size on the computer to collapse the items, there's empty space where it's not being aligned properly for some reason. See Picture below.
Here is the Code on the index page. In my opinion, everything should work fine without adjustments.
Things I've tried:
-Removing the container and row classes.
-Changing the width of the images all the way down to 80%, which even 100% SHOULD work
-Adding class="img-responsive" as seen in another thread.
-Removing margins and padding for the divs the images are in.
<!-- Screenshots -->
<div id="screenshots">
<div class="container">
<br>
<div class="row text-center"> <!-- Screenshot DIV -->
<h2>Screenshots<h2>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/dashboard.png" alt="Dashboard SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/lotmanager.png" alt="Lot Manager SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/register.png" alt="Register SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/sell.png" alt="Auction SS" class="img-responsive" width="100%" />
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/checkout.png" alt="Checkout SS" class="img-responsive" width="100%"/>
</div>
<div class="col-md-2 col-xs-6">
<img src="images/screenshots/samplereceipt.png" alt="Receipt SS" class="img-responsive" width="100%" />
</div>
</div><!-- /.Screenshot DIV -->
<br>
</div><!-- /.container -->
</div><!-- /.screenshots -->
Any help would be appreciated.
One Error in Your Code, Please check after correct /h2
<h2>Screenshots</h2>
It is due to different height of the images. What can u do Set the parent div of the img to the maximum height from the group of the images?
var maxheight;
$('#screenshots .container > div > img').each(function(){
var currHeight = $(this).height();
if(maxHeight < currHeight) {
maxHeight = currHeight;
}
});
if(window.width() < 768) {
$('#screenshots .container > div').hieght(maxHeight);
}
I want the elements to be side by side and not on top of one another.
When I say best way, I want the elements to not overlap when you change the size of the screen.
Here is my HTML:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="col-md-offset-1 col-sm-12 col-md-10" style="background-color: #f6f6ff;">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
<h1>2</h1>
<img src="media/github.png" alt="GitHub" height="150" width="150">
</div>
</div>
Here is a picture of what it looks like:
Right now you have an h1 separating the two images. Since heading tags are block level elements by default, it's not possible to line up the images side by side with the h1 separating them. However, if you put each image/heading in their own column, they will line up:
<div class="container-fluid" style="text-align:center; background-color: #f6f6ff;">
<div class="row">
<div class="col-xs-6">
<h1>1</h1>
<img src="http://placehold.it/150x150" alt="Subversion" height="150" width="150">
</div>
<div class="col-xs-6">
<h1>2</h1>
<img src="http://placehold.it/150x150" alt="GitHub" height="150" width="150">
</div>
<div class="clearfix"></div>
</div>
</div>
Bootply
Using the Grid system to scale up to 12 columns, as described here
<div class="row">
<div class="col-md-4">
<img src="media/subversion_logo-384x332.png" alt="Subversion" height="150" width="150">
</div>
<div class="col-md-4">
<h1>2</h1</div>
<div class="col-md-4">
<img src="media/github.png" alt="GitHub" height="150" width="150
</div>
You can change the size of the columns by increasing/decreasing col-md-4
If you want two elements to be side by side, you can use "row" and "col" from the bootstrap grid.
For example, this is how to code 2 images:
<div class="row">
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
<div class="col-lg-6">
<img src="media/subversion_logo-384x332.png" alt="GitHub" height="150" width="150">
</div>
</div
The bootstrap answer is the best. I had the same requirement before, only difference being that it was not acceptable to have the content in the different columns visually spread apart too much on large screens. In that case, you would use the original html and use css
.container-fluid div > * {
margin: 0 auto;
display: inline;
}