Could you design a cover page featuring a variety of images in different sizes?

Yesterday, I posted a question on StackOverflow seeking help with using Bootstrap to create an image tile grid collage. However, my question was closed even though a similar question with answers did not provide the solution I needed.

So, here I am again, asking for assistance with more detailed explanations.

My goal is to make the grid cover the entire width of the page while maintaining a height of 590px.

How can I achieve this using Bootstrap 4.4? I would appreciate a code snippet demonstrating the exact steps to accomplish this.

This is what I am trying to achieve: https://i.sstatic.net/mu4hP.jpg

Below is a sample code snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="row no-gutters">
        <div class="tile col-lg-6">
            <img src="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
        </div>

        <div class="tile col-lg-6">
            <img class="lazy" src="https://image.freepik.com/free-photo/fiery-orange-sunset-sky-warm-light-with-clouds-beautiful-background_9511-97.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">

            <div class="row no-gutters">
                <div class="tile col-lg-6">
                    <img src="https://img5.goodfon.com/wallpaper/nbig/5/60/4k-ultra-hd-background-sunset-dark-twilight-sky-clouds-natur.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>

                <div class="tile col-lg-6">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg" class="img-fluid" alt="Responsive image" style="opacity: 1;">
                </div>
            </div>
        </div>
    </div>
csstwitter-bootstrapbootstrap-4flexboxcss-grid

Answer №1

If you want to replicate the layout shown in the image using CSS-Grid, here's how you can do it.

Firstly, set up the grid and define its dimensions in the #grid container. Then, assign specific grid-column-start and grid-row-start values (first number in grid-column and grid-row) as well as grid-column-end and grid-row-end values (last number) to each child element. The magic of CSS-Grid will take care of the rest for you.

(In CSS-Grid, these numbers actually refer to Grid-Lines, which you can easily visualize in Chrome or Firefox Dev Tools.)

For more information on Line-based placement in CSS-Grid, you can visit this link: Click Here

To add images to the layout, simply use background images within the image containers like this:

background-image: url(yourimage.jpg);
background-size: cover;

And that's all there is to it. It's pretty amazing, in my opinion. I highly recommend exploring CSS-Grid for such layouts.

#grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 60px repeat(4, 1fr);
  width: 100vw;
  height: 590px;
}

#navbar {
  background: blue;
  grid-column: 1 / 5;
  grid-row: 1 / 1;
}

#image1 {
  background: cyan;
  grid-column: 1 / 3;
  grid-row: 2 / 6;
}

#image2 {
  background: orange;
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

#image3 {
  background: magenta;
  grid-column: 3 / 4;
  grid-row: 4 / 6;
}

#image4 {
  background: brown;
  grid-column: 4 / 5;
  grid-row: 4 / 6;
}
<div id="grid">
  <div id='navbar'></div>
  <div id="image1"></div>
  <div id="image2"></div>
  <div id="image3"></div>
  <div id="image4"></div>
</div>

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

The beauty of Android Studio: Gradients

While working on my Android Studio project, I designed a UI in Figma that included a rectangle with multiple gradients and a solid color. Now I'm wondering how to recreate this exact rectangle in Android Studio. Here is the CSS code for reference: ba ...

javaandroidcssxml

How does the client-side validation get triggered by <form class="needs-validation"> in ASP.Net Core Razor pages?

Currently, I am developing a web application using ASP.Net Core 3.1. If a Razor page contains a form with the class="needs-validation", it triggers client-side validation for the fields within that form. Specifically, when the user clicks "Submi ...

asp.net-corerazorbootstrap-4jquery-validateunobtrusive-validation

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs

Instructions for converting SCSS to CSS and storing the CSS code as a string in a variable

I am currently developing a Single Page Application (SPA) using Vue (specifically Quasar), and I have the following requirements: Load the contents of a CSS file into a JavaScript variable or Vue data property dynamically The CSS file should be generated ...

