Utilizing Bootstrap 4 for nested rows and image sizing

I'm currently working on designing a layout that includes a set of images displayed in a specific arrangement. However, I am encountering difficulties in controlling the height of three images on the right so they do not exceed the height of the image on the left. Here is my existing code:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1528463104570-9b313927fbca?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b2815b93860831943ffdb596ed4b8668"/>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1468898203265-d5b5601865c7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a02d4618cdbf5cf692c5dba45c3ac028"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="card-img img-fluid" src="https://images.unsplash.com/photo-1476483547798-bf769a2cbba5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bc78be3e84a52b29ec28309d5de33c25"/>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="card">
            <img class="img-fluid" src="https://images.unsplash.com/photo-1513804191723-238c2f3c66f9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a58c1bc2427d9e45c5d8d7bc69e54aa0"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Link to the CodePen: https://codepen.io/sixstring666/pen/ejyZXM

Currently utilizing Bootstrap for handling the responsiveness of images, but questioning if it's the most suitable approach for this particular scenario.

htmlcssimagegridbootstrap-4

Answer №1

It's not entirely certain if this solution is the most optimal, as it may compromise responsive functionality and require image editing. Nevertheless, here is a potential workaround:

.bigger {
height: 300px !important;
}

.smaller {
height: 99px !important;
margin-bottom: 2px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">



<div class="container-fluid">
  <div class="row main">
    <div class="col-sm-6"> <img class="card-img img-fluid bigger" src="https://images.unsplash.com/photo-1528463104570-9b313927fbca?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b2815b93860831943ffdb596ed4b8668"/> </div>
    <div class="col-sm-6">
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1468898203265-d5b5601865c7?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a02d4618cdbf5cf692c5dba45c3ac028"/> </div>
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1476483547798-bf769a2cbba5?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=bc78be3e84a52b29ec28309d5de33c25"/> </div>
      <div class="col-sm-12"> <img class="card-img img-fluid smaller" src="https://images.unsplash.com/photo-1513804191723-238c2f3c66f9?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=a58c1bc2427d9e45c5d8d7bc69e54aa0"/> </div>
    </div>
  </div>
</div>

Answer №2

It's important to adjust the height of the images on each side for proper display.

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

Ways to design a JavaScript-generated element

I am attempting to customize a text box generated using JavaScript by assigning an ID to the created element in the following manner: const x = document.createElement("INPUT"); x.setAttribute("type", "text"); document.getElementById("textBoxForText").app ...

javascripthtmlcss

The navigation bar links are unresponsive and the right-aligned navigation items are not displaying correctly

Why are the navbar items "About us" and "Contact us" not clickable? How can we make these items clickable? Also, how do we properly align the navbar item "Login" which is currently positioned at the rightmost part of the navbar? The dropdown menu within t ...

jqueryhtmlcssbootstrap-4

Sticky top navigation bar in Bootstrap 4 followed by a section immediately below

Struggling to achieve a transparent Bootstrap 4 sticky navbar that reveals the background color of the following section on initial load. Once the user scrolls past 50px, I want the navbar to smoothly fade to white. I'm close to getting it right, but ...

csstwitter-bootstrapcoffeescript

Continuous reloading of a webpage is caused by a static multilanguage JavaScript redirection

Can anyone assist me with a dilemma I am facing? My static HTML site supports 3 different languages, and I want to redirect users based on their browser's language settings. Here is the code snippet that I am currently using: var lang = navigator.l ...

javascriptjqueryhtmlhttp-redirectmultilingual

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of <span class="myError">This is a required field.</span> to red https://i.sstatic.net/nRF2c.png select{ color: green; ...

javascriptjqueryhtmlcss

Ways to avoid Bootstrap popovers from automatically breaking lines

I am struggling with adding a tooltip using Bootstrap's popover. Here is what I have tried: <ul> <li>Entry 1 ....................................................................</li> <li>Entry 2 ...................... ...

htmltwitter-bootstrappopover

"Ensure only one checkbox is selected at a time by unchecking the previous

Hi, I'm facing two issues with the code below. The first problem is that when I select checkbox number 3, it automatically selects number 2 as well. I only want this to happen if I manually check it (similar to checkbox number 2). The second issue i ...

javascripthtml

Customizing Bootstrap 4 - Utilizing Color-yiq as an Override Variable

How can I customize bootstrap variables while using the color-yiq function? For example: $body-bg: $black; $body-color: color-yiq($body-bg); Here is the SCSS structure I am using: // Overriding variables from all sources @import "variables"; // I ...

twitter-bootstrapsassbootstrap-4theming

The JSON output displayed my HTML `<br />` as unicode `u003cbr /u003e`, resulting in the `<br />` being shown as text instead of creating a line break

Utilizing ASP.net MVC3, I have retrieved a model in Json format using Jquery.AJAX and am passing it into a Jquery template for rendering. For instance, the Json returned by the server is {"Key":2,"Content":"I'm Jason\u003cbr /\u003ehow are ...

jqueryhtmlasp.net-mvc-3encodingdecoding

Switching up the content of an HTML page with JavaScript or JQuery: what you need

Is it possible to update HTML content using JavaScript or JQuery? https://i.sstatic.net/EWOXg.png I am trying to change the contents from 1 to 5 in a sequential order based on the time shown in the image. How can I achieve this using JavaScript or JQuery ...

javascripthtmljquery

Accordion Caption Image Gallery powered by Jquery

I have been searching for a jQuery image gallery plugin with an accordion caption on the right side, similar to this (please check it out). Despite my efforts, I haven't been able to find one that meets my needs. I came across some relevant plugins li ...

javascriptjqueryhtmlcss

Generating output into several spans of identical class using JavaScript with compatibility for IE8

Trying to make sense of GetElementsbyClassName function here. My goal is to output the value of an input field, identified by ID, to multiple spans that share a common class on click. I had it working fine with ElementId, but now I need to repeat the user ...

javascripthtmlinternet-explorer-8

"Maximizing TableView Cell Height to Utilize the Entire Screen

After reading the tutorial on Appcelerator: Using JSON to Build a Twitter Client, I decided to create my own application to communicate with a Jetty server running some Spring code. My application makes a GET HTTP request that returns contacts in JSON form ...

cssuitableviewappcelerator

The functionality of a Bootstrap popover with a form in data-content is fully operational within Django versions 1.11 and 2.0; however, it appears to encounter issues when utilized in

Below is the code that functions correctly in Django 1.11 and after upgrading also works in Django 2.0. However, it encounters issues in higher versions of Django starting from 2.1 up to 3.1.4. <button type="button" class="b ...

djangobootstrap-4popoverdjango-2.2

What are some methods for embedding HTML content onto a specific section of a webpage in a Node.js + Express application, without displaying it as the

Objective My goal is to insert a portion of HTML into a web page. Issue The page is not displaying properly with the desired styling and layout. I have a specific page that must be written in plain HTML rather than Jade, although I will still be usin ...

javascripthtmlnode.jsexpress

How come my links to the ID sections stop working after the third page?

I am currently developing a horizontally scrolling website with 4 sections. Each section is identified by the following IDs: <section id="section1"> <section id="section2"> <section id="section3"> <section ...

javascripthtmlcssscrollinline

Expanding a modest background image with CSS styling

I'm struggling to grasp the correct CSS syntax for scaling or expanding an image. Despite trying multiple approaches, I can't seem to get it to function properly. The current code in use is: background:url(../images/body_bg1.jpg) fixed repeat- ...

csscoding-stylebackground-imagedreamweaver

Achieving a fixed Bootstrap navbar at the top along with a sidebar: A comprehensive

As I work on developing a webpage that includes both a sidebar and a navbar, it is crucial for me to ensure that the navbar remains fixed at the top for an improved user experience. Problem Statement: However, when I utilize the built-in fixed-top Bootst ...

htmlcssreactjsbootstrap-4

Chrome 67 is not triggering the 'beforeinstallprompt' event for my progressive web app (PWA)

I am currently developing a sample web application that I aim to allow users to install on their Chrome home screen. After ensuring that all the necessary criteria are met, including: The web app is not already installed Meets a user engagement heuris ...

htmlreactjsprogressive-web-appsservice-worker

Contrast between text-transform: none and text-transform: initial

As I embark on my coding journey with freecodecamp.org, I stumbled upon a lesson showcasing the following: Value Result lowercase "transform me" uppercase "TRANSFORM ME" capitalize "Transform Me" initial Use the ...

css