What is the method for setting a cell's row-span to 2 using bootstrap?

Is there a way to make the red cell in a Bootstrap grid have a row-span=2 and fill the second row as well?

.cell {height: 100px; border: 1px solid; border-collapse:collapse;}
.red {background: red;}
.yel {background: lightyellow;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"/>
<div class="col-xs-3 cell yel">content 1 -3</div>
<div class="col-xs-5 cell yel">content 2 -5</div>
<div class="col-xs-4 cell red">content 3 -4</div>
<div class="col-xs-5 cell yel">content 4 -5</div>
<div class="col-xs-3 cell yel">content 5 -3</div>
https://i.sstatic.net/MyS8G.png

csstwitter-bootstrap

Answer №1

2) Styling with .pull-right & red row

.cell { min-height: 100px !important; outline: 1px solid; }
.red { background: red; }
.yel { background: lightyellow; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      rel="stylesheet"/>
      
<div class="container-fluid">
  <div class="row red">
    <div class="col-xs-3 cell yel">content 1 -3</div>
    <div class="col-xs-5 cell yel">content 2 -5</div>
    <div class="col-xs-4 pull-right">content 3 -4</div>
    <div class="col-xs-5 cell yel">content 4 -5</div>
    <div class="col-xs-3 cell yel">content 5 -3</div>
  </div>
</div>

1) Using .pull-right & height: 200px;

  1. The .pull-right class can be utilized to float this cell to the right.
  2. Increase the height of the cell for a double-cell effect.

.cell        { height: 100px; outline: 1px solid; }
.double-cell { height: 200px; outline: 1px solid; }
.red { background: red; }
.yel { background: lightyellow; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      rel="stylesheet"/>
      
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 cell yel">content 1 -3</div>
    <div class="col-xs-5 cell yel">content 2 -5</div>
    <div class="col-xs-4 double-cell red pull-right">content 3 -4</div>
    <div class="col-xs-5 cell yel">content 4 -5</div>
    <div class="col-xs-3 cell yel">content 5 -3</div>
  </div>
</div>

Answer №2

Give this code a shot.

See a live example at CODEPEN

Here's the HTML:

<div class="row">
  <div class="col-xs-8">
    <div class="row">
      <div class="col-xs-5 cell yel">content 1 -5</div>
      <div class="col-xs-7 cell yel">content 2 -7</div>
      <div class="col-xs-7 cell yel">content 4 -7</div>
      <div class="col-xs-5 cell yel">content 5 -5</div>
    </div>
  </div>
  <div class="col-xs-4 red">content 3 -4</div>
</div>

And the CSS:

.cell {
  height: 100px;
  border: 1px solid;
  border-collapse: collapse;
}

.red {
  background: red;
}

.yel {
  background: lightyellow;
}

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Hope this is useful for you.

Enjoy your coding journey :)

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

There is a button on my website that uses a small piece of Javascript to post a tweet, but unfortunately, it is not functional on mobile devices

Check out this link to view the demonstration - http://codepen.io/illpill/pen/VbeVEq function sendTweet(message, author) { window.open('https://twitter.com/intent/tweet?hashtags=thequotemachine&text=' + encodeURIComponent('"' + m ...

javascriptjqueryioscsstwitter

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

As the background image shifts, it gradually grows in size

I'm attempting to create an interesting visual effect where a background image moves horizontally and loops seamlessly, creating the illusion of an infinite loop of images. Using only HTML and CSS, I've run into an issue where the background ima ...

javascriptjqueryhtmlcss

Two pages with contrasting fonts but identical CSS styling

Within my website, I have utilized the code font-family: 'Caesar Dressing',cursive,"brushsci"; However, it appears that two different fonts are being displayed on two separate pages. Please take a look at the font styles in the header menu of t ...

phphtmlcssfonts

How to align text to the bottom of a div using CSS

I am struggling to position the text 'About' at the bottom of an image. The red line marks the spot where I want the text aligned at the bottom. However, every method I try results in inconsistent outcomes when viewed on desktop and mobile device ...

htmlcss

Enhance design based on scrolling function in React

