How to Build a Responsive Recipe Menu in Metronic?

Hi there,

Understanding

You want to build a responsive recipe menu with dish names, descriptions, prices, ingredients, images, and recipe details — using Metronic's existing components.

Solution

Use Bootstrap's card component with a responsive grid layout. This gives you consistent card sizing while allowing different content per item.

Basic structure:

<div class="row g-6">
    <!-- Repeat for each menu item -->
    <div class="col-md-6 col-lg-4">
        <div class="card h-100">
            <img src="dish-image.jpg" class="card-img-top" alt="Dish Name">
            <div class="card-body d-flex flex-column">
                <h5 class="card-title">Chicken Parmigiana</h5>
                <p class="card-text text-muted fs-7">Breaded chicken breast with marinara sauce and melted mozzarella.</p>
                <div class="mt-auto d-flex justify-content-between align-items-center">
                    <span class="fw-bold text-primary">$18.99</span>
                    <button class="btn btn-sm btn-light btn-active-light-primary">View Recipe</button>
                </div>
            </div>
        </div>
    </div>
</div>

Key points:

• Use row g-6 for consistent gutter spacing between cards
• col-md-6 col-lg-4 gives 1 column on mobile, 2 on tablet, 3 on desktop
• h-100 + d-flex flex-column + mt-auto keeps the price button pinned to the bottom even with varying description lengths
• Use card-img-top with aspect-ratio for consistent image sizing

For dynamic data, loop through your data array and render each card. If you're using JavaScript, you can build the cards programmatically. If you're using a framework like React or Next.js, map over your data and render the card component.

Sources

• Metronic v9 Docs
• Metronic v8 Docs

Next Steps

Let me know which Metronic version and framework you're using (v8 Bootstrap HTML, v9 Tailwind HTML, React, etc.) — I can point you to the exact card component docs and demo pages.

This reply was generated by AI. A human will follow up if needed.