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.
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'm using bootstrap grid as shown below and I'm trying to centralize some divs. ( pic). I've tried everything {margin:0 auto; width:50% } etc etc but I can't work it out. It can't be that difficult to centralize some divs. What's the problem here? Please don't mark it as a duplicate. I've been researching the whole day, I just can't work it out.
Thank you
<header data-spy="affix" id="myHeader" class="container row">
<div class="col-sm-4 ">
<div class="centralize">
<a href="http://www.facebook.com" target="_blank">
<img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.twitter.com" target="_blank">
<img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
<a href="http://www.instagram.com" target="_blank">
<img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
</a>
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
<div class="col-sm-4">
<div class="centralize">
//Other Stuff to be centralized
</div>
</div>
</header>
Actually with {margin:0 auto; width:50%} it should work.
But in your code I see that you are using the .col-sm-4 class on the parent div that only takes 1/3 of the width. It might work with .col-sm-12 instead that takes 100%
To center align the content within the class="centralize" divs, use:
.centralize {
text-align: center;
}
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 recently asked a question that a is kind of related to this but I still need some help. Now that I have that part done, I would like to know how I can make this images fit the size of the browser within their respective divs. Therefore the page would just be the 3 images side by side, no scroll up or down. I thought that having a "container fluid class would help me in this respect but it hasn't. I don't care about the quality of the images in terms because I will be using very hi-def photos, but if there is anything that I should keep in mind in this respect please feel free to notify me. Here is the code so far:
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
</div>
You can add some classes to your html :
<div class="imageContainer container-fluid">
<div class="row">
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.bandanaworld.com/20108.JPG" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://www.wholesaleforeveryone.com/content/images/blank/600/solid_color.gif" alt="img">
</div>
<div class="ImageColumn col-md-4">
<img class="img-responsive" src="http://sdihousing.com/wp-content/uploads/2011/09/Solid-Colors-Spectrum-Blue.png" alt="img">
</div>
</div>
And some css:
.imageContainer {
height:100%;
position:fixed;
}
.imageContainer .row, .imageContainer .ImageColumn {
height:100%;
padding:0;
}
.imageContainer .ImageColumn img {
width:100%;
height:100%;
}
here is the Fiddle
But I must warn you the result with real photos can look bad because of image stretch: Example
UPD:
as suggested in comments - you can change class to col-xs-4 so it would behave the same on all devices.
UPD 2:
I added something similar like Ihover square effect 4 but without rotation.
It required quite a change in css transitions.
Here is the example:
Link
I'm using Bootstrap and I'm having problem with CSS. I'm trying to align the columns so that the images inside each column have the same bottom line, not the top. I have tried everything I can think of but nothing seems to work. Can anyone help me to align the images correctly? So that the bottom of the images all match?
<div class="container marketing">
<!-- Sponsors logos-->
<div class="row featurette lastNew">
<div class="col-lg-4">
<img class="img-responsive midjasponsora" alt="1496x613" src="images/logos/Platinum/image1.png">
</div>
<div class="col-lg-4">
<img class="img-responsive" alt="180x52" src="images/logos/Platinum/image2.png">
</div>
<div class="col-lg-4">
<img class="img-responsive" alt="283x66" src="images/logos/Platinum/image3.png">
</div>
</div>
</div>
I found the answer.
I put this class on the columns and that was it.
.vcenter {
display: inline-block;
vertical-align: bottom;
float: none;
}