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.
Related
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
Thanks to the many questions and answers on stackoverflow about card-columns, I could set tiled cols in row but it looks like some kind of padding or margin or else is breaking bootstrap's 12 columns per row "rule".
I am trying to achieve a masonry / pinterest tile layout, with Tile 1 and Tile 2 columns going under the description column, white text remains under picture profile.
In the below example, when I set the width of the description col to col-xl-4 makes it remain under the profile picture col instead of next to it.
Moreover, the description column takes the same height as the profile picture column.
<div class="container-fluid">
<div class="row card-columns">
<div class="col-xl-8 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-xl-4 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
<div class="col-xl-8 card">
<div class="card-body">
<h2>Text</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 1</h2>
</div>
</div>
<div class="col-xl-2 card">
<div class="card-body">
<h2>Tile 2</h2>
</div>
</div>
</div>
</div>
How can I fix this? What am I missing here?
Tried it on this fiddle https://jsfiddle.net/pba8h4dk/.
<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="col-lg-9 card">
<div class="card-body">
<h2>Profile picture</h2>
<img src="https://via.placeholder.com/900x500.jpg" alt="" class="img-fluid rounded">
</div>
</div>
<div class="col-lg-3 card">
<div class="card-body">
<h2>Description</h2>
</div>
</div>
</div>
</div>
Removing card-columns class did the trick (and obviously making sure your screen is sm/md/lg/)
I am facing an issue while trying to create a page contain N cards(single or multiple)
while in multiple all cards are as I want them to be, when it is a single card it shrinks and is not presented as I want it to be :
and a single card looks like this:
I am trying to understand what I am doing wrong.
this is the card HTML :
<div class="card text-white bg-danger">
<div class="card-header">
<div class="row">
<div class="col col-xs-3">
<i class="fa fa-euro">{{expenseItem.amount}}</i>
</div>
<div class="col col-xs-9 text-right">
<div class="d-block huge">{{count}}</div>
<div class="d-block">{{label}}</div>
<div class="card-body">
<div class="row">
</div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<span class="float-left">Details </span>
<a href="javascript:void(0)" class="float-left card-inverse">
<span ><i class="fa fa-arrow-circle-left"></i></span>
</a>
</div>
</div>
and it is located inside acomponent that should be a list :
<div class="container">
<div class="row">
<hr>
</div>
<div class="row">
<div class="page-header">
<h1 >Comp header</h1>
<h4> total epenses per month {{expenses.total}}</h4>
<app-pagination [paginationSize]="limit" [total]="total" (requierdPage)="getPage($event)"></app-pagination>
</div>
</div>
<hr>
<!--<div class="row" >
<div class="col-xs-3 col-lg-4" *ngFor="let expense of expensesList" >
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>-->
<!--<div class="container">
<div class="row">
<div class="card-deck" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
<!– <div class="card">
<div class="card-block">
<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.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>-->
<div class="row" >
<div class="col-sm-6 col-xs-6 col-xl-6 col-md-6 col-lg-6" *ngFor="let expense of expensesList">
<app-expnses-item [expenseItem]="expense"></app-expnses-item>
</div>
</div>
<div class="row add">
<div class="col-xs-1 offset-xs-1 align-self-sm-end">
<i class="fa fa-plus-square-o fa-4x" aria-hidden="true" (click)="Uopen()"></i>
</div>
<app-add-expense (onFormSubmitted)="onDataSubmit($event)"></app-add-expense>
</div>
</div>
what am I missing here?
The .card-deck should be placed directly in container instead of row. Remove the .row as it's flexbox, and should be used only to contain grid columns (col-*) which you're not using for the .card-deck.
<div class="container">
<div class="card-deck">
<div class="card text-white bg-danger">
</div>
<div class="card text-white bg-danger">
</div>
(repeat 1..n cards)
</div>
</div>
https://www.codeply.com/go/Gmch54KdgL
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.
I am using bootstrap 4 alpha 6 and noticed a strange behavior when using a grid inside the body of a card without card-block.
<div class="container">
<h5>
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
</h5>
<h4>
row inside card "body" with class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-block">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<h4>
row inside card "body" without class card-block
</h4>
<div class="card">
<div class="card-header">
Featured
</div>
<div class="foo">
<div class="row">
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
<div class="col-md-2">
<div class="photo-box">
<img class="img-fluid" src="http://placehold.it/400x300" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
I don't want to use padding for the body of my card
The building block of a card is the .card-block. Use it whenever you need a padded section within a card.
but my grid comes out of the body of the card.
Is a desired behavior or is a bug to fix?
Thank you
JSFiddle (open full view)
It is the desired behavior of the grid system. The .row has a negative margin to counteract the padding of grid columns, so that the leftmost and rightmost columns have proper alignment with the edge of the the viewport (or the edge of the .row's container). Also, while the negative margin is there, the content of each grid column is still within the card because of the padding in each column.
Normally, the .row is placed inside a .container or .container-fluid that has 15px padding to counteract the negative margin. .card-block does have padding, but it's not 15px which is why the .card-block does not perfectly align the card's grid content to the edge of your card.
So, I'm not sure what you're trying to achieve, but there are 2 other ways you could use the grid inside the card. One way, is to use a .container-fluid so that the outer grid columns align perfectly with the edge of the card...
<div class="card">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
</div>
Another is to use a gutterless row (.no-gutters). This would remove the negative margin from the row, and padding from all of the columns. The content of each column then takes the entire width of the column.
<div class="card">
<div class="row no-gutters">
<div class="col-md-2">
..
</div>
<div class="col-md-2">
..
</div>
..
</div>
</div>
http://www.codeply.com/go/vE2EdNPQwV