javascriptcssvue.jswebpacksass

How can I maintain code reusability while customizing buttons with pseudo-elements to display unique content on each button?

I have a ul in my HTML with lis that contain navigation options such as home, contact, about, etc. I am trying to figure out the best way to add a unique effect to each button since they all have different content and require different icons. Essentially, ...

css

Using Tailwind and Next, you can easily set up a transition effect for showing and hiding

Can Tailwind CSS and conditional coding at Next.js be used to create a display or visibility transition? I am attempting to implement a smooth fade-in effect for exception messages returned by the backend under the responseError object in Context API. Howe ...

cssreactjsnext.jstailwind-css

The issue of excessive vertical spacing occurring between two <div> elements, with one of them containing an <iframe> element, needs to be addressed

I am facing an issue with unwanted vertical spacing between two elements. One of them has a <p> element, and it seems like it's getting stuck there. The problem only arises on larger screens (> 15"), while it looks fine on smaller screens. Th ...

htmlcssiframebootstrap-4

What is the best way to add a gradient background image to a container that also has margins?

I am currently working on a push menu that shifts the main content container by adding margin-left to it. I am aiming to achieve a background image effect similar to what is seen on . Here is the progress I have made so far in my codepen: https://codepen ...

htmlcss

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

The background image on Nuxt.js is not adapting to different screen sizes

My journey with developing a Nuxt app hit a snag in the CSS department early on. The issue plaguing me, as is often the case, is responsive background images. Everything looked great during testing on desktop browsers, but when I opened it up on my mobile ...

cssvue.jsbackground-imagenuxt.js

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Error encountered during Webpack build process for bootstrap

As I was trying to start building my project, I encountered a "Warning." Any suggestions on how to resolve this? Additionally, is there a command for real-time building, besides "$ npm run build"? For example, something like "$ sass --watch" or a liv ...

node.jswebnpmwebpackbootstrap-4

How can JavaScript Regular Expressions be used for Form Validation?

For my registration form, I am including fields such as userid, name, email, password, confirm password, and affiliation. Using regular expressions in JavaScript, I am validating these fields. I am attempting to display any validation errors within the for ...

javascripthtmlbootstrap-4

Ways to incorporate additional spacing within a code section using HTML and CSS

I am in the process of creating a new widget. To implement it, users will need to copy and paste a code snippet from my website directly into their HTML code. There are two main functionalities that I want to incorporate: I would like to include proper ...

htmlcssreactjs

The viewport dimensions and media query parameters do not align

Currently working on an HTML/CSS/JS project. Within my <head> section, there's a viewport <meta> tag: <meta name="viewport" content="width=device-width, initial-scale=1" /> Encountering unexpected behavior w ...

css

In Chrome, the computed style of background-position is returned as 0% 0%

Let's say I have an element and I am interested in finding out its background-position: To achieve this, I use the following code snippet: window.getComputedStyle(element).getPropertyValue('background-position') If the value of background ...

javascripthtmlcss

Adjusting Flexbox Sidebar to Match Content Height

I'm facing an issue with my layout where the sidebar sometimes becomes taller than the page body, extending beyond the screen height and continuing to expand vertically. Here's a snippet of my code structure: <div class="fb-col"> < ...

htmlcssflexbox

Addressing Problems with Horizontal Navigation Layout

I am working on creating a horizontal navigation bar that resembles link [1], but it currently looks more like link [2]. How can I adjust my code to achieve the desired look? The wrapper's width is set at 80em and each link should be 155x76px. Wheneve ...

css

The mysterious disappearance of the div element exclusively in Chrome

Currently, I am working on an HTML/CSS chat application that is being integrated with the WebSocket API. However, I am facing an issue in Chrome only, as the div containing my input field and send button is not displaying on the page (this has been tested ...

htmlcssgoogle-chromebootstrap-4

Is there a way to switch out the WordPress page title for an image instead?

I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images. The current state is as follows ...

csswordpressimageparent-child