Attempting to align two parent divs within a container div to appear side by side, while ensuring that one of the parent divs repeats multiple rows without impacting the second parent

I am in the process of building a custom WordPress theme from scratch, and I have created a template for the posts that will dynamically appear on the front page. To achieve the desired layout, I am utilizing Bootstrap 5.

The structure includes a container div containing a div for categories and separate divs for blog posts. Placing the blog post div inside a parent div resulted in the image appearing above the article title, which is not the intended design. Here is the look I am aiming for:

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

How can I achieve this desired layout while keeping the article image and related divs within a parent div? What would be the best approach to achieve this layout?

<!DOCTYPE html>
<html lang="en">

... (full HTML snippet provided)

^ Click 'Expand' to view the snippet in full-page mode, showcasing the categories section as well.

htmlcsswordpress-themingbootstrap-5

Answer №1

Here is the requested information in the code snippet below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda8b3acb3ae">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <title>Test</title>
  <style>
    #img {
      width: 100%;
    }
  </style>
</head>

<body>

  <div class='row w-100 d-flex justify-content-between'>
    <div class='col-8'>
      <div class="row">
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
        <div class="col-12">
          <div class="row">
            <div class="col-4 p-4">
              <img id='img' src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg">
            </div>
            <div class="col-8 p-4">
              <div class="title mb-3">Article Title</div>
              <div class="date mb-2">Date</div>
              <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio neque debitis temporibus perspiciatis corporis eos voluptatum nam tempore itaque provident accusamus reiciendis, error ipsum magnam! Iste facilis nobis porro fuga.</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-3 p-4">
      <div>CATEGORIES</div>
      <div>Category 1</div>
      <div>Category 2</div>
      <div>Category 3</div>
      <div>Category 4</div>
      <div>Category 5</div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d0e0958e918e93">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>

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

Python Scrapy not able to extract both class name and value from individual div elements

Currently, I am attempting to extract the class names along with their corresponding values from each div listing. To accomplish this, I am inspecting the following webpage: Below is the HTML structure containing the class names and values: <ul class= ...

pythonhtmlweb-scrapingscrapy

Utilizing jQuery to append a new item to a list without using any identifiers and an excessive number of classes

I have been tasked with adding a new link to an unordered list on three different pages using a custom.js override file. Due to system requirements, I must use jquery for this task. However, I am having trouble figuring out how to select and insert the new ...

jqueryhtmldomappend

What's the best way to vertically center text in a div with overflow hidden?

In my ASP GridView, I am trying to display a table with a fixed number of lines in each TD element. To achieve this, I have decided to place a div inside each TD so that I can customize the height and layout. table.XDataGridView td div.inner-table-div { h ...

htmlcssasp.net

"Troubleshoot: Why isn't my CSS media query functioning

I need help with hiding a div on desktop and showing it only on mobile devices. The code can be found here Specifically, I want the following code snippet to execute only in the mobile version: <div class="mobiupdbox"> <div clas ...

htmlcss

Click event handling in JavaScript - Manipulating HTML tables

Currently, I am delving into the world of JavaScript and have been focused on experimenting with Mouse events to gain a deeper understanding of their functionality. <html> <head> <title>Mouse Events Example</title> <scri ...

javascripthtmleventsonclick

Tips for avoiding css reanimation when clicking on a calendar

Recently, I have been experimenting with animating an ASP calendar using CSS and JQuery. My approach involves hiding the calendar initially with CSS and then fading it in when certain events occur. The calendar is contained within an AJAX update panel. How ...

jquerycssasp.netajax

Use the matrix4() of a different object to alter the properties of another (THREE.js version 84)

My goal is to move a cube based on the movement of another cube that has TransformControls attached using the Matrix4() method exclusively. Unfortunately, all attempts to shift the follower cube have been unsuccessful. It's puzzling why the follower ...

htmlthree.js

I'm confused as to why only one of my HTML pages is accepting my CSS styling - not sure what's going on

I am facing an issue where the CSS styles are only being applied to one of the HTML pages I created. Despite checking my code multiple times, everything seems to be correct. All the necessary files are saved on my laptop in the same folder for the website. ...

htmlcss

Instructions on transferring input data from a text box to the next page using a session in PHP

Is there a way I can transfer the data from a text box to another page (demo2) and store all the information in my database? I attempted to use sessions, but although the value is being passed to the next page, the text box data isn't... Check out th ...

phphtmlsession

Leveraging the power of map in an Angular typescript file

I've been attempting to populate a Map in Angular by setting values dynamically. When certain buttons are clicked, the onClick function is invoked. typeArray: Map<number,string>; Rent(movieId: number){ this.typeArray.set(movieId,"Rental ...

javascripthtmlangulartypescript

What methods are available for managing model fields within a for loop in Django?

As a newcomer to Django, I am embarking on the journey of creating a Quiz web application that presents one question at a time. Upon selecting an answer using radio buttons, the application should promptly display whether the response is correct or incorre ...

javascripthtmldjangofor-loopdjango-quiz

A strategy for concealing the selected button within a class of buttons with Vanilla JS HTML and CSS

I have encountered a challenging situation where I am using JavaScript to render data from a data.json file into HTML. Everything seems to be functioning correctly, as the JSON data is being successfully rendered into HTML using a loop, resulting in multip ...

javascripthtmlcssjson

Fixing Half Screen Sidebars

I have a query regarding my coding problem. I am trying to create two pop-ups that occupy half of each screen. As I am new to JavaScript and jQuery, I want to ensure that I am doing it correctly. Is there a way for the left side to slide out from the left ...

javascriptjqueryhtmlwordpress

Displaying database values in an array within an HTML format

I need help displaying database values by replacing the $view['time'] with %time% using an array. For example, if $view['time']='8:00 pm';, then when I write %time% it should display 8:00 pm. It works for a single row, but w ...

phphtmlsql

Tips for showing just one table data cell (<td>) with identical class:

I'm facing a challenge with jQuery, HTML, and CSS. I'm currently in the process of designing a website for a railway company. The Home page is completed, but I've hit a roadblock on the tickets page. Using just HTML, CSS, and jQuery to build ...

htmljquerycss

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

jqueryhtmlcss

Find the value of the nearest input field using jQuery

I'm working with HTML code that looks like this: <tr> <td class='qty'><input class='narrow' value='1' /><i class='fa fa-trash' aria-hidden='true'></i></td> < ...

javascriptjqueryhtml

Adding a fresh, spacious breakpoint in Bootstrap 4 with just CSS

I encountered an issue when the extra large Bootsrap 4 max container width, set at 1140px, was not wide enough for my needs. I aim to ensure that my websites look good on large monitors as well, but the bootstrap grid is too narrow. The most straightforwar ...

htmlcsstwitter-bootstrapbootstrap-4responsive-design

Concerned about encountering undefined values when using the `each` method

function getNewResponse(click, toElement, getParser) { $("body").on('change', click, function (event) { $(toElement).empty(); removeExistingDataFull(); $.ajax({ url: "../Controller/jsonParser.ph ...

javascriptjqueryhtmljson

Stylesheets per module in Angular 2

For my website design, I've decided to adopt a modular structure using sass. To ensure consistency throughout the module, instead of defining stylesheets at the component level, I plan to define them at the module level and import them into each compo ...

cssangularsass