I'm trying to make a masonry cards and I'm using bootstrap 4 for this, everything is okay until I add the card-columns class.
My html is:
<div class="wrapper">
<div class="container-fluid">
<div class="col-12">
<div class="row">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
I'm using PHP get the information and print it as a card.
Reference for card-columns in Bootstrap.
If you want to restrict cards per column just use a structure as:
.container > .row > .col-xx
Ref:
https://www.codeply.com/go/AP1MpYKY2H/bootstrap-4-card-deck-columns-per-row
If you don't have a problem with restricting per row
.container-fluid > .card-columns > .cards (looped) should be enough.
Thank you
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
you have declared the col-12 div before declaring the row
Its because the php function which is printing out the cards have <div class="col-md-2">, and with card-columns its not possible because bootstrap is setting them to responsive eg: 3 columns or 4, I removed the col-md and now everything is okay.
This is your code what you want, You just repeat the "card" class block, if you want to declare different columns style just create a baby change in css, don't need to declare col class in inside of card-columns
column-count: 3; // the count number is your choose, depend what column you want
<div class="card-columns">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Card text here read more..
</p>
<p class="card-text">
<small class="text-muted">Author: </small>
</p>
</div>
</div>
</div>
Related
I need to get the grid. 3-4 cards in a row. I am using row div but you are using data as column. Why?
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
enter image description here
You seem to have each column wrapped in its own row, hence they fall underneath each other. Try putting both columns in the same row element. Something like this might solve you problem
<div class="row">
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
{{$item->quantity}}<br>
{{$item->price}}<br>
{{$item->dish->name}}<br>
<hr>
</h3>
</div>
</div>
EDIT:
If you want to use a for/foreach loop, your code will look something like this:
<div class="row">
#foreach(var item in data){
<div class="col-md-4">
<div class="d-flex"></div>
<div class="separator-solid"></div>
<h3 class="card-title">
#item.Quantity<br>
#item.Price<br>
#item.Name<br>
<hr>
</h3>
</div>
}
</div>
I want to create cards in a loop runtime but the card show vertically align eachother i gave the col-md-4 but it didnot work
enter code here
<div class="row-fluid border mt-3">
<div *ngFor="let data of allWidgets">
<div class="col-md-4 border mt-3">
<div class="card">
<div class="img1">
<img src="https://images.havenly.com/unsafe/550x334/filters:quality(50)/https://s3.amazonaws.com/static.havenly.com/assets/2a35d539-e889-405e-b495-815aa33f65ea" alt="">
</div>
<div class="img2">
<img src="https://images.havenly.com/unsafe/180x180/filters:quality(50)/https://s3.amazonaws.com/havenlydesignerphotos/13078-profile-eb69eheadshot02.jpg" alt="">
</div>
<div class="mian-text mt-0">
<p>{{data.name}}</p>
<p><small>{{data.description}} </small> </p>
View Profile <span style="color: lightgray;">|</span> Select Cherise
</div>
</div>
</div>
</div>
you must use the ngFor not on the first div but on the second like this :
<div class="col-md-4 border mt-3" *ngFor="let data of allWidgets">
this is the solution of your problem.
if you want to create a good angular card you must see:https://mdbootstrap.com/docs/angular/
is the most used site in angular.
have a nice day :)
I am working on moving chunks of code from being static code within my Views components into actual reusable Components.
I have moved what is called my TrainerCards code into a separate component and the cards used to display nicely as 3 to a row when they were hard coded in my TrainerIndex.vue, but now that they are being passed as a component, they only render as 1 per row, and I don't know why.
TrainerIndex.vue -
<div class="row">
<div class="col-md-4">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
</div>
`
TrainerCards.vue -
<template>
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</template>
Any idea on how to get them to display properly?
Your col-md-4 class is what makes them fill 1/3 of the area, but that is now outside your component and not repeating. Move that div inside:
<div class="row">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
<template>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</div>
</template>
I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.
My code:
<div class="row">
<div class="col-md-12">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
?>.</p>
</div>
</div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
?></p>
</div>
</div>
</div>
</div>
I tried to give it a class of d-inline but it's not working...
The cards I'm using https://mdbootstrap.com/components/panels/
Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:
<div class=card-deck>
<!-- First Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
<!-- Second Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
</div>
Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.
One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.
The following code shows two cards, side by side in desktop browser window size.
<div class="row">
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
</div>
</div>
</div>
</div>
I am currently using bootstrap on a website which is displaying an ecommerce store.
The current layout is 3 columns of items within 4 rows, but I am wanting to implement a button which will change it to 2 columns.
I have done so, however the code seems to be causing some issues in that the layout changes to
Two Items
One Item
Two Items
One Item
Each one Item row has a large area of white space where an item could go.
The Code below shows one "Row" which is in the three column layout. I have used javascript which changes the class 'col-sm-4' to 'col-sm-6'. Where is my mistake here?
<div class="row"><!-- row 2 -->
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/raina_parka.png" class="product-image">
</div>
<div class="row product-status">
<span class="products-status-sale">Sale</span>
</div>
<div class="row">
<p class="product-name col-sm-12"<p>Raina Waterproof Parka</p>
</div>
<div class="row product-price">
<span>£99.00</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/april_jacket.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p class="product-name col-sm-12">April Waterproof Front Pocket Jacket</p>
</div>
<div class="row product-price">
<span>£99.95</span>
</div>
</div>
<div class="col-sm-4 product-category-display">
<div class="row">
<img src="assets/img/products/women/jackets_coats/free_delivery.png" class="product-image">
</div>
<div class="row product-status">
<span></span>
</div>
<div class="row">
<p></p>
</div>
<div class="row product-price">
<span></span>
</div>
</div>
</div><!-- end row 2 -->
The columns should only add upto 12. When you change 4 to 6 its becomes 18.
<div class="row">
<div class="col-lg-4"></div><div class="col-lg-4"></div><div class="col-lg-4"></div>
</div>
Problem solved. I just had to remove all of the rows and tweak the JS to add the class