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;
}
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 have 4 image div at the moment . And i want them to start aligning from the center . So that if anyone add more image div future it automatically align to the center.
Is it possible ?
use grid template provided by bootstrap and set the parent as container.
HTML
<div class="container">
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
<div class="col-md-3">
<img src="https://pmcvariety.files.wordpress.com/2016/11/beauty-and-the-beast-trailer.jpg?w=1000&h=563&crop=1" alt="disney">
</div>
</div>
As I understand this is what you want?
Full Layout
Yes, it is possible just you can try below code.
<div class ='container'>
<div class ='container-inner'>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
<div class ='image'>
<img src=''>
</div>
</div>
</div>
<style>
.container{
width:100%:;
}
.container -inner{
display: table;
margin:auto;
}
.image{
float : left;
}
</style>
Above code helps you to put all image container to center.
If you add single image to it it take only that width which is image width and align center, if more images take width according as align center.
I am trying to center the text and an image in two columns. But, I tried everything but I could not manage to bring then in the vertical middle position of a .row .
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
Can anyone help me with the css to align the text and the image in the middle I want to achieve the results shown in the image.
JSFIDDLE
.vertical-align{
vertical-align: middle;
}
img{
border:3px solid #2d2d2d;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<img src="http://www.free2go.com.au/-/media/allsites/competitions/content-image/free2go-beatsstudioheadphones-480x360.ashx?la=en" />
<span className="custom-input vertical-align">Filters</span>
</div>
</div>
You can make use of the Flexbox in this kind of situations, which is the best for use
<div className="hidden-md">
<div className="row navbar">
<div className="col-xs-2 col-sm-4 text-center">
<image src="../resources/back_button.png" />
</div>
<div className="col-xs-6 col-sm-4 text-center">
<span className="custom-input">Filters</span>
</div>
</div>
</div>
.row {
display: flex;
align-items: center;
}
Hope this will help you.
( using Bootstrap 5 ) I have a button with an Image + text inside it.
Issue was in my case, I used a float-end on the image - which caused the text to behave like the image doesn't expand the button's height and therefore the text was vertical aligned but not to the image but rather to the button.
Removing the float-end made all child-elements vertical aligned.
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.
I'm a visual designer, so this may seem a silly question (and at one point, this wasn't broken!) but I'm stuck. I'm trying to get images to appear in a responsive row with a mouseover.
Can anyone help? I know the code is jacked; I've been struggling with the order of the divs. The mouseover is working, BUT the images are now stacking and aren't appearing in a row anymore. They're outside of the col-lg-4 container, but I've included that. What am I missing?
*image is FPO
/// HTML:
<div class="col-lg-12">
<div class="highlight">
<h3>LOREM IMPSUM DOLAR</h3>
<h5>The fox and the rabbit.</h5>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
<div class="col-lg-4">
<figure class="cap-left">
<div class="thumbnail">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/T_Roosevelt.jpg/473px-T_Roosevelt.jpg" alt="">
<figcaptions><h4>Please let this work</h4></figcaptions>
</div>
</figure>
</div>
</div>
/// JSFiddle:
http://jsfiddle.net/zvcNa/
This is due to your padding: 30px 40px; for figcaptions{}.
figcaptions is 100% width and height, but add your padding to this size.
Remove this padding and add it to your figcaptions children :
figcaptions h4{
padding:30px;
}
FIDDLE
EDIT #1:
Replaced :
figure {
display: block;
position: relative;
}
.col-lg-4 {
display:block;
float:left;
}
FIDDLE