I would like to split the window into four columns and populate each one with images

I've been struggling to create 4 columns in my design, but I just can't seem to make it work. I've tried setting the height to 100% in each div, but it didn't produce the desired result. I was able to achieve it with colors, but not with images.

So, I'm wondering how I can divide the window into 4 columns that adjust when resized and populate them with images?

I also have a nav-bar that I want to include, but I can set it with z-index=1 to ensure it remains visible.

#index1 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.09.jpeg');
  position: relative;
}

#index2 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08.jpeg');
  position: relative;
}

#index3 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(1).jpeg');
  position: relative;
}

#index4 {
  background: url('img/WhatsApp Image 2022-01-24 at 17.07.08(2).jpeg');
  position: relative;
}
<div class="row col-md-12" style="width:100%; height:100%">
  <div class="col-md-3" id="index1"><input type="button" class="btn btn-outline-info" onclick="myFunction1()" value="Calendar" /></div>
  <div class="col-md-3" id="index2"><input type="button" class="btn btn-outline-info" onclick="myFunction2()" value="Classifications" /></div>
  <div class="col-md-3" id="index3"><input type="button" class="btn btn-outline-info" onclick="myFunction3()" value="Winner-Driver" /></div>
  <div class="col-md-3" id="index4"><input type="button" class="btn btn-outline-info" onclick="myFunction4()" value="Winner-Constructor" /></div>
</div>

htmlcssbootstrap-5

Answer №1

To create a flexible layout and alignment, consider utilizing the Bootstrap flex classes.

If your buttons are not displaying well on smaller screens, you might opt for a vertical arrangement on mobile devices and a horizontal one on larger screens.

#index1 {
  background: url('https://via.placeholder.com/800');
}

#index2 {
  background: url('https://via.placeholder.com/800/dddddd');
}

#index3 {
  background: url('https://via.placeholder.com/800');
}

#index4 {
  background: url('https://via.placeholder.com/800/dddddd');
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="88eae7e7fcfbfcfae9f8c8bda6b9a6bb">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="d-flex vw-100 vh-100">
  <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index1">
    <input type="button" class="btn btn-outline-info" onclick="myFunction1()" value="Calendar" />
  </div>

  <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index2">
    <input type="button" class="btn btn-outline-info" onclick="myFunction2()" value="Classifications" />
  </div>

  <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index3">
    <input type="button" class="btn btn-outline-info" onclick="myFunction3()" value="Winner-Driver" />
  </div>

  <div class="w-25 flex-column d-flex justify-content-center align-items-center" id="index4">
    <input type="button" class="btn btn-outline-info" onclick="myFunction4()" value="Winner-Constructor" />
  </div>
</div>

Answer №2

Typically, a <div> element has a default height of 0. It can expand if there is content inside it, but it will not adjust its height based on the background-image size of the <div>.

Your code seems fine, but you need to explicitly set the height for each <div> that contains a background image. Otherwise, the browser may render it with a height of 0 or match it to the height of the button in this case.

Using 'height='100%' won't work because it will be calculated based on the largest child element within the row, not the browser window. In this case, it will be the button's height.

For heights, you should specify values in pixels, em, rem, or vh units, as height behaves differently from width.

One simple fix is to set the row height to 100vh instead of 100%.

If you want to set specific heights for each <div>, you can use the height or min-height properties. Experiment with different values to see what works best.
**Tip: You can inspect the size of your <div> using the browser's code inspector (right-click and inspect in Windows).

<style>
    #index1 {
      background: url('https://source.unsplash.com/1600x900/?fire');
      position: relative;
      height: 90vh; //Experiment here
    }

    #index2 {
      background: url('https://source.unsplash.com/1600x900/?beach');
      position: relative;
      height: 500px; //Experiment here
    }

    #index3 {
      background: url('https://source.unsplash.com/1600x900/?team');
      position: relative;
      min-height: 100vh; //Experiment here
    }

    #index4 {
      background: url('https://source.unsplash.com/1600x900/?love');
      position: relative;
      min-height: 50vh; //Experiment here
    }
  </style>

Html:

 <div class="container-fluid">
    <div class="row col-md-12">
      <div class="col-md-3" id="index1"><input type="button" class="btn btn-outline-info" onclick="myFunction1()"
          value="Calendar" /></div>
      <div class="col-md-3" id="index2"><input type="button" class="btn btn-outline-info" onclick="myFunction2()"
          value="Classifications" /></div>
      <div class="col-md-3" id="index3"><input type="button" class="btn btn-outline-info" onclick="myFunction3()"
          value="Winner-Driver" /></div>
      <div class="col-md-3" id="index4"><input type="button" class="btn btn-outline-info" onclick="myFunction4()"
          value="Winner-Constructor" /></div>
    </div>
  </div>

*Note: The row's height will always be determined by its tallest child element here.

I trust this guide will assist you not only in this project but also in your future endeavors. Good luck!

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

Seeking assistance in optimizing my Javascript code for more efficient canvas rendering

