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.
Related
I have several different images all with a different height/width. I want them all to have the same height and keep their aspect ratio so I figured in the css width should be equal to auto. How can I achieve that all my images have the same height but keep responsiveness?
I wrote the following code containing the images:
<div class="container container-margin">
<div class="columns">
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/battleport.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">Battleport</h6>
<p><i>Study</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<div class="card-image">
<figure class="image">
<img class="bw-filter" src="/images/crmfabriek.png"/>
</figure>
</div>
<div class="card-content remove-padding-left">
<div class="content">
<h6 class="">CRM Fabriek</h6>
<p><i>Business</i></p>
<br>
</div>
</div>
</div>
</div>
<div class="column is-one-thrid">
</div>
</div>
Besides that I've looked at the following topics
How to keep responsive images same height?
How can I make all images of different height and width the same via CSS?
Unfortenately the solutions in the topics won't work for my code. Could anyone help me out?
Not sure if this is what you are looking for, but might be the fix.
div{
width: 100%;
text-align: center;
}
img{
max-width:100%;
max-height: 300px;
}
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="">
</div>
I think the best option would be to use these images as background images and then set the background-size to either "contain" or "cover". This way you can set the container width/height to the appropriate size based on the media query.
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 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´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'm trying to align each image to the left and right of the text in the "wrapper2 panel-footer center-block" div. It correctly aligns the left image, but the right image is actually going "under" the div for some reason.
.wrapper2 {
max-width: 800px;
float: none;
margin: 0 auto;
}
<div class="wrapper2 panel-footer center-block">
<div class="pull-left">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
<p><small>Copyright © All Rights Reserved.</small>
</p>
<div class="pull-right">
<img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" />
</div>
Any reason for this?
To align divs next to each other in Bootstrap you utilize columns. There are 12 columns in a row, so in the example below I put each element in a 4 wide using the col-xs-4 class.
I also added the img-responsive class to both of the images so they scale down correctly on smaller devices.
<div class="wrapper2 panel-footer">
<div class="col-xs-4">
<div class="pull-left"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
<div class="col-xs-4">
<p><small>Copyright © All Rights Reserved.</small></p>
</div>
<div class="col-xs-4">
<div class="pull-right"><img class="img-responsive" alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
</div>
Here's a working fiddle link: https://jsfiddle.net/88ebLj7e/
You can find more information on the Bootstrap grid here: https://getbootstrap.com/examples/grid/
<p> Tag is outside the pull-left class. That's what made it looks "under" the div. When you use pull-left. all should be INSIDE the class.
From your codes, <p><small> belongs to wrapper2 not pull-left or pull-right.
If you need more flexible usage, you can use what James Ives suggest. Otherwise, you should change it into like this:
Add one line in your stylesheet as follows:
<style>
.wrapper2 p{float:left; padding-left:30%;}
</style>
<div class="wrapper2 panel-footer center-block">
<div class="pull-left"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
<p><small>Copyright © All Rights Reserved.</small></p>
<div class="pull-right"><img alt="logo" src="https://cdn4.iconfinder.com/data/icons/miu-flat-social/60/stackoverflow-128.png" /></div>
</div>
So, what you need now is to decide padding-left value.
Hopes, it helps.