I'm trying to (1) get an image carousel to vertically center images, and (2) get the carousel to shrink to the height of the smallest image [i.e. not have wasted white space]. This is sort of a "multiple image" carousel, like this one: https://bbbootstrap.com/snippets/clients-brand-logo-carousel-slider-20683486.
I don't know what classes to add where. Obviously looked at d-flex + justify-items + align-items, and some other SO posts suggesting that I change the oc-item and related classes to height: 100%; position: relative; but none of those seemed to have the desired effect.
Given the naming, I assume this is an implementation of the owl carousel (https://owlcarousel2.github.io/OwlCarousel2/).
HTML, which includes many elements that are added-in via JS (not my JS, I'm using a package I purchased from Themeforest, called Canvas https://themes.semicolonweb.com/html/canvas/blocks.html... I think it's the one on the bottom of this page https://themes.semicolonweb.com/html/canvas/slider-owl.html the CSS and JS should be the same for this page as what I'm using):
<section id="content">
<div class="content-wrap p-0" id="content-wrap-logos">
<div class="container">
<div class="fancy-title title-center title-border m-4">
<h4><small>AS SEEN WITH</small></h4>
</div>
<div id="oc-images" class="owl-carousel image-carousel carousel-widget align-middle align-items-center owl-loaded owl-drag with-carousel-dots" data-items-xs="2" data-items-sm="3" data-items-lg="4" data-items-xl="5">
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 2369px;">
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="..." alt="...">
</div>
</div>
<div class="owl-item active" style="width: 243.2px; margin-right: 20px;">
<div class="oc-item">
<img src="i..." alt="...">
</div>
</div>
... etc ...
</div>
</div>
<div class="owl-nav">
<button type="button" role="presentation" class="owl-prev disabled">
<i class="icon-angle-left"></i>
</button>
<button type="button" role="presentation" class="owl-next">
<i class="icon-angle-right"></i>
</button>
</div>
<div class="owl-dots">
<button role="button" class="owl-dot active"><span></span></button>
<button role="button" class="owl-dot"><span></span></button></div></div>
</div>
</div>
</div>
</section>
Your are not shared the css code but here is the solution.
Give anchor display block , min-height and vertical-align middle. So image come vertically center.
.owl-item a {
display: block;
vertical-align: middle;
min-height: 38px;
}
Related
I am making a Instagram layout provided below, basically, the image/boxes have aspect ratio of 1:1 (just diffrent sizes), I am using Bootstrap 4 and SCSS mixin for aspect ratio.
My issue is I cannot align properly the 4 boxes surrounding the big box on the middle and the spacing on the middle box.
I used absolute positioning and flexbox, something like below but I am not sure if this is the right approach.
.ig {
&-wrapper {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
&-item-1,
&-item-2 {
width: 180px;
height: 180px;
#include aspect-ratio(180px, 180px);
}
}
Here is the demo link to what I have started
https://codepen.io/johndavemanuel/pen/WNQgzZO
Solved!
Switch to bootstrap columns instead of flexbox
<div class="row ig-row-1">
<div class="col-1 offset-3 ig-col">
<div class="ig-row-1-item-1 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
<div class="col-2">
<div class="ig-row-1-item-2 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
<div class="col-1">
<div class="ig-row-1-item-3 bg-primary">
<img src="https://source.unsplash.com/600x600/?boxing" alt="">
</div>
</div>
</div>
https://codepen.io/johndavemanuel0528/full/YzyOJvJ
Morning,
I am trying to put my bootstrap card element in a row by 3 cards, cards need to be of the same hight and width and have spacing in between them. For example if I have 7 card I will have 3 rows by three cards and the last row with one element will still be the same size as the card above it.
My code is:
<div class="container pt-2">
<div *ngFor="let g of carMultiArray">
<div class="row">
<div class="col-12">
<div class="card border-0 boxShadow no-padding col-lg-4 col-md-12 col-sm-12 col-xs-12" *ngFor="let t of g">
<a data-toggle="modal" href="'#'+ 'car'+t.Id" class="card-link" [attr.data-target]="'#'+ 'car'+t.Id" style="color:black; text-decoration: none;">
<img class="card-img-top rounded-0" src="{{t.MainImage}}">
</a>
<div class="card-body text-center">
<div class="my-arrow">
<img *ngIf="!t.Verified" src="../../icons/error.png">
<img *ngIf="t.Verified" src="../../icons/checked.png">
</div>
<h5 class="card-title">{{t.Title}} {{t.Kubatura}} {{t.BodyType}}</h5>
<h6 class="card-subtitle mb-2 text-muted">{{t.FuelType}} {{t.GearBox}} {{t.Horsepower}}
{{t.OdometerReading}}</h6>
<a [routerLink]="['/car', t.Id]" class="card-link">Daugiau</a>
<a class="card-link">{{t.City}}</a>
<a class="card-link">{{t.FirstRegistration}} </a>
</div>
</div>
</div>
</div>
</div>
</div>
My css (Though it does not influence the problem):
.boxShadow {
display: inline-block;
vertical-align: middle;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.card-body {
position: relative;
}
.my-arrow {
position: absolute;
top: -10%;
right: 10%;
}
.card-img-top {
width: 100%;
height: 17vw;
object-fit: cover;
}
.card{
width: 90%;
}
.no-padding {
padding-left: 0;
padding-right: 0;
}
The problem that I am having is that with the current code the cards do not have any margin or padding in between them when in one row. As you may have seen I have removed all padding in class .no-padding as if there is any padding even by default the images inside the card get smaller however the cards itself do not and they still touch each other, removing padding brings the cards to look the same and the way they suppose to, however they have no space in between them, adding margin, any margin, pushes the 3 card to a new line.
If I put the elements in a card-group instead of putting it in rows and columns, the result is they have no space in between them, adding some breaks the grid again. Putting it in card-deck results the last card which is one in a row to take up the whole space of the last row, trying to set the width of the cards in a card-deck, for some reason when the elements have 33% or 30% have different width, for example the 3 cards above will have the same width however the single card bellow will still be a little bit wider.
Adding the cards to card-columns, will result in having the cards different hights, trying to make it the same will result in images in the cards not aligning with each other.
While adding everything like you see right now in the code, in a row and then in col-12 allows to handle everything and the way I want it, it removes spacing between cards and as I said if adding margin it pushes the last 3rd card to new line if adding padding image gets smaller then the card.
How would I achieve my wanted result?
Hope this makes sense, if not, please ask.
I think you should use .justify-content-between class from bootstrap4 and try remove your display: inline-block attr from .boxShadow
FOR BOOTSTRAP REFER THIS LINK..
W3 bootstrap 4 card deck
FOR WITHOUT BOOTSTRAP REFER THE CODE BELOW..
.parent{
text-align:center;
}
.padding_maker{
display:inline-block;
padding:10px;
}
.children{
display:inline-block;
background-color:black;
height:300px;
width:150px;
color:white;
}
<div class="parent">
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
<div class="padding_maker">
<div class="children">
<h3>Your Card</h3>
</div>
</div>
</div>
I have a problem with button text. when I resize, its text remains no more in center on some screen sizes as in these images.
In iPad, it is good
In iPhone, it is ugly, not centered position
Html
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
CSS
.img-wrapper {
position: relative;
}
.img-overlay {
position: absolute;
bottom: 31%;
left: 13.5%;
width: 34%;
height: 4%;
background-color: red;
}
.testButton {
font-size: 3vw;
line-height: 20px;
}
.fill-container {
width: 100%;
height: 100%;
}
Please let me know what should I make right to do it right.
Regards
The solution is simple: If you don't try to prevent the native Bootstrap 4 classes from working by applying custom css that breaks them, then adding the text-center class is all you need.
Here's a code snippet that shows this class perfectly doing its job:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div #fade class="img-wrapper">
<img [src]="imgPath" class="img-fluid">
<div class="img-overlay text-center">
<button routerLink="/test"
class="btn btn-success fill-container testButton">
TEST
</button>
</div>
</div>
</div>
</div>
</div>
However, if you start adding css hacks that break Bootstrap, then, of course, you'll need even more css hacks to fix the problems caused by the original css hacks.
In this case, I recommend going back to square one, removing all of your custom css and using native Bootstrap 4 classes to accomplish what you need because native Bootstrap 4 classes can do almost everything you'll ever need in terms of layout. No need for any css hacks.
I'm building a website using Bootstrap and I'm now trying to make something like this:
===========================================================
| #################### |
| #################### Big Title |
| ##THIS IS AN IMAGE## |
| #################### |
| #################### Read more |
===========================================================
The problem is that I can't align the ReadMore button to the bottom. I tried using the tips in this SO answer, but to no avail. I created a fiddle of my code here and I'll paste my code below.
Does anybody know what I'm doing wrong here? All tips are welcome!
My HTML looks like this:
<div class="container">
<div class="row">
<div class="col-sm-8">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img class="img-responsive" src="image.png">
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
<div class="col-sm-4"><div class="row"></div></div>
</div>
</div>
and my css:
#media (min-width: 768px ) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
}
Try this:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
#media (min-width: 768px) {
.row {
position: relative;
}
#read-more {
position: absolute;
bottom: 0;
right: 0;
}
.col-sm-7 {
position: absolute;
width: 100%;
height: 100%;
}
}
<div class="container">
<div class="row">
<div class="col-sm-12"> <a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</div>
</article>
</a>
</div>
</div>
</div>
Here's a fiddle
Is it what you were looking for?
Sometimes you have to work against bootstrap's floats to get what you're looking for, basically by not using them (pulls, etc). I've updated your fiddle, and I believe it's close to what you were asking. Another issue was your #media was throwing things off due to the size of the result window.
Updated Fiddle
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.rel {
position: relative;
height:300px;
width: 600px;
}
.read-more {
position: absolute;
bottom: 0;
right: 0;
}
.background {
background-image: url("http://placehold.it/600x300");
height: 300px;
width: 600px;
}
}
<div class="container rel"> <a href="/thelink">
<article class="property-ad">
<div class="background img-responsive">
<div class="title">Big Title</div>
</div>
</article>
<button class="btn btn-default read-more">Read more</button>
</a>
</div>
This is due to the right panel only being the height of the content, in this case the title and the button.
To counter this, you need to set a height.
I added the class box-height to the html and, as the image seems to max at 141px [At least for me, W7 PC], I set the container height to that height (141px)
You can see a working example here; http://jsfiddle.net/8pLjfq5u/18/
Without the height being given, the button will just fix itself to the height of the container, which in this case is set by the title height etc.
Edit
I would advise against setting css changes in bootstrap classes in this instance.
At some point, that change to the core CSS will bite you in the behind, when you need it to work as intended in the original build.
Second Edit
It would appear that if you simply move the button into a col-sm-12 div, that you can get the desired result.
This also scales into mobile view too, without the need to add additional classes or css attributes.
http://jsfiddle.net/8pLjfq5u/20/
There are two possible problems here - depending on what exaclty you want to achieve!
(I guess it's the second one you are looking for!)
First:
if you want to position your read more at the bottom right corner of the whole page:
You have position:relative in your CSS for .row.
This means all elements inside an element with class row will be positioned relative to this element - so your read more can only be positioned inside it with your CSS (with negative values for right and bottom it can be outside, but still relative to this element).
Second:
If you want to position your read more at the the bottom right corner of the article
The parent element to your #read-more has only height of 20px, because the text Big Title in the div above is only of that height.
As your #read-more element is positioned absolute, it doesn't contribute to the height.
I tried setting height: 100%; on the parent element of #read-more, but it doesn't work.
So, it seems, you will have to put your #read-more elemnt outside of its parent div, directly into the article, like this:
<div class="container">
<div class="row">
<div class="col-sm-12">
<a href="/thelink">
<article class="row property-ad">
<div class="col-sm-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7">
<div class="title">Big Title</div>
</div>
<button id="read-more" class="btn btn-default pull-right">Read more</button>
</article>
</a>
</div>
</div>
I added "col-xs" classes to your markup and it generated the desired display based on what you showed in your question
<div class="col-sm-5 col-xs-5">
<img src="//placehold.it/600x300" class="img-responsive"/>
</div>
<div class="col-sm-7 col-xs-7">
<div class="title">Big Title</div>
If you plug that into your fiddle it displays the way you want with your media query. When you really shrink it down though it get's pretty illegible at that point.
Maybe you want to adjust the media query to display differently for "sm" and "xs".
Try this:
<div class="d-flex justify-content-end">
<button class="btn" type="submit">Connect</button>
</div>
If you go to the following page: play.yoozon.com
and do an inspect element on the gallery in the section titled "Screenshots", you should see the widths and margins I've used. For some reason, the group of screenshots seem to be shifted to the left, and I can't seem to center them without using padding, which adds extra space to the entire page and looks bad on mobile.
The reason why I haven't included code here is because I can't figure out which div is the relevant one for this problem, and a lot of it makes use of bootstrap, which would take up a ton of space here to include everything.
your container: .owl-wrapper has a width of 1232px while it's parent seems to be significantly smaller and set to overflow: hidden. Change .owl-wrapper to width: 100%. Then remove float: left from .owl-item and add display: inline-block instead. That should do it.
Replace your column with this..
<div class="col-sm-12 col-md-12 col-lg-12" style="width: 100%;">
<div id="owl-gallery" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer">
<div class="owl-wrapper" style="width: 100%; left: 0px; display: block;">
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot1#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot1#2x.png">
<img src="images/screenshot1.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot3#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot3#2x.jpg">
<img src="images/screenshot3.jpg" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot2#2x.png" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot2#2x.png">
<img src="images/screenshot2.png" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
<div class="owl-item" style="width: 154px;">
<div class="item"><a href="images/screenshot4#2x.jpg" data-lightbox-
gallery="gallery1" data-lightbox-hidpi="images/screenshot4#2x.jpg">
<img src="images/screenshot4.JPG" class="img-responsive img-rounded"
alt="img"></a></div>
</div>
</div>
</div>
<div class="owl-controls clickable" style="display: none;">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>
I have not worked with Bootstrap, but I know HTML & CSS.
I would set the width of your owl-wrapper div to 750px (this should be large enough to contain the 4 owl-item divs set to their current width of 182px). Then change the display to inline-block, the position to relative, and use margins to center like so:
<div class="owl-wrapper" style="width: 750px; position: relative; margin: 0 auto; display: inline-block; -webkit-transition: all 0ms ease; transition: all 0ms ease;">
Also, if you want backwards compatibility with older versions of firefox, you may still wish to include the animation code with -moz prefix as well.
I hope that works for you! :)