Is it possible to create a Bootstrap4 fullscreen dashboard featuring dynamically resizing images that perfectly fit and stretch within their respective divs

I have been attempting to make this work for a few days now, but with no success.

This is specifically designed for a larger monitor (2560x1080), so responsiveness on smaller viewports is not a priority.

My goal is as follows:

  1. Fit the container to the full screen edge to edge.
  2. Create a grid similar to the one shown in the attached image.
  3. Display images in the grid cells that utilize exactly 100% of the available space, resizing with aspect ratio and stretching as needed based on the % values of the underlying cell/div.

Unfortunately, every attempt so far has been unsuccessful. Most recently, I have been using Bootstrap 4 with additional CSS as shown below:

https://codepen.io/jpub/pen/qBNbGOV

#mmenu_screen > .row {
    min-height: 100vh;
}
.flex-fill {
    flex:1 1 auto;
}

Any advice or tips would be greatly appreciated.

The desired outcome should resemble the following.......

cssbootstrap-4flexboxfullscreenresponsive-images

Answer №1

Forget about using bootstrap or any other framework, CSS grid is all you need! The simple API allows you to easily create a grid layout by adding the necessary divs and providing a template. It's fully responsive and will adjust to fit your content perfectly.

  • For controlling images, use background-image with a percentage size and adjust it with "background-size" property ;)

I hope this solution helps you achieve the layout you desire!

.grid-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  grid-template-areas:
    'area1 area1 area1 area1 area4 area4'
    'area1 area1 area1 area1 area5 area5'
    'area2 area2 area3 area3 area6 area6'
    'area2 area2 area3 area3 area7 area7';
  grid-gap: 10px;
  
  background-color: #f9fad2;
  padding: 10px;

}

.grid-container > div {
  background-color: #18bc9c;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}



.item1 { grid-area: area1;  background-image: url("https://www.bmw.in/content/dam/bmw/marketIN/bmw_in/Images/all-models/BMW%20Series/bmw-2-series/Main%20Banner%20Desktop.jpg/_jcr_content/renditions/cq5dam.resized.img.1680.large.time1601620546255.jpg");  background-size: cover;  }
.item2 { grid-area: area2; }
.item3 { grid-area: area3; }
.item4 { grid-area: area4; }
.item5 { grid-area: area5; }
.item6 { grid-area: area6;  }
.item7 { grid-area: area7;  background-image: url("https://cdn.cnn.com/cnnnext/dam/assets/190815154638-01-bugatti-centodieci-exlarge-169.jpg");    background-repeat: no-repeat;
  background-size: 100% 100%; }
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
   <div class="item6">6</div>
  <div class="item7">7</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

Adjustable dimensions and proportions for the following image

I'm currently working on a blog page using next.js and I've encountered an issue with displaying images. Each post has a main image of varying dimensions and aspect ratios, making it difficult to maintain consistency when scaling for smaller scre ...

cssnext.js

Create a CSS border with a stylish downward arrow design

Recently, I came across a specific requirement that I need help with. You can see the image https://i.sstatic.net/j4Qdf.png. I found a helpful resource on how to create triangles using CSS on https://css-tricks.com/snippets/css/css-triangle/. However, I a ...

css

Remove CSS Styling from DataFrames in Pandas

My data frame consists of records that have this structure: Untitledp { margin-top: 0px;margin-bottom: 0px;line-height: 1.15; } body { font-family: 'Times New Roman';font-style: Normal;font-weight: normal;font-size: 13.3333333333333px; } .Normal ...

pythoncsspython-3.xpandas

Issue with Bootstrap 5: Mobile Menu Failure to Expand

I’ve been struggling with this issue for days now. I’ve searched everywhere for a solution, but to no avail. That’s why I’m turning to the experts here for help :-) The problem I’m facing is that my mobile menu won’t open. Nothing happens when ...

javascripthtmlcssbootstrap-5

Using explode() in PHP to read a text file and extract desired sections of text

I am faced with a challenge involving two text files - users.txt and schedule.txt. The content of the schedule.txt file is structured as follows: 0 1 2 2013-04-11^12:00|4:00|14:00 3 4 5 6 2013-07-21^10:00|15:00|18: ...

phpcsshtml

React Router version 6.4.5, automatic redirection upon loading the page

Seeking assistance with setting up redirects. Below are snippets of the code. index.js const router = createBrowserRouter([ { //Defining App as the root element... path: "/", loader: () => { }, element: <App/>, ...

javascripthtmlcssreactjsreact-router

What's the best way to ensure consistent spacing between a label and input field, regardless of the length of the text?

Imagine a scenario where there are 10 input fields, each preceded by a span tag on the left side indicating what should be entered. While working on this setup, I encountered an issue - how can I create a consistent space between the span tag and the input ...

formscsshtml

How to position a centered div with a background image on a webpage

I am trying to achieve a centered layout for a div and its content on a webpage. The div includes a background image. Here is my approach using Flexbox: <head> <style> .flex_container { display: flex; flex-d ...

htmlcssflexbox

JavaScript alert box

I'm fairly new to the world of web development, with knowledge in CSS & HTML and currently learning TypeScript. I'm attempting to create a message icon that opens and closes a notifications bar. Here's where I'm at so far: document.getE ...

javascripthtmlcsstypescriptpopup

Implementing intricate inline styles in React for interactive features like hover and active states on components like buttons

I'm currently styling my buttons using the following CSS with Bootstrap. .btn-primary { background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1, #1f90bb); background-repeat: repeat-x; border-color: #1f90bb #1f9 ...

javascriptcssreactjssass

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

htmlcssanimationfadeinternet-explorer-11

Closing the Bootstrap Dropdown Menu

I have a dropdown menu in my bootstrap project. I am looking for a way to make the menu close when I click on one of the menu items, without refreshing the page. The links function like an ajax request model, ensuring that the page does not reload. <l ...

jqueryhtmlcsstwitter-bootstrap

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...

htmlcssasp.net-mvcrazorstylesheet

Choose an image and save the selection information for the following page (Tarot card)

I'm in the process of creating a website that showcases multiple tarot cards. The goal is for users to select the cards they're interested in and have their chosen card displayed on the next page. I've implemented some code for selecting the ...

javascripthtmlcssimage

Using class binding for both ternary and non-ternary attributes

Suppose we have a tag that utilizes a ternary operator to apply alignment: <td :class="alignment ? ('u-' + alignment) : null" > This functions as intended since the pre-defined alignment classes are in place, now if we want to ...

javascripthtmlcssvue.js

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss

Consider utilizing divs in a similar manner to tables

I typically use tables to align images and text, but they don't work well on mobile devices. I'd like to switch to using CSS and DIVs instead, even though I have no experience with them. My goal is to center three pictures with text above each o ...

csshtml

Vertically animating an image using jQuery

I have been experimenting with trying to make an image appear as if it is floating by using jQuery to animate it vertically. After some research, I stumbled upon this thread: Animating a div up and down repeatedly which seems to have the solution I need. H ...

javascriptjqueryhtmlcssjquery-animate

Can a background image be displayed within a DIV using position:absolute?

I have scoured every corner, yet the answer still eludes me. In my style sheet, I have a DIV with absolute positioning and a background image. Within that DIV, I want to place a paragraph that appears underneath the background. I attempted to use z-inde ...

csspositionz-indexabsolute

Adjusting the page width to ensure compatibility with all devices

I am facing difficulties with CSS regarding the properties width and margin. I am developing a webpage that should display properly on all devices, including PCs, smartphones, and tablets. I am using HTML <meta name="viewport" content="width=device-widt ...

htmlcssmarginpixel