→ Juan Martinez
→ Bento Grid Layout with Images

Bento Grid Layout with Images

Forked from> @juanmz/bento-grid-with-bootstrap-5

This bootstrap css example is contributed by Juan Martinez, on 15-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Grid

Author Juan Martinez

3.3k

v.5.3

Fork Fullscreen

<div class="container my-5">
    <h1 class="text-center mb-4">Bento Grid Layout with Images</h1>
    <div class="row g-4">
        
        <div class="col-md-8">
            <div class="bento-item bento-tall">
                <img src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxuYXR1cmV8ZW58MHwwfHx8MTcyMTA0MjYwMXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Nature">
                <div class="bento-content">
                    <h3>Explore Nature</h3>
                    <p>Discover the beauty of the natural world</p>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="row g-4">
                <div class="col-12">
                    <div class="bento-item">
                        <img src="https://images.unsplash.com/photo-1493770348161-369560ae357d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw2fHxmb29kfGVufDB8MHx8fDE3MjEwNDI2MTR8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Food">
                        <div class="bento-content">
                            <h4>Culinary Delights</h4>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="bento-item">
                        <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHx0ZWNobm9sb2d5fGVufDB8MHx8fDE3MjEwNDI2Mjh8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Technology">
                        <div class="bento-content">
                            <h4>Tech Innovations</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="bento-item">
                <img src="https://images.unsplash.com/photo-1503220317375-aaad61436b1b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw1fHx0cmF2ZWx8ZW58MHwwfHx8MTcyMTA0MjY0MXww&ixlib=rb-4.0.3&q=80&w=1080" alt="Travel">
                <div class="bento-content">
                    <h4>Travel Adventures</h4>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="bento-item">
                <img src="https://images.unsplash.com/photo-1513364776144-60967b0f800f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHwxfHxhcnR8ZW58MHwwfHx8MTcyMTA0MjY5Nnww&ixlib=rb-4.0.3&q=80&w=1080" alt="Art">
                <div class="bento-content">
                    <h4>Artistic Expressions</h4>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="bento-item">
                <img src="https://images.unsplash.com/photo-1626947346165-4c2288dadc2a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw0fHxzaG9lfGVufDB8MHx8fDE3MjEwNDEzNjd8MA&ixlib=rb-4.0.3&q=80&w=1080" alt="Sport">
                <div class="bento-content">
                    <h4>Sports & Fitness</h4>
                </div>
            </div>
        </div>
    </div>
</div>

More Examples

Blog Post Grid
Responsive blog post grid

Author:
Kemaya m

1 year ago

1.9k

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

Author:
Prajwal Hallale

1 year ago

4.6k

v.5.3
Bento grid bootstrap

Author:
Anonymous

9 months ago

1.3k

v.5.3
Bento Grid with Bootstrap 5

Author:
Juan Martinez

1 year ago

4.8k

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

Author:
Anonymous

1 year ago

1.7k

v.4.6
Responsive Bento Grid Layout
Bento grid layout using Bootstrap 5 and custom CSS

Author:
Anonymous

1 year ago

1.3k

v.5.3
Bento Grid with Bootstrap 5

Author:
C B

11 months ago

1.2k

v.5.3
Bootstrap Image Gallery

Author:
Anonymous

1 year ago

4.3k

v.3.4
Responsive Products Grid

Author:
Ross Wille

1 year ago

2.9k

v.5.3
Products Grid
E-commerce product grid

Author:
Juan Martinez

1 year ago

3.9k

v.5.3
Elegant testimonial carousel
Interactive testimonial carousel with user avatars

Author:
Sofia Petrova

1 year ago

2.7k

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

1 year ago

6.7k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent