→ 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

331

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

Products Grid
E-commerce product grid

Author:
Juan Martinez

6 months ago

627

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

6 months ago

1.5k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

9 months ago

707

v.3.4
Responsive Card Grid
A responsive grid of cards with hover effects

Author:
Prajwal Hallale

10 months ago

632

v.5.3
Bento Grid with Bootstrap 5

Author:
C B

3 months ago

415

v.5.3
Card grid
card grid for blog articles etc. it also has author's details

Author:
Anonymous

6 months ago

390

v.4.6
Bento grid bootstrap

Author:
Anonymous

1 month ago

182

v.5.3
Responsive Products Grid

Author:
Ross Wille

6 months ago

516

v.5.3
Blog Post Grid
Responsive blog post grid

Author:
Kemaya m

6 months ago

733

v.5.3
Bento Grid Layout with Images

Author:
Juan Martinez

6 months ago

798

v.5.3
Button pair
sign up and login buttons

Author:
Anonymous

5 months ago

191

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

4 months ago

608

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent