Create a Bootstrap layout with three columns and three rows, where the third column has a height

I am trying to achieve a specific layout using the col-lg-4 class.

My main goal is to make the third column span across all three rows without creating excessive white space between them. The current layout looks like this:

Is it possible to do this in Bootstrap (without resorting to the Bootstrap 2 span classes)?

Below is a generalized version of the code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-4">
      Some text here.
    </div>
    <div class="col-lg-4">
      Some text here.
    </div>
    <div class="col-lg-4">
      <!-- THIS NEEDS TO ROW SPAN -->
      <p>Content for the third column that needs to span multiple rows.</p>

      <p>More content for the third column that spans multiple rows.</p>

      <p>Even more content for the third column that spans multiple rows.</p>
    </div>
    <div class="col-lg-4">
      Some text here.
    </div>
    <div class="col-lg-4">
      Some text here.
    </div>
    <div class="col-lg-4">
      Some text here.
    </div>
  </div>
</div>

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To achieve the desired layout, you should utilize nested col-s. In this situation, combine col-lg-8 with col-lg-4

Within col-lg-8, create additional nested cols by using row

Include col-xs-* for demonstration purposes.

[class*="col-"] {
  border: red dashed 1px
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8 col-lg-8">
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-lg-4">
      Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
    </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

Guide to implementing Infinite AJAX Scroll in jQuery with a continuous loop

Being a beginner in javascript, I am eager to learn new techniques. I am currently working on implementing an infinite Ajax scroll into my code. Here is a snippet from my php page: <div class="row row-sm padder-lg "> <?php foreach ($top->fee ...

phpjqueryhtmlajaxjquery-ias

What is the best way to use jQuery ajax to send various row identifiers when updating table data on another PHP page by selecting checkboxes?

When I select both of the green checkboxes, only the most recent table id is sent. The code below includes both the checkbox markup and jQuery function. Checkbox: <div class='md-checkbox has-success'> <input type='checkbox&apo ...

javascriptphpjqueryhtmlajax

Hiding a div with Javascript when the Excel dialog box is loaded

I have a piece of JavaScript code that is activated when the user clicks on an excel image. $("#excel").on("click", function () { $('#revealSpinningWheel').reveal(); $(window).load(function () { $('#revealSpinningWheel').hide ...

javascriptjqueryhtmlexcel

Display HTML content from a JSON array with the help of ng-bind-html

I am looking to display HTML tags stored in a JSON object property within a modal window. Below is an example of the JSON object: { "fileUploadCategories": [ { "id": "Bread", "title": "GrandmaBread", "info": "Some info text.", "restService": "emp ...

htmljsonangularjs

Is it possible to validate link clicks and integrate PHP within JavaScript functions?

Before anyone mentions security concerns, please refrain. Imagine I have an index.php. This page contains several links to 'home.php', each with different data stored in the href attributes. For example: Link 1: 'home.php?data=1&count ...

javascriptphphtmlsecurity

Leading astray — using htmlentities will not function

UPDATE (Instead of deleting this question, I'll keep it as a reminder that errors are sometimes found in unexpected places...) I apologize for leading you down the wrong path with this question. The issue causing the "Actual result" was actually loc ...

phphtml

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

htmlcss

Different option for animated side slider based on location

Whenever I click on this div, it slides out smoothly. Check out these images to get a visual of what I am aiming for: This is how the Div looks when collapsed by default https://i.stack.imgur.com/zJIsA.png Once slid out, the Div looks like this (highlig ...

javascriptjqueryhtmlcss

Tips on targeting a node that is dynamically generated within a function and styling it externally

Is there a way to style or change divs created within a function, but without making the change within that same function? Since variables are in the local scope of functions, it can be challenging to access these created divs for future styling or changes ...

javascripthtml

HTML 5 - GRUNT BUILD: The error message "Fatal error: Object has no method 'compact'" is causing issues with the build process

Currently, I am working on a project using GRUNT. However, I encountered an error while building the project: Running "cuff:dev" (cuff) task >> Building src/pages/home Fatal error: Object home.less has no method 'compact' The erro ...

htmlgruntjsnpm

The secrets behind the seamless, fluid layout of this website

Upon exploring the website www.emblematiq.com, I noticed that it features a fluid/liquid layout. Despite analyzing the code, I am unable to decipher how this effect is achieved. The layout appears to be fixed width with the canvas element set at 1180px. D ...

htmlcssfluid-layoutliquid-layout

Set the background image width to 75% of the screen size

I want to use this image as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid. Is it possible to achieve this? I attempted the following CSS: ...

htmlcsstwitter-bootstrap

Tips for incorporating an anchor tag within an img tag in HTML?

Is it possible to add an anchor tag inside an img tag in HTML? <img src="img.jpg" alt="no img" /> I want to include the following inside the img tag: <a onclick="retake();" > Retake </a> The goal is to allow users to retake a photo by ...

javascriptjqueryhtml

Unable to view Bootstrap modal upon click

Whenever I attempt to display a modal using Bootstrap, it mysteriously appears upon page refresh but fails to show up when the button is clicked. Ideally, I want the modal to only appear when the user clicks on the button. The structure of my html file lo ...

jqueryhtmlcsstwitter-bootstrapmodal-dialog

Setting text alignment in Bootstrap based on breakpoints

Imagine this code: import React from 'react' import DarkPattern from '../Assets/dark-pattern.jpg' const Profile = () => { return ( <div> <section className="bg-dark text-light text-center " ...

cssreactjswebbootstrap-4react-bootstrap

Does the onchange function in the dropdown list only work when the first item is changed?

Here is a snippet of my HTML code featuring a list item generated from a database using a foreach loop: <select class="form-control select" id="inventoryitem" name="inventoryitem" onchange="getunit();"> <option>---Select an item---</o ...

javascriptphphtml

The issue with the CSS combination of :after and :hover:after across different HTML elements

Encountering an issue while attempting to create a rollover effect using CSS :after and :hover pseudo-elements. Check out the clock and facebook icons on the right side by visiting: See below for the CSS code: .icon { background: url('. ...

csshoverspritelesspseudo-element

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

htmlreactjsruby-on-railsreact-rails

Trouble Viewing Fonts on Mobile Devices like iPhones

I am experiencing a frustrating issue on my website. While using Agency FB and Calibri fonts, they appear correctly on all desktop browsers. However, when accessed from my iPhone, a different standard font is displayed instead. Both the logo and text with ...

htmlcssiphonemobilebrowser

Looking for a smart way to extract all the selected elements from a form?

I am attempting to retrieve all the checked items from this form using JavaScript. I have looked at previous solutions, but none of them fit my requirements. <form id="checkform" class="container" style="margin-top:20px;"> <input type="checkb ...

javascriptjqueryhtml