I've case on Card class bootstrap,
Here I want to make 1 parent card and 4 child card (in parent card) and make them 6 column every 1 child card, but when I make 4 child card with col-xl-6 then the other child card make new line. I want to make the child card using grid bootstrap column. Here my code
template
<b-card class="card-congratulation-medal bg-rts-main row">
<h5 class="text-white col-xl-12">
Selamat Siang,<br>
{{ user.nama }} ({{user.kode}})
</h5>
<b-card class="p-0 col-xl-3 col-md-3 mt-2" v-for="(item, index) in cardItem" :key="index">
<h5>{{ item.title }}</h5>
</b-card>
</b-card>
data()
cardItem: [
{
title: "Point",
icon: "asem"
},
{
title: "Invoice Unpaid",
icon: "asem"
},
{
title: "Resi",
icon: "asem"
},
{
title: "Goods",
icon: "asem"
},
]
the result of my case here :
My Case
I want to make like that, 6 column every .card :
My expetation
My element :
You do it like this in bootstrap.
How make Bootstrap 4 card decks same width each row?
You need to use the .card in a .col-xl-6 which is a descendant of a .row.
<b-row>
<b-col class="col-xl-6" v-for="(item, index) in cardItem" :key="index">
<b-card class="p-0 mt-2" >
<h5>{{ item.title }}</h5>
</b-card>
</b-col>
</b-row>
https://codesandbox.io/s/1w8tf
Wrap the v-for in <b-row>:
<b-card class="card-congratulation-medal bg-rts-main row">
<h5 class="text-white col-xl-12">
Selamat Siang,<br>
{{ user.nama }} ({{user.kode}})
</h5>
<b-row cols="2">
<b-col v-for="(item, index) in cardItem" :key="index">
<b-card class="p-0 mt-2">
<h5>{{ item.title }}</h5>
</b-card>
</b-col>
</b-row>
</b-card>
Here is a demo
From comments: When importing plugins instead of the whole library, make sure to import the LayoutPlugin (for <b-row> and <b-col>) and CardPlugin for <b-card>:
import { LayoutPlugin, CardPlugin } from 'bootstrap-vue'
Vue.use(LayoutPlugin);
Vue.use(CardPlugin);
Related
I am making a html based tag filter based on tailwind.
<div class="p-3 border-b">
<div class="flex flex-col space-y-2 mt-2">
<div class="flex flex-row space-x-2 text-sm" v-for="(filter,index) in filters" :key="index">
<div class="w-16 text-base text-gray-700"> {{ filter.label }} </div>
<div class=" flex flex-row space-x-5 text-gray-500 leading-6">
<span class="cursor-pointer"> {{ categoryItem.name }} </span>
</div>
</div>
</div>
</div>
filters:[
{
name:'type',
label:'Type',
category:[
{'name':'All'},
{'name':'Animals, Plants & Land'},
{'name':'Maintenance, Service & Repair'},
{'name':'Management & Planning'},
{'name':'Medical Technology'},
{'name':'Transport'},
{'name':'Storage, Dispatching & Delivery'},
{'name':'Retail Sales & Customer Service'},
{'name':'Medical Technologyy'},
....
]
}
],
However since the number of category list is more than 30 items, the actual html page looks very wired since the tag list grows horizontally instead of breaking space into multiple lines.
how to deal with this?
You can check out the Tailwind CSS line clamp package to solve this problem.
Here is a link on how to use it.
I need to use a Vue props, in a tailwindcss class.
The class is "bg-[url('address')]" (background image), and the adress is a props.
But no matter how I write that code, I always get the error:
Module not found: Error: Can't resolve this 'this.icon'.
I tried:
`bg-[url(${this.icon})]`
"`bg-[url(${this.icon})]`"
'bg-[url('+this.icon+')]'
I try to use that sintax with computed too. Like this:
classIcon() {
return `bg-[url(${this.icon})]`
}
My complete code component:
Template:
<template>
<div class="flex items-center rounded-lg bg-gray-100 p-4 font-lato">
<div class="bg-no-repeat w-full" :class=`bg-[url(${this.icon})]`>trstestes</div>
<div class="flex flex-col">
<p>
<span class="font-bold">
{{ title }}
</span>
{{ benefit }}
</p>
</div>
</div>
</template>
Script
export default {
props: {
icon: {
type: String,
require: true,
default: "Ícone",
},
}
}
With computed:
Template:
<template>
<div class="flex items-center rounded-lg bg-gray-100 p-4 font-lato">
<div class="bg-no-repeat w-full" :class="classIcon" >trstestes</div>
<div class="flex flex-col">
<p>
<span class="font-bold">
{{ title }}
</span>
{{ benefit }}
</p>
</div>
</div>
</template>
Script:
classIcon() {
return `bg-[url(${this.icon})]`
}
}
}
Anybody can helpe me? Thank's
I'm using VueJS 3 with "vue-draggable-next": "^2.1.1".
Nothing happens when I try to drag.
I see in the HTML this:
<div class="flex m-10" data-v-52c58f0f="">
<draggable list="[object Object],[object Object],[object Object],[object Object]" data-v-52c58f0f="">
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">John</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Joao</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Jean</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Gerard</div>`
</draggable>
</div>
When I implement the code like this:
import { VueDraggableNext } from "vue-draggable-next";
components: {
draggable: VueDraggableNext
},
with
list: [
{ name: 'John', id: 1 },
{ name: 'Joao', id: 2 },
{ name: 'Jean', id: 3 },
{ name: 'Gerard', id: 4 },
],
and im the template I already tried:
<draggable class="dragArea list-group w-full" :list="list" #change="log">
<div
class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
and this:
<draggable
:list="list"
:disabled="!enabled"
item-key="name"
class="list-group"
ghost-class="ghost"
:move="checkMove"
#start="dragging = true"
#end="dragging = false"
>
<template #item="{ element }">
<div class="list-group-item" :class="{ 'not-draggable': !enabled }">
{{ element.name }}
</div>
</template>
</draggable>
In the case where I use
<template #item="{ element }">
Nothing is showing, and in the other case, nothing is draggable.
The component is loaded, I can see it with the Vue extension for Chrome:
Does anyone have any idea why it is not working?
You did not correctly import the vue draggable package.
Do it like this:
import { VueDraggableNext } from "vue-draggable-next";
and after that use it like this:
<draggable :list="list">
<div
class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
v-for="element in list"
:key="element.name"
>
{{ element.name }}
</div>
</draggable>
Hope it works!!
Edit: This is an example, why you should post your whole code...
So, after hours and hours of trying different things, I came across that I have added, components: to the data().
Now, it works fine with this:
export default {
components: {
draggable: VueDraggableNext },
and this is what I was doing:
data() {
return {
components: {
draggable: VueDraggableNext
},
Hope this helps someone in the future...
I have a Hit const which displays products (from Algolia). I use it in my main component. I would like to display the products in a row, however, I don't know how to do that, since if I write the row class around the const (in the main component) it doesn't work.
The Hit const is in a way mapping multiple products and I can't create a row from it, because placing row around Hit in the main component treats it as if it were one item and placing row inside of Hit treats each product as one row.
How could each product from Hit be displayed as a column inside a row?
This is the Hit const:
const Hit = ({ hit }) => (
<div className="col-6 col-sm-4 col-md-3">
<a className="mb-5 d-block font-color-black cursor-pointer">
<div
className="mb-3"
style={{
paddingBottom: "125%",
background: `url("${hit.image}") center center/cover`,
}}
></div>
<p className="font-size-subheader mb-2 font-weight-medium">
{hit.product}
</p>
<p className="font-size-subheader font-weight-medium pb-2 borderbottom border-color-black">
{hit.cena} <span className="hit-em">€</span>{" "}
</p>
</a>
</div>
);
This is the return of the main component, where Hit is used:
return (
<InstantSearch
searchClient={searchClient}
indexName="Besedilo"
searchState={props.searchState}
createURL={props.createURL}
onSearchStateChange={props.onSearchStateChange}
>
<div className="py-5 my-5">
<div className="py-4">
{/* Main Content */}
<div className="custom-container">
<div className="row">
<div className="col-12 col-lg-10 offset-lg-2">
<div className="collection">
<div className="row mb-5 collection-1">
<Hits hitComponent={Hit} /> //this is how Hit is used
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</InstantSearch>
);
I have the following code:
<h2 id="yachts" class="mt-0">Our Yachts</h2>
<div class="card-group">
{{ $pages := sort (where $.Site.RegularPages "Section" "boats") "Weight" "asc" }}
{{ range $pages }}
<div class="card">
<img src="{{ .RelPermalink | safeCSS }}{{ .Params.heroimage | safeCSS }}" class="card-img-top" alt="...">
<div class="card-body clearfix">
<h4 class="card-title">{{ .LinkTitle }}</h4>
<p class="card-text border-light border-top border-bottom">
<span class="row">
<span class="col-6 text-muted text-left">
{{- partialCached "icons/users.svg" . -}}{{ .Params.pax }}
</span>
<span class="col-6 text-muted text-right">
{{- partialCached "icons/bed.svg" . -}}{{ .Params.bunks }}
</span>
</span>
</p>
<p class="card-text">{{ .Description }}</p>
Learn More
</div>
</div>
{{ end }}
</div>
(The logic stuff inside of the {{ tags is Hugo templating markup (Golang) which is irrelevant at this point).
The result of this code looks like this in one of the uses:
I would like to position the buttons on the same level (bottom right of each card).
I tried doing it via position relative on the card and position absolute on the buttons, but that positions them at their current location, not the real bottom of the card. What would be the "flex way" to tell these buttons where they belong?
Try min-height for .card-text
.card-text{
min-height:250px;
}
It turns out that Bootstrap offers the card-footer class that does exactly what I wanted to achieve. Using bg-light or our own class for styling then can make it look right.
<div class="card-footer bg-light">
Learn More
</div>
From the documentation:
When using card groups with footers, their content will automatically line up.