I have problem with responsive in bootstrap.
When I have over four cards they are not "jump" into next row. They only Impose itself andthis same is when I'm resizing viev.
What Can I do to fix it? I'm fresh in bootstrap and maybe I'm doing something wrong with CSS file.
Can you help me how fix it?
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="container-fluid" style="text-align: center; background-color: green;">
<h1>Test Page</h1>
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-12" style="background-color: green; line-height: 80px;">
<p>Some Text</p>
</div>
</div>
</div>
<div class="container col-md-12 col-sm-12 col-xs-12" >
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<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>
Button
</div>
<div class="back " style="background-color: grey;">
<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>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<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>
Button
</div>
<div class="back " style="background-color: grey;">
<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>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<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>
Button
</div>
<div class="back " style="background-color: grey;">
<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>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<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>
Button
</div>
<div class="back " style="background-color: grey;">
<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>
Button
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-6" >
<div class="flip-container " ontouchstart="this.classList.toggle('hover');" >
<div class="card-block" >
<div class="flipper " >
<div class="front " style="background-color: grey;" >
<img class="img-fluid col-sm-12 col-xs-12" src="image.jpg" alt="Card image cap" style="padding: 5px;">
<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>
Button
</div>
<div class="back " style="background-color: grey;">
<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>
Button
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm displaying card decks in order to show a set of articles stored in a database. This is the pretty simple piece of code I'm using:
HTML
<div class="row">
<div class="card-deck">
<template is="dom-repeat" items="{{articles}}" as="article">
<div class="col-12 col-md-4 mb-md-5">
<div
class="card"
on-tap="showViewer"
data-id$="[[article.id]]"
>
<img
class="card-img-top img-fluid vertical-image"
src$="{{getArticleImage(article)}}"
onerror$="this.src='{{defaultimage}}'"
alt="{{getArticleDescription(article)}}"
/>
<div class="card-body d-flex flex-column justify-content-center py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article)}}>
<span class="medium-text">
{{getSources(article)}}
</span>
</div>
<p class="card-text primary-headline medium-text">
{{article.schema:headline}}
</p>
</div>
</div>
</div>
</template>
</div>
</div>
CSS
.vertical-image {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
.icon-sm {
height: 20px;
width: auto;
}
.medium-text {
font-family: Raleway-Medium;
}
.primary-headline {
font-size: 25px;
line-height: 25px;
text-align: justify;
}
According to Bootstrap documentation, using the card-deck class should make all the cards in the deck to have equal width and height. However, I'm not acheiving that behaviour. Here you are a picture where you can see what I am getting.
What would be the correct way to achieve that all the images in the cards and all the cards have the same height and width?
Check this. Hope it helps.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4 py-2">
<div class="card card-body h-100">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 text-white bg-danger">
<div class="card-body">
<h3 class="card-title">Danger</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block, but I have a little more text!
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 border-primary">
<div class="card-body">
<h3 class="card-title">Primary</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card h-100 card-body">
Card. I'm just a simple card-block.
</div>
</div>
<div class="col-sm-4 py-2">
<div class="card text-white bg-primary">
<div class="card-body">
<h3 class="card-title">Hello</h3>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Outline
</div>
</div>
</div>
</div>
</div>
I have four Bootstrap 4 cards lined up, but the title for just one of the cards wraps to a second line. How can I code this so that all four card titles are flush bottom?
I tried setting the height of each card to a certain pixel height and then applied vertical-align: bottom, but that's not working.
<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">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Here's a Codepen: https://codepen.io/Codewalker/pen/RXxaVM
How can I code this so that all four card titles are flush bottom.
Case 1: If the title of your content is not dynamic.
If you want to make the card flush to bottom. You need to set its height and use flexbox to flush it to bottom.
See the code below.
.card-title-cont{
height: 50px;
display:flex;
justify-content: flex-start;
align-items: flex-end;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FIRST CARD</h5>
</div>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">SECOND CARD</h5>
</div>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
</div>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<div class="card-title-cont">
<h5 class="card-title">FOURTH CARD</h5>
</div>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Case 2: If the title of your content is dynamic.
I suggest you need to style your title to text-overflow: ellipsis; since the content is dynamic.
.card-title{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card-group">
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FIRST CARD</h5>
<hr>
<p class="card-text">Tech virtual drone online browser platform through in a system. Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">SECOND CARD</h5>
<hr>
<p class="card-text">But stream software offline. Professor install angel sector anywhere create at components smart.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">THIRD CARD WITH MUCH LONGER TITLE</h5>
<hr>
<p class="card-text">Document fab developers encryption smartphone powered, bespoke blockstack edit atoms.</p>
</div>
</div>
<div class="card img-fluid">
<img class="card-img-top" src="https://via.placeholder.com/260x313.png?text=placeholder+image" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h5 class="card-title">FOURTH CARD</h5>
<hr>
<p class="card-text">Now digital designs id anywhere atoms. Now strategy startups documents designs. Venture crypto adopters niche. Video algorithm system ultra-private policies engineering.</p>
</div>
</div>
</div>
</div>
Hopes this helps.
I assume the content for your card's title is dynamic so I don't think you can really foresee how much height is enough.
I would just go for "truncating the text with an ellipsis" approach with a title:
<h5 class="card-title text-truncate" title="THIRD CARD WITH MUCH LONGER TITLE">
THIRD CARD WITH MUCH LONGER TITLE
</h5>
<hr>
demo: https://jsfiddle.net/davidliang2008/fdwshkzo/5/
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 have a bootstrap card Which is used as a link.
Trying to wrap it with <a> changes all of the styling of the card.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<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>
<a href="">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<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>
</a>
How should I wrap the card in order to preserve its looks and use it as a link?
If you are using Bootstrap 4.3 you don't have to wrap card with <a> tag, but instead put it inside card-body, and use stretched-link class. This is much cleaner way.
Visit https://getbootstrap.com/docs/4.3/utilities/stretched-link/ for more details.
If you can't use Bootstrap 4.3 this is styling for stretched-link class:
.stretched-link::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: auto;
content: "";
background-color: rgba(0,0,0,0);
}
Here is the example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<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" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Alternative</h5>
<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>
Its because <a> tags has a default blue color from user agent browser. Try to add a class to the link and set color:inherit to that class
a.custom-card,
a.custom-card:hover {
color: inherit;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<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>
<a href="" class="custom-card">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<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>
</a>
Instead of wrapping the .card in a <a>, you could use a <a> as the card element instead of a <div>.
This will allow you to easily override the CSS to remove the default <a> styles:
a.card,
a.card:hover {
color: #212529;
text-decoration: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Normal card</h5>
<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>
<a href="#" class="card" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<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>
</a>
Very simple with Stretched link
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<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>
Go somewhere
</div>
</div>
bootstrap make it easy with Stretched link
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<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>
Go somewhere
</div>
</div>
You can put text-dark utility class to the element to have the same appearance.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a href="">
<div class="card text-dark" style="width: 15rem; display: inline-block">
<img class="card-img-top" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=318%C3%97180&w=318&h=180" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Wrapped with a tag</h5>
<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>
</a>
Try to add Display: Block to the link itself. Use your browsers Developer Tools (F12) and hover over the link to see if you need to add Height:auto perhaps.
I had the same problem. I fixed it with this trick. You can specify the color whatever you like and put a 00 at the end of the color code to make it transparent this way you make the style invisible. e.g.
<a href="" style="color: #83577500; ">
Just add "cursor: pointer;" to your style
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.