Struggling to set up a vertical grid using CSS in Bootstrap 3

Question

Struggling to set up a vertical grid using CSS in Bootstrap 3

Currently in the process of working on my final project as a student.

Utilizing Bootstrap 3, I am striving to construct a grid that mirrors the structure depicted in the image below:

Thus far, I have only achieved success in creating grids that span horizontally by %100.

You are welcome to take a look at my project and see what I have accomplished here.

Initially, I tried developing the following class, but ultimately had to comment it out in my CSS due to some unexpected issues arising from it and the removal of body positioning.

body {
    position: relative;
}
.fluid-height {
    height: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
}

html css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

To make your fluid-height div adjust to the screen height, try setting the height to 100vh:

.fluid-height { height:100vh }

For more control, you can also use vh units for different sections of your layout adding up to a total of 100:

.buffer-p { height:10vh; }
.fluid-height { height:90vh; }

If you're worried about browser support for vh units, consider setting up a fallback solution using Javascript as discussed in this post.

Answer 2

To make your fluid-height div adjust to the screen height, try setting the height to 100vh:

.fluid-height { height:100vh }

For more control, you can also use vh units for different sections of your layout adding up to a total of 100:

.buffer-p { height:10vh; }
.fluid-height { height:90vh; }

If you're worried about browser support for vh units, consider setting up a fallback solution using Javascript as discussed in this post.

Answer 3

Answer №2

To achieve this design with Bootstrap, a solution is to assign specific heights to the first and last rows in your layout. One option is to utilize the viewport height unit (`vh`) for defining the heights, as demonstrated in this helpful Fiddle.

While you could opt for fixed heights for your rows, this approach may not be ideal for responsiveness. Using percentage values would require setting `html` and `body` elements to have a minimum height of 100%, however, this method can result in issues when content is dynamically added and the page expands.

Answer 4

To achieve this design with Bootstrap, a solution is to assign specific heights to the first and last rows in your layout. One option is to utilize the viewport height unit (`vh`) for defining the heights, as demonstrated in this helpful Fiddle.

While you could opt for fixed heights for your rows, this approach may not be ideal for responsiveness. Using percentage values would require setting `html` and `body` elements to have a minimum height of 100%, however, this method can result in issues when content is dynamically added and the page expands.

Answer 5

Answer №3

To achieve the desired design effect, you can set both classes to use absolute positioning with a top and bottom of 0px for each class. Below is a snippet of code showing the adjustments I made based on your design:

.bg-black {
  background: #000000;
  position: absolute;
  bottom: 0px;
  top: 269px;
}
.bg-white {
  background: #FFFFFF;
  left: 25%;
  position: absolute;
  top: 269px;
  bottom: 0px;
}

Answer 6

To achieve the desired design effect, you can set both classes to use absolute positioning with a top and bottom of 0px for each class. Below is a snippet of code showing the adjustments I made based on your design:

.bg-black {
  background: #000000;
  position: absolute;
  bottom: 0px;
  top: 269px;
}
.bg-white {
  background: #FFFFFF;
  left: 25%;
  position: absolute;
  top: 269px;
  bottom: 0px;
}

Struggling to set up a vertical grid using CSS in Bootstrap 3

Answer №1

Answer №2

Answer №3

Similar questions

Typescript tutorial: Implementing a 'lambda function call' for external method

Eliminate the hazy white layer covering the exterior of an image that has been blurred using CSS

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

The CSS selector ">" is not functioning correctly, and neither is the "~" selector

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Creating a JavaScript anchor through a backend bean function

What is the best way to arrange these badges in a row?

Update the min-width for col-xl @media in Bootstrap 4 by modifying the HTML styles exclusively

Mandate that users select from the available place autocomplete suggestions exclusively

The HTML modal window is experiencing loading issues

What is the best way to select the element where a user has clicked using JavaScript?

Error encountered: Failure to construct URL for endpoint 'Bookdetails'. Have you overlooked supplying values for the parameter 'book_id'?

uncovering the precise text match with the help of Beautifulsoup

Need to adjust the layout of PHP form

Display elements on hover of thumbnails using CSS

The responsiveness of Angular Material appears to be limited when tested in Chrome's debug mode for different devices

How to Make a Div Tag Fade Effect with JavaScript in an External File

Custom background options for Wordpress developer

Updating URL links with PHP and DOM manipulation

Next.js horizontal scrollbar appearing unexpectedly