I've created a script for generating random moving lines as a background element for my portfolio. While it runs smoothly on its own, I encounter frame drops when combining it with other CSS animations and effects, especially at the beginning (althoug ...

javascripthtmlcssanimationcanvas

Data streaming using Node.js

Is it feasible to continuously stream data from the server to the client using Node.js? My goal is to send a single AJAX request to Node.js, establish a persistent connection, and stream data to the client for real-time updates on the page. Latest Update: ...

jqueryhtmlajaxnode.jsdata-stream

guide on updating JQuery string with JavaScript to incorporate new parameters

Similar Question: How to replace only one parameter or fast with Jquery on Jquery String The website has a query string as follows: http://www.nonloso.html/?nome1=pollo&cognome1=chicken&nome2=a&cognome2=b&nome3=c&cognome3=d This ...

javascriptjqueryajaxhtml

Display the title of an image beneath the image using CSS

Since upgrading my CMS, I've encountered an issue where the captions of images are not showing below the image for thousands of articles. For example: <img src="123.jpg" alt="Texttext" class="caption" style="disp ...

csstitlecaption

I attempted to connect my JavaScript file to my HTML file, but unfortunately, no changes are taking place

I have created an HTML file where I am trying to pass input from it into a function located in a separate JavaScript file, and then have the data added to a SQL server. The JavaScript file works perfectly fine when run independently, but when I try to call ...

javascripthtml

Vanilla JS Rock, Paper, Scissors Game - Fails to reset classes upon restarting

Many questions have been raised about this particular topic, but a solution for vanilla js seems elusive. Let's delve into a new challenge: Rock paper scissors with vanilla js. The game functions properly on its own, but the issue arises when attemp ...

javascripthtmlreset

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

What is the equivalent of a very deep selector in TailwindCSS?

When working with the v-deep selector to customize the appearance of tiptap, a rich text editor, accessing the .ProseMirror class in SCSS would look like this: editor-content { // ... styles &::v-deep(.ProseMirror) { // ... styles } } ...

cssvue.jsvuejs3tailwind-csstiptap

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

I need some assistance with a specific topic. In my scenario, I have two textboxes on my view. I want the value generated in my controller to be applied to textbox2 when there is a change in textbox1. For instance, if I enter a username in textbox1, textb ...

javascripthtmlasp.netajaxasp.net-mvc

Ways to customize the color of a ReactSelect component?

Hey there! I'm currently utilizing the React select component, with the following import statement: import ReactSelect, {ValueType} from 'react-select'; Here is what my component currently looks like: https://i.stack.imgur.com/yTmW4.png Th ...

cssreactjsreact-select

Twitter Bootstrap utilizing a fixed width of 1024 pixels

For my project, I have been tasked with developing a website with a fixed width of 1024px. How can I adapt Twitter Bootstrap's 960px fixed width framework to accommodate for the 1024px width requirement? Are there any disadvantages to designing websi ...

csstwitter-bootstrap

The Image Slider functions smoothly in Chrome, but encounters issues in IE11

Here is a link to the code I've been working on: http://jsfiddle.net/wf32jbhx/ I attempted to host images on my SharePoint site, but they ended up stacking on top of each other instead of formatting properly. Oddly enough, everything appears fine in ...

htmlcssgoogle-chromesharepointinternet-explorer-11

Basic contact form with modal feedback

Hey there, I'm looking for a way to have a regular contact form on my webpage and once it's submitted, display the PHP action in a pop-up modal that says "Thanks for contacting us" before allowing users to close it. I've worked with HTML con ...

phphtmlmodal-dialogcontact-form

What is the best method for locating X-Path for elements inside a frameset?

I need help creating a test case for Selenium because I am struggling to locate elements on my website. The issue seems to be related to the fact that my site uses an HTML frame set. When I try to select all links using Firebug: //a I do not get any res ...

htmlcssxpathselenium

How can we accurately identify if string inputs include HTML tags?

When gathering user input from forms, I need to ensure that fields like "username" or "address" do not contain any markup that could pose a risk in XML (RSS feeds) or (X)HTML (when rendered). So, how can I correctly determine if the input provided does no ...

phphtmlinputxsssanitization

What steps can I take to ensure that the upper and left sections of a modal dialog remain accessible even when the size is reduced to the point of overflow?

One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off ...

htmlcsstypescript

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

htmlcssimage

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal

Embarking on the GSAP journey

I'm attempting my first animation using GSAP, but no matter what I try, nothing seems to be working. I've even tried using example code without success. Within my PHP file, I have the following code snippet: <head> <script src="https:/ ...

javascriptjquerycssgsap

Simple code styling tool

Seeking guidance to create a basic syntax highlighter using JavaScript or ClojureScript. While aware of existing projects like Codemirror and rainbow.js, I'm interested in understanding how they are constructed and looking for a simple example. Do th ...

javascriptcsssyntax-highlightingcodemirrorclojurescript