I've been trying to update the color of my header when a user scrolls the page, but for some reason, my onScroll method isn't working. Can anyone help me figure out why and how to solve this issue? The onScroll method is triggered by the bottom T ...

javascriptcssreactjsgatsby

Adjust the font size to fit within the container

My webpage features a bootstrap 4 container with three columns that adjust on screen sizes above the md breakpoint (col-md-4). Each column contains an img with the class img-fluid, and when hovered over, text description appears. I want this hover text to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How can you center the initial line of formatted text while keeping the rest left justified using just CSS?

I need help with formatting existing data without using JavaScript. The goal is to make the first line bold and centered, while the rest of the lines should be justify formatted. However, I'm having trouble achieving this as either the first line gets ...

htmlcss

Strange CSS/browser storage glitch

UPDATE: JUST REALIZED THIS ISSUE IS ONLY OCCURRING ON FIREFOX, NOT CHROME ANOTHER UPDATE: Oddly enough, this problem only occurs locally. When I push it to GitHub, everything works fine. So strange. I suppose that means it's not a major issue. On my ...

javascriptcssgoogle-chromefirefox

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Is it normal for a dropdown in the pusher not to show when using a sidebar? I tried setting overflow-visible but it didn't work. Any suggestions on how to resolve this? Check out this JSFiddle example: https://jsfiddle.net/3djmjhn5/1/ Code: $(&ap ...

htmlcsssemantic-ui

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons

A Step-by-Step Guide on Adding Content After the Bootstrap Slider Using Absolute Position

Check out my project here: I'm currently working on a bootstrap carousel that has absolute positioning and a z-index of -1. However, I'm facing an issue where I can't figure out how to place a div right after the carousel. I've tried s ...

jqueryhtmlcsstwitter-bootstrapcarousel

Expansive Offspring Division stretching to the Entire Vertical Length of its Guardian Division

I'm attempting to achieve full coverage of the parent div section by my child div section. Take a look at the Example URL (specifically where the Canadian Flag Stand Up Paddle Boarders are located) towards the bottom: Essentially, when I set the widt ...

htmlcssdynamicheight

The error message InvalidCharacterError is displayed when the attempt to create a new element using the 'createElement' method on the 'Document' object fails. This is due to the tag name provided ('/static/media/tab1.fab25bc3.png') not being a valid name

Hey everyone! I'm new to using React and I decided to try cloning Netflix by following a tutorial on YouTube. However, I've encountered an issue with rendering an image in a functional component. The error message I'm receiving is as follow ...

javascriptcssreactjsimage

CSS declarations that have not been acknowledged or acknowledged

While working on a client's stylesheet today, I came across the following code: p { -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: manual; orphans: ...

htmlcss

Add at the beginning of each row in the text area

I have a small text area on my webpage where I want to add ">>" to the beginning of each line. My initial attempt was to use this code: $("#mytextarea").prepend("EvilHacker001>>"); Unfortunately, this did not produce the desired result. I se ...

jqueryhtmlcsstextareaprepend

Exclusive Chrome Bug Found in Form Tag

My webpage functions flawlessly on IE 7, 8, and 9, Firefox, Safari, and Opera. However, when I view it on Chrome, the positioning of the DIV containing the form is not always correct. If I remove the form tag, the issue goes away. There are no floats, only ...

htmlcssformsgoogle-chromeposition

Adjust the CSS to ensure that all elements have the height of the tallest element in the set

Can anyone help me solve a design issue I'm facing? I have a div with three floating buttons, but one of the buttons is taller than the others due to more content. I'm looking for a way to ensure that all buttons are the same height as the talle ...

htmlcssflexbox

javascript show and hide navigation bar

I am currently working on a HTML menu that includes a button to open it and an unordered list : <nav class="menu"> <button> <h1>Menu</h1> </button> <ul class="mylist" ...

javascripthtmlcss

Could anyone assist me in positioning my personalized Context Menu beside my cursor?

If possible, I would appreciate some assistance with my custom context menu. It may require some minor tweaks or a fresh idea on how to address the issue. Ideally, I would like to keep the HTML and CSS somewhat unchanged. [I'm not sure what to write ...

javascripthtmlcssresponsivecontextmenu