I have made a section with cards it works well on firefox chrome ie microsoft edge but it breaks on ie 11
on mozilla I get this result
and on ie11 I get this result
codepen link
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet"/>
<section class="image2">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div></div>
<div class="col-md-6 col-lg-6 no-padding"><div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" class="img-fluid" alt="Responsive image">
<div class="card-img-overlay d-flex">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div></div>
</div>
</div>
</div>
</section>
Someone know why I have this pb on ie11 ?
Remove utility class d-flex from element with class .card-img-overlay
Remove utility class img-fluid from img element, you may create a new class and give it width:100% and height:100%
Note you are missing class .container as a parent which causing horizontal scrollbar to show.
img {width:100%; height:100%}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet" />
<section class="image2 container">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse" style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="row no-margin no-padding">
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
<p class="card-text">This </p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 no-padding">
<div class="card card-inverse " style="background-color: #333; border-color: #333;">
<img src="http://lorempicsum.com/rio/800/500/4" alt="Responsive image">
<div class="card-img-overlay">
<div class="card m-4 ricci my-auto mx-auto text-center">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="card-header col-6 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border">
<h5 class="card-title">1234567899</h5>
</div>
<div class="card-body col-12 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
There's a lot of empty space in card. I need it as:
You can do that by adding class="p-0 my-auto" to remove padding and to center vertical. Below is the working snippet for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 63px;
width: 100%;
object-fit: cover;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
.img-container {
height: 80px;
width: 100%;
object-fit: cover;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
Solution-2: Answered as per the question in the comment.Giving fixed height to col. Below is the solution for the same
.card-body {
display: flex;
align-items: center;
justify-content: center;
}
.card-body.col-6 {
background: red
}
#media(min-width:768px) {
.card-title {
font-size: 3vw;
text-align: center;
word-break: break-all;
}
}
#media(max-width:767px) {
.card-title {
font-size: 8.5vw;
text-align: center;
word-break: break-all;
}
}
.col-6 {
height:65px;
}
.img-fluid {
height:100%!important;
}
.card-header.col-6{
background: black
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
<div class="card bg-light col-md-4">
<div class="row">
<div class="card-header col-6 border p-0 text-center">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="card-body col-6 border p-0 ">
<h5 class="card-title text-center">1234567899</h5>
</div>
<div class="card-body col-12 border p-0">
Go somewhere
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
.card-title {
margin-bottom: 0;
}
</style>
<div class="row">
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="card bg-light col-sm-3">
<div class="row">
<div class="col-4 p-0 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col p-0 border text-center">
<h5 class="card-title">1234567899</h5>
</div>
<div class=" col-12 p-0 border">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
<section class="test">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
<div class="card bg-light">
<div class="card-body p-0">
<div class="row no-gutters">
<div class="col-lg-5 border">
<img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
</div>
<div class="col-lg-7 border px-3 pt-2">
<h5 class="card-title">1234567899</h5>
</div>
</div>
</div>
<div class="card-footer">
<h5 class="card-title">Go somewhere</h5>
</div>
</div>
</div>
</div>
</div>
</section>
I want to place the two cards next to each other (horizontally) but currently they are vertically aligned. That is I want to place the Heading 1 card next to Heading 2 card even though I used some margin it shift only in the same place horizontally not vertically.
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
You can use Bootstrap’s grid to achieve this:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 1</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
<div class="col-sm-6 d-flex justify-content-center">
<div class="card" style="width: 20rem;>
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Heading 2</h5>
<p class="card-text">some text</p>
a button
</div>
</div>
</div>
</div>
</div>
I want to put a div on the side of the cards, i tried to put a div on the cards <div class="col-lg-8"> and a col-lg-4 on the div that should float on the right of cards, but when i add the col-lg-8 and col-lg-4 the cards lose the inline layout, and the the div that should float on the right, does not appear.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
<div class="col-3">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
</div>
<div class="col-lg-4" style="background-color: blue">
</div>
</div>
</div>
How it should be:
Given block of code was
<div class="col-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/750x325" alt="Card image cap">
<h4 class="card-title">Card title</h4>
</div>
</div>
In order to match the requirements, I added float-left class to <div class="col-4">.
The div to the right with blue background was also rendered.
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.