How do you change the color of a card border using Daisy UI?
I can see that bordered adds a black border around my cards. But when I try various tailwind css classes, such as border-white the border does not change.
In the docs, you can see the example using card-bordered. You can add border-white to that.
<div class="card card-bordered border-white">
<figure>
<img src="https://picsum.photos/id/1005/400/250">
</figure>
<div class="card-body">
<h2 class="card-title">Top image
<div class="badge mx-2 badge-secondary">NEW</div>
</h2>
<p>Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.</p>
<div class="justify-end card-actions">
<button class="btn btn-secondary">More info</button>
</div>
</div>
</div>
I have a flash message that appears when a page is loaded on successful auth and I'm trying to figure out how I can center it horizontally on any device. I am using the TailwindCSS to adjust the placement of the div and have tried fixed and absolute to make sure it appears above my content, but using an attribute like left:50% moves it too far over and margin:auto doesn't center this element. Is there a better approach to what I am trying to do? Is it possible to do with TailwindCSS or will I have to write some CSS for this?
Code:
<div>
<div className="mx-auto sm:w-3/4 md:w-2/4 absolute" id="signin-success-message">
<div className="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" className="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
<div>
...
</div>
</div>
use inset-x-0 with mx-auto
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-x-0 top-10" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 my-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
To have vertical centring:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<div class="mx-auto sm:w-3/4 md:w-2/4 fixed inset-0 flex items-center" id="signin-success-message">
<div class="bg-green-200 px-6 py-4 rounded-md text-lg flex items-center w-full">
<svg viewBox="0 0 24 24" class="text-green-600 w-10 h-10 sm:w-5 sm:h-5 mr-3">
<path fill="currentColor" d="M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"></path>
</svg>
<span class="text-green-800">{ body ? body : '' }</span>
</div>
</div>
For me it worked like this (div is centered both vertically and horizontally). Also I wanted the modal content to scroll if the content was longer than the div's height:
<div
v-if="isModalOpen"
class="fixed z-20 h-3/4 w-1/2 m-auto inset-x-0 inset-y-0 p-4 bg-white rounded-sm overflow-y-scroll"
>
<button #click.prevent="closeModal">Close me</button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut voluptas
omnis nemo quas minima quam, repudiandae doloremque. Sunt magnam officia
voluptatibus nostrum eligendi dignissimos minima itaque, praesentium
corrupti obcaecati quas. Lorem ipsum dolor sit amet consectetur
adipisicing elit. At harum id magni consequuntur ratione aperiam! Quasi
animi sunt molestiae eos a voluptatem exercitationem voluptate quo,
consectetur fugit tempore impedit qui! Lorem ipsum dolor sit amet
consectetur adipisicing elit. Ea quae dolor maiores animi dolores deleniti
laborum quis molestias nulla, reprehenderit eos odio recusandae
consectetur velit saepe explicabo quibusdam quidem? Corrupti.
</div>
use inset-x-0 max-w-max mx-auto
if you don't have element full wide....
The following works for me:
<div className=" bg-gray-500 bg-opacity-75 transition-opacity flex flex-col justify-center items-center">
{children}
</div>
I am building a card with Tailwind CSS and Vue.js. I want to fill a space on my card with text and truncate any remaining text that doesn't fit with an ellipsis.
I have applied Tailwinds .truncate class however it only allows me to have 1 line of text before the ellipsis. I have also looked into the line-clamp property but I was hoping there would be a nicer way to do this with Tailwind.
<template>
<div class="p-6 w-full bg-white rounded-lg overflow-hidden shadow-lg border">
<div class="flex flex-col sm:flex-row">
<img src="img/card-default.jpg" class="mx-auto" alt="Card">
<div class="mt-4 overflow-hidden sm:ml-4 flex flex-col justify-between">
<div>
<h2 class="text-gray-900 font-semibold text-lg">Title</h2>
<p class="truncate mt-2 text-gray-700 max-h-full">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Tempore repellat labore distinctio maxime, debitis autem perferendis dolore,
deleniti doloribus quia vel! Amet nisi, a vel modi officiis sapiente fugiat,
illum delectus, incidunt repellendus suscipit. Delectus iusto eligendi, doloribus amet et fugiat,
atque perspiciatis eveniet, ipsum inventore sed placeat sapiente maiores.
</p>
</div>
<div class="flex justify-around mt-4 mx-2 sm:mx-0">
<button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 1</button>
<button class="mx-2 bg-indigo-600 p-2 rounded-lg text-white hover:bg-indigo-500 sm:mx-0">Button 2</button>
</div>
</div>
</div>
</div>
</template>
Short answer: Nope their isn’t a nicer solution for this.
tailwind is meant to be cover the ‘basics’ like padding, margin, grid etc for developers/designers so they can create easily and fast pages/components.
What you are using/asking is totally custom for your situation only.
Possible solution for your problem:
Write a tailwind plug-in that extends the default tailwind css
Extend tailwind.scss with your custom css
Or just css (in-line or just your custom css file)
Use the #tailwind/line-clamp plugin
<p className="line-clamp-n"> where n stands for the number of lines you want before truncating
A solution that worked for me was to put a max-height on the <p> tag
I need to place an image outside the container, so that the right margin stays the default container (responsive), and the image always stays together with a button.
Follow the image below to exemplify:
I tried to use container-fluid (Example 2 - using container-fluid in html), but I can't use the same margin as the container on the right side. I can change by css, but would have to change for all breakpoints, has another way?
I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and remove the margin-left without success.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Examples</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>
<body>
<h2>Example 1</h2>
<div class="">
<div class="container">
<div class="row">
<div class="col-6 row">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="ex1 mt-5">
<h3>Example 2 - using container-fluid</h3>
<div class="container-fluid">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
<div class="mt-5">
<h3>Example 3 - using container and margin-left: 0px</h3>
<div class="container" style="margin-left: 0px">
<div class="row">
<div class="col-6 row">
<img src="https://via.placeholder.com/200" alt="">
<div class="col pl-0 mt-5">
<div class="nav nav-pills" aria-orientation="vertical">
<a class="nav-link active" >Example1</a>
</div>
</div>
</div>
<div class="col-6">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
</div>
</div>
</div>
</div>
</body>
</html>
Would anyone know any way to do it without me having to change this margin-right on all breakpoints?
I don't think you can do this in bootstrap.
If you give your button position:relative then it will no longer flow with the rest of the grid and can always be to the right of the image/text
https://www.w3schools.com/css/css_positioning.asp
is a good tutorial on different position options
Well you can always make use of
display: flex;
which would allow do what you have above easily.
Checkout how to use flex
When I add padding around an image at the top of a card when in dev tools mobile view, the image doesn't keep aspect ratio. When I go back to full size view the aspect ratio is fine.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>
My code
Image of how it looks in dev tool mobile
The thing is if I go to my code pen in dev tools mobile view it seems to be working as it should, but from my file it isn't. This is the reason I'm so confused about it.
You wanted to maintain aspect ratios, does this work for you ?
.card { display:block !important; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-deck">
<div class="card bg-primary product-card--style mb-3">
<img src="https://dummyimage.com/500x500/8A8A8A/fff" alt="asdf" class="card-img-top product-card--img p-5">
<div class="card-body product-card--layout">
<h5 class="card-title">Product 1</h5>
<h6 class="card-subtitle">For people who..</h6>
<p class="card-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias sit illo eaque nulla aliquid tempora sapiente minus consequuntur atque! Iusto.</p>
More info
</div>
</div>
</div>