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

"Responsive modal with dynamic height based on percentage and a minimum height constraint

My goal is to design a modal dialog that adjusts its height based on a percentage of the browser window height. The modal should maintain a minimum height to ensure it doesn't become too small, and it should dynamically grow, shrink, and re-center as ...

jqueryhtmlcss

Achieving text alignment with icons in Angular

I'm having trouble aligning my text with the icon next to it despite trying to adjust margins. I would really appreciate any help or suggestions on how to resolve this issue. <div class="notification" [ngClass]="{'no ...

htmlcssangularformstext

React Hamburger Menu not working as intended

I am facing an issue with my responsive hamburger menu. It is not functioning correctly when clicked on. The menu should display the navigation links and switch icons upon clicking, but it does neither. When I remove the line "{open && NavLink ...

javascriptcssreactjsuse-statehamburger-menu

Persistent vertical menu dropdown that remains expanded on sub menu pages

I am struggling to understand how to keep my menu sub items open when on the active page. Although I have tried similar solutions, I have not been successful in implementing them. I apologize if this question has been asked before. My approach involves usi ...

javascriptjqueryhtmlcss

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

javascripthtmlcsstwitter-bootstrapdrop-down-menu

How can I utilize JavaScript to retrieve the background color of a table cell upon clicking?

I am trying to create a function where an alert pops up displaying the background color of a table cell whenever it is clicked. Unfortunately, I am having trouble accessing and retrieving the background color value. The table cell in question is defined a ...

javascripthtmlbackground-color

Can an input element be used to showcase a chosen image on the screen?

I would like to display the selected image from an input element. Can this be done with a local file, accessing the image on the client side, or do I need to upload it to a server? Here is my React code attempt: I can retrieve the correct file name from t ...

javascripthtmlreactjs

The autocomplete attribute is not compatible with GroceryCrud functionality

I attempted to implement the autocomplete feature using an example from w3schools. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_form_autocomplete Although I used jQuery to modify the form and add autocomplete="on" to both the form and input ...

jqueryhtmlautocompletegrocery-crud

The function $(this).addClass() seems to be malfunctioning

While trying to follow a tutorial, I noticed that the style sheet isn't being applied to the clicked element in the list. What could be causing this issue? In the example provided, when a string is added to the text box and the button is clicked, a n ...

javascriptjqueryhtmlcssweb

css center arrow-aligned underline text

Trying to emphasize my text with an additional arrow centered on the line is proving to be a challenge. When attempting this, the text does not align in the center of the page. .souligne { line-height: 17px; padding-bottom: 15px; text-transform: u ...

csstextunderline

Capture latitude and longitude using HTML5 Geolocation and store the values in a PHP variable

In the midst of a project, I am tasked with obtaining the longitude and latitude of a user in order to pinpoint their location. The challenge lies in storing this data in PHP variables, which will ultimately be saved in a MySQL database. Can anyone offer ...

javascriptphpmysqlhtmlgoogle-maps

Strange issue with Firefox when utilizing disabled attribute as "disabled"

I found a curious bug in Firefox: Check out (unfortunately not reproducible in jsfiddle) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> < ...

javascriptjqueryhtmlfirefox

Switching the cursor to an image when hovering over an element is causing inconsistency in hover events triggering

Currently, I am attempting to implement an effect that changes the cursor to an image when hovering over a text element and reverts back to the normal cursor upon leaving the text element. However, this functionality is not working as expected when using R ...

javascripthtmlcssreactjs

Tips on Utilizing If/Else Conditions in HTML Table TD_TAGS

Can someone please explain how to implement an if/else condition within this <td> tag? <td data-label="Status">{{$t('Status'+item.cStatus)}}</td> This is what I am trying to achieve: if(item.cStatus == NW){ color:red ...

htmlcss

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

javascripthtmlvue.jsvue-component

Organize three image links side by side using HTML layout

Hello there! I'm currently working on a website project and I'm struggling with arranging some image links in a specific layout. The grey rectangles you see represent where the images should be placed, all of them are uniform in size (275 x 186) ...

csshtml

Using Python and Selenium to retrieve information from the attribute 'data-label'

https://i.stack.imgur.com/zb7f5.jpg try: details = WebDriverWait(driver, 10).until( EC.presence_of_element_located((By.ID, "DataTables_Table_5")) ) scores_list = details.find_elements_by_tag_name('tbody') for sco ...

pythonhtmlseleniumwebdriver

What steps should I take to make the image appear on the browser?

I am having trouble displaying an image on a webpage in the browser. Despite using the correct path to the image, only the alt tag is being shown along with an ordered list below it. Strangely, Visual Studio Code suggests files while building the path in t ...

htmlnode.js

Interactive mobile navigation featuring clickable elements within dropdown menus

I recently implemented a mobile nav menu based on instructions from a YouTube tutorial that I found here. Everything was working perfectly until I encountered an issue on the 'reviews list' page. The dropdown in the mobile nav is supposed to be ...

javascripthtmlcssreactjsmaterial-ui

What's the best way to use a single tag with a class to replace multiple nested blockquote tags

I have a collection of messy HTML files filled with repeated blockquote tags used to showcase lines of poetry. For example: <blockquote><blockquote>roses are red</blockquote></blockquote><br> <blockquote><b ...

pythonhtmlbeautifulsoupblockquote