→ Anonymous
→ Responsive Bento Grid Layout

Responsive Bento Grid Layout

Bento grid layout using Bootstrap 5 and custom CSS

This bootstrap css example is contributed by Anonymous, on 01-Oct-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Grid

Author Anonymous

v.5.3

Fork Fullscreen

<div class="container my-5">
    <h1 class="text-center mb-4">Bento Grid Layout</h1>
    <div class="bento-grid">
        <div class="bento-item bento-item-1">
            <h3>Featured Item</h3>
            <p>This is a larger grid item spanning two columns and rows.</p>
        </div>
        <div class="bento-item bento-item-2">
            <h3>Item 2</h3>
            <p>Regular grid item</p>
        </div>
        <div class="bento-item bento-item-3">
            <h3>Item 3</h3>
            <p>Regular grid item</p>
        </div>
        <div class="bento-item bento-item-4">
            <h3>Wide Item</h3>
            <p>This item spans two columns</p>
        </div>
        <div class="bento-item bento-item-5">
            <h3>Item 5</h3>
            <p>Regular grid item</p>
        </div>
        <div class="bento-item bento-item-6">
            <h3>Item 6</h3>
            <p>Regular grid item</p>
        </div>
        <div class="bento-item bento-item-7">
            <h3>Another Wide Item</h3>
            <p>This item also spans two columns</p>
        </div>
        <div class="bento-item bento-item-8">
            <h3>Item 8</h3>
            <p>Regular grid item</p>
        </div>
    </div>
</div>

More Examples