Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout

https://i.sstatic.net/1E8jO.png

What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Currently, I am using bootstrap to format the images. My goal is to iterate through the displayed images and showcase the first three in one row followed by the next four in the subsequent row, while also indicating the number of remaining images in the last column of the final row, similar to the example image

This is what I have managed to achieve so far

     <div class="card-body">
        <div class="portfolio-area">
            
            @foreach ($images as $image)
            <div>
                <span class="image-block block2">
                <a class="image-zoom" href="{{ asset('uploads/property/large/'.$image->path) }}" rel="prettyPhoto[gallery]">                            
                        <img src="{{ asset('uploads/property/small/'.$image->path) }}" class="img-responsive" alt="CEC Gallery"></a>
            </span>
            </div>
            @endforeach
        </div>
    </div>

Here is how I am retrieving the images

    $images = Photo::where(['p_id'=>$property_id])->get();

I would greatly appreciate any advice on how to properly loop through and style the images

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a responsive navigation menu by converting overflowing menu items into a dropdown list

I'm currently designing a menu that contains multiple list items. I would like the overflowing li's to collapse and display in a dropdown when resizing the browser to smaller screens, such as laptops and tablets. Original Menu. Responsive view ...

Once I incorporated Bootstrap into my project, I noticed a noticeable white space between the div elements

Welcome to My Code Playground I was sailing smoothly with my project until I decided to include Bootstrap. Seems like there's something missing in the details, so here I am reaching out. If you spot the issue, please feel free to correct my code. &l ...

Expanding content to cover the entire width using CSS Bootstrap 5

As a newcomer to Bootstrap, I am working on customizing an existing Bootstrap example. My objective is to expand the width of the div tag (with id "inner") to fill the entire screen. I have experimented with various approaches, such as resetting the margi ...

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

Dynamic Navbar that Adapts to Your Scroll

I'm experiencing an issue with my navbar. I want it to stay at the top of the page when I scroll, but whenever I apply the "position: fixed;" property, the navbar disappears. Below is my HTML and CSS code: <nav> <div class="navbar"> <b ...

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

I have a dynamic JSON object that includes a button element. I am using createElement and Material UI to display the data from this object. I wanted to add custom CSS styling to the button component using className, but I've been struggling to achiev ...

Using a dashed border stroke creates a unique look when combined with border-radius properties

I have been experimenting with different methods to increase the distance between border strokes on my element. So far, I have tried various approaches without success. For example, I explored this resource Unfortunately, the issue arises when I incorpor ...

Potential Bug Detected in Internet Explorer on Mouseenter Event

I'm facing a challenge with my HTML/CSS code. I have a carousel that includes two li elements positioned absolutely on each side for navigation but they are not displaying correctly in IE versions 7-9 - they appear behind the main element regardless o ...

Add a stylish diagonal touch to your header and footer using CSS

I'm exploring the world of CSS and design, aiming to incorporate a stylish diagonal line into the header and footer of my React.js web application using CSS. However, despite trying various solutions, I haven't been successful in achieving the de ...

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

Submitting a form via email without the need for PHP

Currently, I am focusing on a project that is small and emphasizes presentation more than security. The main objective is to create a form where users can input data, then click submit for all the information gathered to be sent to a specified 'mailt ...

What is the optimal order for executing JavaScript, jQuery, CSS, and other controls to render an HTML page efficiently?

What are some recommended strategies for optimizing webpage loading speed? What key factors should be taken into consideration? ...

I am curious if there is a method to vertically center text without being affected by the font-family or font-size

Searching for a font-independent method to center text within a div. My div has a button-style fixed height, and I need the text (one line only) to be centered vertically within it. The issue arises when changing the font-family, as some fonts do not ali ...

Aligning images with absolute CSS to text that is wrapping positions the images perfectly alongside the text content

My webpage has a long content section that resizes based on the browser width. Here's an example: <h1 id="loc1">Title</h1> <p>bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bodycopy bod ...

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

Requesting footer details to be displayed within the header section using jQuery dataTables

I'm currently working with jQuery dataTables and facing an issue. Due to a large number of records, I need to display footer information "Showing 1 to 2 of 2 entries (filtered from 3352 total entries)" in the header section right after the "Show Entri ...

Tips for consistently showing the addition symbol in my search bar

I created a code snippet that showcases a search box with CSS animations and jQuery toggling functionality. One issue I encountered is ensuring that the plus icon remains visible at all times, whether the search box is expanded or contracted. How can I ac ...

Conceal HTML elements from the bottom as new content is being added dynamically

I am currently working on a comments feed feature. By default, only the first four comments are displayed, with an option to show more when clicking the "show more" anchor. The issue I'm facing is that if new comments are dynamically added, the CSS hi ...

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

Stepping up your design game by customizing the bootstrap container class for multiple pages

Looking for a solution to customize container-width, @gutter-width, and @column-width for two pages - landing and home? Let's discuss how to achieve this. Currently using less framework and merging all less files for production code deployment. Need ...