I'm trying to have a center text over image. I've used mx-auto to Horizontal centering my overlay text and use align-middle for a Vertical alignment. But the vertical alignment didn't work. Does somebody know why ?
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="mx-auto">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
Just use my-auto for vertical center...
<div class="card">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="my-auto mx-auto text-center">
<h4 class="card-title">Animal Farm</h4>
<h6 class="text">George Orwell</h6>
<p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
http://codeply.com/go/ZQM4ANFcXC
align-middle will work on display: table or display: inline elements.
Also see this similar question
You don't need .mx-auto. You can just use .justify-content-center, .align-items-center and .flex-column on the parent. https://v4-alpha.getbootstrap.com/utilities/flexbox/
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex justify-content-center align-items-center flex-column">
<h4 class="card-title align-middle">Animal Farm</h4>
<h6 class="text align-middle">George Orwell</h6>
<p class="card-text align-middle">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
Try it with this code, here:
<div class="card ">
<img class="img-fluid card-img" src="https://snap-photos.s3.amazonaws.com/img-thumbs/960w/1U2EGZ07GU.jpg" alt="Deer in nature">
<div class="card-img-overlay d-flex">
<div class="mx-auto" style="margin-top: auto;margin-bottom: auto;">
<h4 class="card-title">Animal Farm</h4>
<h6 class="text">George Orwell</h6>
<p class="card-text">Tired of their servitude to man, a group of farm animals revolt and establish their own society...</p>
</div>
</div>
</div>
Basically just added style="margin-top: auto;margin-bottom: auto;" to the div with mx-auto class.
Related
I am new to front end and struggling when resizing the screen .
I am using 4 cards(Performance,Quality,Availability,Availability) in a card-group class and wants to place two cards in a row when screen is on medium and 1 card in a row when screen is on small .
Below is my code
<div class="row">
<div class="card-group col-lg-8 col-md-12 col-sm-12">
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Performance</h4>
</div>
<div class="card-body">
<div id="gauge1"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Quality</h4>
</div>
<div class="card-body">
<div id="gauge2"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">Availability</h4>
</div>
<div class="card-body">
<div id="gauge3"></div>
</div>
</div>
<div class="card mb-4 mr-2 ml-2">
<div class="card-header">
<h4 class="mb-0">OEE
</h4>
</div>
<div class="card-body">
<div id="gauge4" style="text-align: center"></div>
<div id="dvLabel" style="text-align: center; position: absolute; top: 52%; right: 48%; font-size: 25px">
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">Breakdown Hours</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= Breakdown_Hours %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTBF</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTBF %></h3>
</div>
</div>
</div>
<div class="card mb-4 mr-2" style="height: 119px">
<div class="card-header mt-4">
<h4 class="mb-0">MTTR</h4>
</div>
<div class="card-body ml-3 mr-3 text-center" style="background-color: #FFFFFF; color: #081A51; height: 50%">
<div>
<h3 class="mb-0"><%= MTTR %></h3>
</div>
</div>
</div>
</div>
</div>
It is looking like this in a small screen
wherein I wanted to have these 4 cards placed below one other on small screen and 2 cards in case of medium. I am struggling to find the missing link .
Your second group misses the card-group class. Add it and the last three cards will be positioned side by side. If you want them be aligned with the ones on first row, you can just insert and empty card.
I've made bootstrap cards that appear on two different pages. One on the landing page which I want to increase the spacing and one on the books page which I want to increase the width of the cards. Here's the code that I've written and used in both pages. The only thing that I've changed is on the 6th line from '...col-lg-3' to '...col-lg-2'. If anyone can assist me in adding the spacing and increasing the with of the card, help me if you can. d-flex justify-content-evenly doesn't work when i use col-lg-3.
<section id="about" class="ts-block" >
<div id="cards_landscape_wrap-2">
<div class="container " style="width:70%">
<div class="row d-flex justify-content-around">
#foreach($products as $product)
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer ">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
</div>
</section>
Try including d-flex justify-content-around to a direct parent containing the cards instead of
<div class="row d-flex justify-content-around">. And add margin to the card.
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
<a href="{{route("products.show",$product->slug)}}">
<div class="card-flyer m-2">
<div class="text-box">
<div class="image-box">
<img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
</div>
<div class="card-footer">
<i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
<span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
<span class="mybuttonoverlap btn btn-primary">View</span>
</div>
</div>
</div>
</a>
</div
I thought what I'm trying to do would be pretty easy to do but I just can't make it work.
I tried to do pull-left on bootstrap cards and panels and it's not working the way I want it to...
Here is a picture of what I'd like to acheive
Example
Heres code that almost works
<div class="card text-center" *ngFor="let event of eventActivities">
<div class="card-header pull-left">
<img src="..." alt="">
Title </div>
<div class="card-block">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="card-footer text-muted">
FOOTER
</div>
</div>
There are a few different ways you could do this. Here's one way using the flex-row and flex-wrap utility classes to change the layout of elements inside the card...
https://www.codeply.com/go/l1KAQtjjbA
<div class="card flex-row flex-wrap">
<div class="card-header border-0">
<img src="//placehold.it/200" alt="" />
</div>
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
<div class="w-100"></div>
<div class="card-footer w-100 text-muted">
FOOTER
</div>
</div>
Here's another approach using the grid...
<div class="card">
<div class="row no-gutters">
<div class="col-auto">
<img src="//placehold.it/200" class="img-fluid" alt="">
</div>
<div class="col">
<div class="card-block px-2">
<h4 class="card-title">Title</h4>
<p class="card-text">Description</p>
BUTTON
</div>
</div>
</div>
<div class="card-footer w-100 text-muted">
Footer stating cats are CUTE little animals
</div>
</div>
https://www.codeply.com/go/l1KAQtjjbA
I'm not sure why you have text-center as nothing it centered in the desired example image.
HTML:
<div class="card">
<div class="card-horizontal">
<div class="img-square-wrapper">
<img class="" src="http://via.placeholder.com/300x180" alt="Card image cap">
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
CSS:
.card-horizontal {
display: flex;
flex: 1 1 auto;
}
Result:
Keep in mind that the class pull-left is now float-left in Bootstrap version 4.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-3">
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="align-self-end">Text I want at bottom</div>
</div>
</div>
</div>
I am unable to get the text in the last div by applying this class align-self-end to the bottom of the image. I understand that flex has been applied to the .card-img-overlay div with the direction of column then why am I unable to get the div to the bottom of the image?
The card-img-overlay div isn't display:flex.
You can do this by adding the d-flex flex-column classes to it, and use mt-auto to push the text to the bottom.
https://www.codeply.com/go/SRdCTDDoRr
<div class="card bg-dark text-white">
<img class="card-img" src="http://via.placeholder.com/300x340" alt="Card image">
<div class="card-img-overlay d-flex flex-column">
<h5 class="card-title">Title</h5>
<h3 class="card-text font-weight-bold"><span class="mr-auto">Some other title here</span></h3>
<div class="mt-auto">Text I want at bottom</div>
</div>
</div>
I am struggling to get the link on the image itself to work. So far I could only manage to get the link on the text overlay at the bottom over the image, but not on the rest of the image. Every time I try something it breaks the layout of the card and the overlay does not work anymore. Any idea?
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<div class="card text-white">
<img src="...image" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>
If you want, you can try like this: thats a simple trick but solve your issue
<div class="card text-white">
<img src="https://dummyimage.com/350x450/" alt="Angel #1" class="img-fluid" style="" />
<a href="...link">
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</a>
</div>
Solution 1
By changing HTML code structure
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<a href="...link"><div class="card text-white">
<img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>
</a>
Solution: 2
With JQuery
$(".card").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
.bg-semitransparent { background-color: rgba(60,60,60,0.6); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card text-white">
<img src="https://dummyimage.com/450x450/" alt="Angel #1" class="img-fluid" style="" />
<div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
<div class="card-text border-0 bg-semitransparent text-center">
Anchor Text
</div>
</div>
</div>