Using Laravel Bootstrap components
Hey Bobby, quick question for ya.
I assume I can use Laravel bootstrap components in wave? I know, stupid question lol.
I was checking this site out Laravel Bootstrap components
Hey 👋
No such thing as a stupid question!
I believe that this should be possible, as long as you include the Bootstrap files in your Blade views.
There are two options:
- Use the Bootstrap CDN:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
- Install Bootstrap through npm:
npm install bootstrap@5.3.0
There is a slight chance that there will be some class naming collision with Tailwind CSS. If this is the case, an alternative option would be to convert those to Tailwind CSS.
Also, Tony is working on something similar based on Taiwlind CSS and Alpine.js:
Hope that this helps!
Originally yes I was using tailwind classes to create the div cards. Does tailwind have a way of making cards look like they do in the link below? Maybe I could use blade components.
Hey!
Yep, that should totally be doable, here is one of those cards converted to Tailwind CSS:
<div class="w-full md:w-1/2 xl:w-1/3 mb-4">
<div class="flex flex-col bg-white rounded shadow-md overflow-hidden mb-4">
<div class="px-6 py-4 border-b border-gray-200">
<h2 class="font-semibold text-lg mb-0">
<a class="text-black hover:text-gray-700" href="#">
Card Header Headline
</a>
</h2>
</div>
<img class="w-full object-cover" src="https://via.placeholder.com/253x169" width="253" height="169">
<div class="px-6 py-4">
<h2 class="font-semibold text-xl">
<a class="text-black hover:text-gray-700" href="#">
Card Body Headline
</a>
</h2>
</div>
<div class="px-6 py-4 border-t border-gray-200">
Card Footer Text
</div>
</div>
</div>
Then if you decide to use blade components the approach should be the same as with bootstrap.
Let me know if this works for you!
1
Hey Bobby. Let me just take the time to let you know that your a BEAST lol. So I used the code you posted. I really like it. It’s much bigger than the card I created.
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-4">
<!-- Card Header -->
<div class="p-4 bg-gray-100">
<h2 class="uppercase tracking-wide text-sm text-indigo-500 font-semibold text-center justify-center">800 Florals</h2>
</div>
<!-- Card Image -->
<div>
<img class="object-fill w-full" src="https://www.tqlkg.com/image-100813069-15077776" alt="123Reg" title="123Reg" />
</div>
<!-- Card Body -->
<div class="p-8">
<a href="https://www.anrdoezrs.net/click-100813069-15077776" target="_blank" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">800 Florals</a>
<p class="mt-2 text-gray-500">We offer hundreds of beautiful floral, plant, and gift basket products that are sure to please, with same-day and next-day professional florist delivery, ninety years of experience, and a name your customers can trust.</p>
</div>
<!-- Card Footer -->
<div class="p-4 bg-gray-100 rounded-b-xl text-center justify-center">
<a href="https://www.anrdoezrs.net/click-100813069-15077776" target="_blank"> Visit Us</a>
</div>
Haha thanks man! 🙌
Oh nice! I like some of the nice touches that you've added to the card! 🚀 Looks great!