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

How can I achieve a full-width stepper in Bootstrap?

.row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://useloope ...

htmlcsstwitter-bootstrap

Tips for using Jquery to retrieve HTML from external sources

I have successfully managed to display an internal webpage on my HTML, as shown below: <!doctype html> <html> <head> <script type="text/javascript" src="jquery-1.4.4.js"></script> </head> <body> & ...

jqueryhtmlget

What could be the reason behind the button's lack of color change with this particular code?

I'm a beginner in web development and currently practicing HTML, CSS, and Javascript. I've added a button to my html file and would like the color of the button to change when it's clicked on. Here is my HTML code: <button id="box&q ...

javascripthtmlcss

What is causing FF and Chrome to not recognize these <form>'s?

My PHP logic is rendering the following forms with text inputs and a submit button. Everything works fine in IE, but in FF and Chrome, clicking the submit button reloads the page instead of going to the form action URL. I was surprised to find that the &l ...

phphtmlformsfirefoxcross-browser

The div is not displaying the background image as intended

.cover-image { margin-bottom: 0px; height: 350px; color: white; text-shadow: black 0.3em 0.3em 0.3em; } <div class="cover-image" style="background: url('~/images/hdpic.jpg') no-repeat; background-size:cover"> </div> I&apo ...

htmlcss

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

issues with functionality in purecss drop down menu

I have been struggling to create a vertical drop-down menu using the purecss library without success. purecss.io/menus/ This is what my CSS code looks like: <div class="pure-menu custom-restricted-width"> <ul class="pure-menu-list"> ...

htmlcss

Implementing the Audio() Element with JavaScript

I've written the code below, but it's not working properly! When I click on the play button, nothing happens HTML: <button id="play"><img id="playicon" src="img/Polygon 1.svg"></button> JS: I have a variable named 'song0 ...

javascripthtmlwebaudio

Looking for assistance with parsing out four numerical values from an HTML scrape using Python

I currently have code that opens a URL and retrieves HTML data into htmlA Within htmlA, I am attempting to extract 4 specific pieces of information: A date Price 1 Price 2 A percentage The section of htmlA where these 4 pieces of information are located ...

pythonhtmlweb-scrapingdata-extractioninformation-extraction

Fetching deeply nested data from JSON within Angular Material tables - ANGULAR

Having trouble retrieving data from localhost, especially when it's in a different structure. Any suggestions on how to properly extract and display this data for the user? This is my attempted approach, but I'm encountering an error message: ER ...

javascriptjsonangularangular-materialnested

Unusual gaps of white space appearing between React components

Currently developing a small web application with multiple components. The backend functionality is all set, but encountering an unusual styling issue. Specifically, noticing a white space appearing between each component without any clear reason. This ga ...

htmlcssreactjs

Div containing a centered span with a background

<div> <span style= "background: red; text-align: center;"> There seems to be an issue here </span> </div> The text alignment is not functioning as expected. I need the text to be centered along with the background. https://jsfiddl ...

css

The div is incorrect and causing the label and input to move in the wrong direction

Whenever I try to adjust the position of the current-grade-name-input, the entire grade-point-input moves along with it inexplicably. /* final grade calculator: (wanted-grade - (current-grade * (1 - final%))) / final% Ex: have a 80 an ...

javascripthtmlcss

Navigating Through Siblings with Http Agility Pack

When it comes to working with the HTML Agility Pack, it's easy to extract descendants and entire tables. However, how can you utilize this tool in a unique situation like the example below? ...Html Code above... <dl> <dt>Location:</dt ...

.nethtmlhtml-agility-packhtml-content-extractionscrape

Having trouble opening a local file through a link on a local webpage

I'm encountering an issue with linking to a file on the network through a local webpage. I created a basic HTML page with a hyperlink: <a href="h:\myfiles\dir#1\file1.s">View File</a> When I click on the link, I receive an ...

htmlhyperlinkspecial-characterslocal

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

csshtmlweb-applicationsweb

What is the best way to extract additional values linked to the query within the array?

I have successfully retrieved all subcategories of a category using the code below. However, I am now facing an issue where I also want to fetch other fields associated with each subcategory, such as the price if the subcategory is a Product like Smartphon ...

phphtmlmysqlarraysfor-loop

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

jquerycssangularjschart.js

Troubleshooting issue with the spread operator and setState in React, Typescript, and Material-ui

I recently developed a custom Snackbar component in React with Material-ui and Typescript. While working on it, I encountered some confusion regarding the usage of spread operators and await functions. (Example available here: https://codesandbox.io/s/gift ...

javascripthtmlreactjstypescriptmaterial-ui

What is the best way to display a child div without impacting the position of other elements within the same parent container?

As I work with a div html tag within a login form, encountering an error inside this form has presented a challenging issue. The error div sits at the top of its parent div, and ideally, upon activation, should remain within the form div without disrupting ...

javascripthtmlcss