Nested Bootstrap structure with a column containing two sub-columns

I am attempting to create a grid layout using bootstrap. The layout should consist of a full 12 column layout on desktop, with an 8 column grid and a 4 column grid within it. The 8 column grid will contain an image/text, while the 4 column grid will have two elements stacked vertically each containing image/text.

On smaller breakpoints, the layout should display three equal size elements stacked vertically.

I've tried various methods but haven't been successful in achieving this layout. Below, alongside the HTML code, you will find a sketch illustrating what I'm aiming for. Any tips or suggestions? I feel like achieving this may not be possible out of the box with bootstrap 4.

<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">

<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</div>

Here is a sketch for reference:

https://i.sstatic.net/qqTBK.png

htmlcssbootstrap-4

Answer №1

To achieve the desired layout, make sure to specify the smaller column width and avoid unnecessary wrapping of rows and columns. Here is a functional example with the addition of the col-12 class for screens smaller than md:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
    <div class="col-12 col-md-4">
      <div class="row">
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
        <div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
        </div>
      </div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
    </div>
  </div>
</div>

Answer №2

Why not give this code a try?

.row {
  margin: 20px 0;
}

.col .card {
  height: calc(100% - 10px);
}

.card{
  margin-bottom: 10px;
}

.card img {
  width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

 <div class="container">
  <div class="row">
    <div class="col col-sm">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
      <div class="card">
        <img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
        <div class="card-body">
          <p>Some text Some text goes here Some text goes here Some text goes here</p>
        </div>
      </div>
    </div>
  </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

Calculate averages of an array and show them when the page loads using Vue

In my coding project, there is an array named products that follows this specific structure: { "_id": "150", "name": "Milk", "description": "Skimmed", "price": "10", "ratings": [ ...

javascripthtmlvue.js

iOS Safari browser does not support changing the caret color in textarea

Seeking a solution to hide the text cursor (caret) from a textarea on iOS browsers like Safari and Chrome. Despite trying the caret-color property, it does not seem to work. Are there any alternative methods to achieve this? One approach I attempted is b ...

javascripthtmlcssiossafari

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

csssymfony

Plugin for jQuery that paginates text when it overflows

Looking for a solution here. I have a fixed width and height div that needs to contain text. If the text exceeds the size of the div, I want it to paginate with dots at the bottom of the page indicating each page, similar to slideshow functionality. Are t ...

jqueryhtmlcssclient-side

Adjusting the height of a jQuery Mobile collapsible post-expansion

My jQuery collapsible is not resizing properly to fit the expanded content. Below is an example of the collapsible structure: <div class="row collapsibles" data-role="collapsible"> <h1>Supercategory A</h1> <div class="col-xs-7 ...

jquerycssjquery-mobilejquery-mobile-collapsible

What is the best way to align bars at the bottom of a CSS vertical bar chart?

Currently, I am exploring the functionality of two distinct bar charts that I designed using HTML and CSS: one horizontal and the other vertical. Is there a way to shift the bars in my vertical bar chart from the center down to the bottom? https://i.sstat ...

htmlcss

The oval shape of a Canvas circle in HTML5 is due to its width and height properties

var qcanvas = $('#canvas'); var canvas = ctl_canvas[0]; var context = canvas.getContext('2d'); qcanvas.css('border', '1px solid black'); qcanvas.css('width', 400); qcanvas.css('height', 75); Afte ...

jqueryhtmlcanvasheightwidth

Having issues with implementing CSS3 animations on my webpage

I'm having trouble implementing a bouncing mouse animation on my website. The code works perfectly on another site, but on mine, it's not functioning at all. Here is the CSS code: .mouse { display: block; margin: 0 auto; text-alig ...

csscss-animations

Having trouble getting overflow:auto to work with CSS3 transformed child elements? Looking for a recommended workaround?

Issue: Browsers (FF5, Chrome12, IE9) are not recognizing css3 transforms applied to a child element inside a div when calculating the scrollHeight and scrollWidth of the containing div's scrollbars with "overflow: auto;". <style type="text/css"> ...

htmlcsscss-transforms

Prevent Symfony2 Twig from rendering HTML content

Is there a way to disable the rendering of HTML responses in Twig? I am currently working on a RESTful API and my goal is to completely prevent HTML rendering. For instance, if I access /foo/bar without an oAuth Access Token, Symfony2 should reply with a ...

htmljsonrestsymfonytwig

Saving an image and form data together in local storage can be accomplished by using JavaScript

Is there a way to save an image to local storage along with form data? I would like to store the form data in a database and keep the image in local storage. Any help would be greatly appreciated. Thank you! <form id="saveImageForm"><input type ...

javascriptjqueryhtml

Issue with Angular date field not displaying invalid input when form is submitted

I am encountering an issue with my simple form that contains only one date control. Whenever I input an invalid date like 30-Feb-2018, the control becomes invalid and my CSS style triggers a red border to indicate the error. The problem arises when the us ...

htmlangularformshtml-input

Consistently maintaining a uniform distance between icons and the border box is essential

I am working on a team overview for a company where data such as name, job title, and information are fetched from the database. Due to varying lengths of information, the icons are not aligning properly in one line. https://i.sstatic.net/cEmKj.png Does ...

htmlcsssass

The spinner persists even after the fetch api call

The issue I'm facing with my song lyrics app is that the spinner does not disappear after fetching data from the API. It seems like JavaScript is unable to detect the presence of the spinner even though it exists when the remove function is called. I ...

javascripthtmldom

Using Jquery to loop through a function for every select box that is added dynamically

Encountering some challenges with jQuery while attempting to utilize the same function and iterate over select boxes that are dynamically generated with jQuery's clone() method. Here is a snippet of the content being cloned: <select name="expense ...

javascriptjqueryhtmlclone

Obtain the href attribute's value from an HTML document using Javascript

I'm facing an issue here. Currently, I am utilizing Grid.js (http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/) for my project. Now, my goal is to incorporate a Lightbox with multiple thumbnails inside the dropout provide ...

javascriptjqueryhtmlfetch

The footer seems to be losing its stickiness and not staying at the bottom when I

My goal is to create a sticky footer for my webpage. Once you click the add new sports button, a drawer slides out and the footer remains fixed at the bottom. However, as I scroll down the page, the footer moves up instead of staying in place. I have tried ...

javascripthtmlcssreactjsmaterial-ui

Separate line rendering of checkboxes in CSS and Vue

I am struggling with styling Vue checkboxes to display side by side until they wrap to a new line. I have tried modifying the code structure, but the existing CSS classes are causing issues. I have created a simplified example on CodeSandbox. Here is a sn ...

cssvue.js

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

javascriptphpjqueryhtmlajax

Creating a Dynamic Clear Button for a Text Area in Angular

Working on my Angular application, I have implemented a form with a textarea element. My goal is to incorporate a clear button inside the textarea element that should: Appear only when the textarea is focused Disappear when the textarea is out of focus ( ...

javascripthtmlangulartypescriptangular-forms