Position a single sizable DIV in line with two smaller ones

I'm attempting to create a layout similar to this:

Here is the code snippet I am using:

!-- BIG ONE LEFT -->
    <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <a href="#"><img style="height: 420px;" class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>

      <!-- Smalls -->
      <div class="col-lg-4">
        <div class="row">
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
          <div class="col-lg-12 col-md-6">
            <div class="card">
              <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>

This is the output that I achieved:

https://codepen.io/anon/pen/WJRGYe

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Utilize responsive margin utilities to adjust the top padding.

<!-- LARGE IMAGE ON THE LEFT -->
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
        </div>
    </div>

    <!-- Smaller Images -->
    <div class="col-lg-4">
        <div class="row">
            <div class="col-lg-12 col-md-6">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
            <div class="col-lg-12 col-md-6 pt-lg-3 pt-0">
                <div class="card">
                    <a href="#"><img class="card-img-top" src="http://placehold.it/700x400" alt=""></a>
                </div>
            </div>
        </div>
    </div>
</div>

Answer №2

If you're looking for a way to create a flexible layout, consider using flexbox

Here is an example of how you can achieve this with HTML and CSS:

<div class="container">
  <div class="row">
    <div class="flex-container">
      <div class="flex-left">
      </div>
      <div class="flex-right">
        <div class="flex-right-top">
        </div>
        <div class="flex-right-bottom">
        </div>
      </div>
    </div>
  </div>
</div>

You can style it with the following CSS:

.flex-container {
  display: flex;
}

.flex-left {
  flex-basis: 66%;
}

.flex-right {
  flex-basis: 34%;
  display: flex; // for its child elements
  flex-direction: column;
}

.flex-right-top, .flex-right-bottom {
  flex: 1;
}

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

Customized Bootstrap Dropdown with the ability to add text dynamically

I am working on a Bootstrap dropdown menu that allows users to generate expressions by clicking on the menu items. For example, when the "Action" item is clicked, it should insert {{Action}} into the textbox. The user can then type something like "Hello" a ...

javascripthtmljquerycssbootstrap-5

explore the route with the help of jquery scrolling feature

Is there a way to implement scrolling functionality for tab headers similar to this demo? I have a list of elements within a div that I need to scroll like the tabs in the demo. I attempted to achieve this by setting the position of the inner elements to ...

javascriptjqueryhtmlcsstabs

Tips for dynamically adjusting an iframe's content size as the browser window is resized

Currently, I am in the process of building a website that will showcase a location on a map (not Google Maps). To achieve this, I have utilized an iframe to contain the map and my goal is for the map to adjust its width based on the width of the browser wi ...

javascriptjqueryhtmlcssiframe

Utilizing multiple class names in Material UI with identical definitions

When working with traditional CSS, it is common to define shared properties between classes like this: .classA,.classB{ background-color: black; } In Material UI and using theming, the equivalent would be: styles = (theme)=>({ classA:{ ba ...

javascriptcssstylesmaterial-ui

Ways to turn off textarea resizing

Is there a way to prevent horizontal resizing on a textarea while still allowing vertical resizing? I find that the textarea often disrupts the design of my contact us page. If anyone has a solution for disabling the horizontal resize feature, please shar ...

htmlcss

Utilize Google Console with Chrome and jQuery to extract the name and URL from HTML content

I am trying to parse the HTML source code in order to extract all links and text from it, and then store this information in a multidimensional array, all within the Google Chrome console. Here's a snippet of the code that needs to be repeated 10 tim ...

javascripthtml

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...

javascripthtmljssor

Guidelines for attaching successful data to an element using URL action including parameter

How can I utilize an AJAX call to retrieve a list of properties and then append one of the list items as a hyperlink with a post method to an Action controller in the MVC framework? success: function (data) { debugger; for (v ...

jqueryhtmlajaxrazorasp.net-mvc-5

Centered buttons placed right next to each other

Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...

htmlcss

Matching up irregular rows in div-made table

I have created a table using div elements that contain images as cell data. When an image is missing, I would like to center the remaining images in the row like this: With all images present: xxxxx xxxxx Missing images (2 in the second row): xxxxx xx ...

htmlcssimage

Conceal the bootstrap hamburger icon if there are no navigation items present

I am working on dynamically populating nav-items within a navbar bootstrap component. There are instances where no nav-items are present, and during those times, I would like to hide the hamburger icon in device viewports. I have identified that the class ...

htmltwitter-bootstrapbootstrap-4

Issues with sending form data to controller using AJAX in Laravel

I'm currently working on a form in Laravel that enables users to purchase products dynamically without needing to refresh the page. While I am successfully able to initiate the AJAX function, I am encountering an issue where the data is not being post ...

phpjqueryhtmlajaxlaravel

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

JavaScript - Clear the localStorage when closing the final tab of a website

Currently, I am working with AngularJS and utilizing $window.localStorage to store the username of a logged-in user. Since localStorage needs to be explicitly deleted, I have implemented an event listener for $(window).on('unload', function(){}) ...

javascriptjqueryangularjshtmltabs

Dropdown colorization

I want to create a dropdown menu in my black navbar, but the text color becomes blue and the background of the pop-up turns white, which clashes with my black background. I need it to be transparent while using Bootstrap v4.1.1 <nav className="navbar n ...

cssbootstrap-4react-bootstrap

Creating padding for a Drawer component in Material-UI with React JS

I'm struggling to set a marginTop for my Drawer within the Drawer class component. Here's the code I've been working with: const theme = createMuiTheme({ root: { marginTop: '40px' }, }) class PageMenu extends React ...

cssreactjsmaterial-ui

Using jQuery to select a specific checkbox from a group of checkboxes with identical IDs

There is an issue with multiple checkboxes having the same ID in an asp.net repeater control. Users can select either email or phone against each record in the repeater rows. In the example below, there are two rows. If you select the email icon in the fi ...

javascriptjqueryhtmlasp.netcheckbox

Problem with CSS layout on Internet Explorer 9

I've encountered some layout difficulties in IE9 and I'm struggling to identify the root of the problem. Even though I'm using Foundation 5, I don't believe that's the issue. The content is within a Foundation grid set at large-12 ...

htmlcssinternet-explorer

Maximizing performance with internal Bootstrap?

An interesting concept to consider is that the fastest website could actually be an empty webpage. Each additional piece of data added compromises performance, yet it's the server's responsibility to send all the code to the client. When using ...

htmlcssperformancebootstrap-4

Achieving a minimum width while centering a row in Bootstrap

Excuse me for this somewhat odd query about Bootstrap, but I seem to be a bit scattered today... I would like to change the background color of my container-fluid div so that it covers the entire width of the page. However, I want the child row-fluid div t ...

htmlcsstwitter-bootstrap