Nest Bootstrap columns with rows aligned to the right

Trying to design a front page layout for a takeout restaurant.

Encountering an issue where the last row doesn't align properly due to a double-height element.

Here is the code snippet:

<div class="row">
  <a class="col-md-3 img-box img-hover" href="#">
    <img class="img-responsive" src="http://placehold.it/480x900">
  </a>
  <div class="col-md-9">
    <div class="row">
      (remaining code here)
    </div>
    <div class="row">
      (remaining code here)
    </div>
    <div class="row">
      (last elements of the code here)
    </div>
  </div>
</div>

Attached screenshot of the problem: https://i.stack.imgur.com/b4t1Y.png

Any suggestions on how to make the last two elements fit in the same row as the rest?

htmlcsstwitter-bootstrapnestedalignment

Answer №1

Discover the solution here!

The key is to utilize nested grid rows in order to create the second column, which is essentially composed of two rows.

Check out the code snippet below:

<div class="container">
  <div class="row">
    <div class="col-md-3"><img src="http://placehold.it/100x200"></div>
    <div class="col-md-3">
      <div class="row">
        <div class="col-md-12"><img src="http://placehold.it/100x175"></div>
      </div>
      <div class="row">
        <div class="col-md-12"><img src="http://placehold.it/100x25"></div>
      </div>
    </div>
   <div class="col-md-3">
    <div class="row">
     <div class="col-md-12"><img src="http://placehold.it/100x175"></div>
    </div>
    <div class="row">
      <div class="col-md-12"><img src="http://placehold.it/100x25"></div>
    </div>
  </div>
  <div class="col-md-3"><img src="http://placehold.it/100x200"></div>
  </div>
</div>

Hope this helps!

Answer №2

Consider adjusting the layout of the rows. Visualize the two rows on the left as one unit and the double-height item on the right as another unit, both existing within the same row.

<div class="col-md-9">
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x600">
        </a>
      </div>
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
      <div class="col-md-6">
        <a class="img-box img-hover" href="#">
          <img class="img-responsive" src="http://placehold.it/480x300">
        </a>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <a class="img-box img-hover" href="#">
      <img class="img-responsive" src="http://placehold.it/480x300">
    </a>
    <a class="img-box img-hover" href="#">
      <img class="img-responsive" src="http://placehold.it/480x600">
    </a>
  </div>
</div>

For a live example on codepen, visit: http://codepen.io/narxx/pen/vGbzvR

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

Is it possible for a draggable position:absolute div to shrink once it reaches the edge of a position:relative div

I am facing an issue with draggable divs that have position:absolute set inside a position:relative parent div. The problem occurs when I drag the divs to the edge of the parent container, causing them to shrink in size. I need the draggable divs to mainta ...

javascripthtmlcsscss-positionabsolute

Designing a login window that appears as a popup and blurs out the background page for enhanced security

I am in the process of developing a login/register page and I would like to implement a feature where, upon clicking the 'register now' button on the home page, a popup appears within the same website with a transparent and dull background. An ex ...

htmlcss

Does the frame take precedence over the button?

const div = document.createElement('div'); // creating a dynamic div element div.setAttribute('id', "layer1"); // setting an id for the div div.className = "top"; // applying a customized CSS class div.style.position = "absolute"; // sp ...

javascripthtmliframegreasemonkeyframe

Blending HTML template and WordPress PHP file

I am facing a challenge while attempting to implement a Wordpress template on one of the pages of my website, specifically at http://www.windowblindshadeshutters.com/blog/. The blog has been successfully created, however, I am having trouble preserving our ...

phphtmlcsswordpress

Utilizing HTML5 to Access and Update custom data attributes

I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...

javascriptjqueryhtmljquery-data

Modifying SVG outline colors using CSS

Why is the CSS color: #ffffff not applying to my SVG? This is how it currently looks: https://i.sstatic.net/qh7ng.png This is how I want it to look: https://i.sstatic.net/6tLo5.png Surprisingly, changing currentColor to #ffffff in the SVG itself works ...

htmlcsssvgsveltebootstrap-5

Is there a way to update the button's value upon clicking it?

I've hit a roadblock in my tic tac toe game project during class, and I've been struggling for the past two days to get the X's and O's to show up. The deadline for this assignment is tomorrow! Here are the task requirements: COMPSCI20 ...

javascripthtmlcss

JS client-side form validation involves communicating with the server to verify user input

I currently have an HTML form that is being validated on the client side. Below is a snippet of the code: <form id='myForm' onsubmit='return myFormValidation()'> ... </form> Now, I want to incorporate server-side valida ...

javascriptjqueryhtml

The function in PHP does not arbitrarily return a boolean value

After creating a template file for WordPress, I encountered an issue with a function that I wrote. Despite ensuring that the two variables are different (as I confirmed by printing them), the function consistently returns true. Even after testing and attem ...

phphtmlwordpresstemplates

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

javascripthtmlcssanimationvue.js

Reveal concealed content when a responsive table becomes scrollable on a mobile device

I recently completed a project that was overloaded with tables. I made all the tables responsive, but they still take vertical scroll if they don't fit on certain devices due to their varying widths. For instance, Table A requires vertical scroll o ...

javascriptjqueryhtmlcsshtml-table

Effective ways to replace an image using JavaScript

I am currently working on implementing a show/hide function, but I am encountering an issue with swapping the image (bootstrap class). The show-hide function is functioning properly; however, I am struggling to determine which class is currently displayed. ...

javascriptjqueryhtmltwitter-bootstrap

Explaining how to iterate through objects (one by one) in the This.questionnaire.Profile at every click using JavaScript (answer not found in forums)

Creating a series of questions, each part being stored in This.question = {p1: {...}, p2: {...}, p3: {...}, p4: {...}, p5: {...} etc. (and many more). I want to be able to switch from one article to the next every time I click a button... click => next ...

javascripthtml

Creating a table with multiple rows condensed into a single row (Using Material-UI/CSS)

Here is the array structure I am working with: const sample = [ { name: 'apple', detail: [{'a', 'b'}]}, { name: 'banana', detail: [{'a', 'b'}]}, ]; In order to create a table similar to the ...

cssreactjsuser-interfacehtml-tablematerial-ui

The cascade of CSS elements arrangement

I have two unique boxes set up like this: <div id="box1"></div> <div id="box2"></div> The second box, box2, has a border and I'm looking to cover the top border with box1. To achieve this, I've applied a negative margin- ...

csslayer

The server is currently pointing towards my local C drive directory instead of the desired message location

My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...

javascripthtmlnode.jsexpress

Applying Compiled CSS file in Node.js using Express and SASS not working as expected

Recently, I've delved into utilizing NodeJS with Express to serve my pug files. In addition, I decided to incorporate the "express-sass-middleware" to compile and serve the scss/css files in my project. While everything seems to be functioning as expe ...

cssnode.jsexpresssasspug

Ensure that the select boxes are aligned in a horizontal manner

I am currently attempting to adjust the alignment of select boxes to reduce the staggered appearance. While not all need to be perfectly aligned, it would be ideal to have those that are close enough in alignment. I prefer using HTML to accomplish this tas ...

htmlcssalignment

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Disable the functionality of the next and previous buttons for the Bootstrap carousel when clicking on the outer

Here is the code for the carousel: The next/prev button functions under its respective div, how can I stop it? When I click on the div below the carousel, the carousel continues to move as usual. Below the carousel div, there is another one with a tabbi ...

javascriptjqueryhtmlcsstwitter-bootstrap