Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heights. This desired layout can be seen in the image below:

https://i.sstatic.net/RKtwV.png

I have attempted to use CSS styles to set the heights of the boxes but it doesn't seem to be working well:

#infoBox {
  height: 50vh;
}

#tracklistBox {
  height: 60vh;
}

#playBox {
  height: 50vh;
}

#episodesBox {
  height: 40vh;
}
<body class="d-flex flex-column min-vh-100">

  <div class="container-fluid">
    <div class="row ">
      <div id="infoBox" class="col border">
        1 of 2
      </div>
      <div id="tracklistBox" class="col border">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div id="playBox" class="col border">
        1 of 3
      </div>
      <div id="episodesBox" class="col border">
        2 of 3
      </div>

    </div>
  </div>

</body>

htmlcssbootstrap-5

Answer №1

Although it's not bootstrap, you can still utilize the grid system

 .parent {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }

    .div1 {
        grid-area: 1 / 1 / 3 / 3;
        background-color: aqua;
    }

    .div2 {
        grid-area: 3 / 1 / 5 / 3;
        background-color: yellow;
    }

    .div3 {
        grid-area: 1 / 3 / 4 / 4;
        background-color: violet;
    }

    .div4 {
        grid-area: 4 / 3 / 5 / 4;
        background-color: greenyellow;
    }
<div class="parent">
    <div class="div1">Box 1</div>
    <div class="div2">Box 2</div>
    <div class="div3">Box 3</div>
    <div class="div4">Box 4</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

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

javascriptjqueryhtml

Creating a legitimate svg element using javascript

While working with SVG, I had an issue where I added a <rect> element directly into the svg using html, and then created a new element (without namespace) <circle> with javascript. However, the <circle> element did not display in the svg ...

javascripthtmlsvgconstructorconsole

Alternating row colors using CSS zebra striping after parsing XML with jQuery

After successfully parsing XML data into a table, I encountered an issue with applying zebra stripe styling to the additional rows created through jQuery. Despite my efforts to troubleshoot the problem in my code, I remain perplexed. Below is a snippet of ...

javascriptjqueryhtmlcssxml

What is the reason behind Facebook's use of margin-left: -9999px to conceal elements?

While experimenting with firebug on Facebook's stream, I stumbled upon an interesting discovery regarding the style of the "update options" menu. It appears that they are hiding this menu by using margin-left: -9999px, and displaying it by overriding ...

css

Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors

My CSS code is working perfectly as intended. [data-type='transfer']:has(+ [data-type^='sale_']) { opacity: 0.25; } This CSS snippet targets elements with data-type="transfer" that are next to elements containing data attri ...

cssreactjstailwind-css

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

javascriptcssreactjsmaterial-uiappbar

jQuery-powered responsive layout with three columns

I am currently working on creating a dynamic three-column layout that allows users to resize the columns in their browser. Using jQuery for column resizing, I have successfully adjusted the first two columns but am encountering difficulties with the final ...

jquerycssdynamicresponsive-designmultiple-columns

Changing position with flair in CSS

Is there a way to create a transition effect on an element when it changes position from static to fixed? I attempted using the code: transition: position 2s linear;, however, it does not seem to have any impact. Are there any other methods I could experi ...

htmlcss

Ensure that the text box inside the div adjusts its size in accordance with the dimensions of the window, as the div is already designed

As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...

htmlcsscss-position

Vue.js fails to display multiple uploaded images

I have been working on implementing a multiple image upload feature using vue.js. So far, everything seems to be functioning correctly. However, I am facing an issue where the HTML does not display thumbnails of the images I have selected. Additionally, I ...

javascripthtmlimagevue.jsupload

Room available on the body's right side for tiny gadgets

I'm currently facing a website issue while using Bootstrap. Everything seems to be working fine until I attempt to check the responsiveness of my website. There appears to be an excessive white space on the right side of my body, but only in a specifi ...

htmlcssbootstrap-4

Differences in layout design when using floats and display: table between Chrome and Firefox can affect the visual appearance

Try out this link on JS Fiddle: https://jsfiddle.net/7p81bnto/2/ Here's the HTML code: <body> <main> <div> <div style=" height: 50px; width: 200px; ...

htmlcssgoogle-chromefirefox

It is impossible to change the text color to white

I am working on some JSX code which looks like the following: <div style={Object.assign({}, styles.occupyAllScreen, styles.backgroundContainer)}> <div styles={styles.overimposingText}> <h2 styles={{color: 'white !important& ...

htmlcssreactjsjsx

What is the best way to apply a CSS class to a ComponentRef that has been generated in Angular 5

I am attempting to dynamically add a CSS class to a component right after its creation by utilizing ViewContainerRef and ComponentFactoryResolver. My goal is to determine the class based on which other Components have already been added to myViewContainerR ...

csstypescriptangular5

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

Display endless data within a set window size

I am looking to create a fixed-size window for displaying text from the component <Message/>. If the text is longer, I want it to be scrollable within the fixed window size. See screenshot below: Screenshot export default function AllMessages(){ ...

javascriptcssreactjs

Most effective method for incorporating external content onto website without using iframes (all websites are owned by me)

Managing a collection of websites is no easy task, especially when they are all powered by WordPress. One common feature among these sites is a simple "name, graphic, and social media links" page located at foo.domain.com/partner. Now, I'm looking to ...

phpjqueryhtmliframeload