Looking to divide a single full page into four divs of equal size using Bootstrap?

When I set the height of a container to 100% and each content section inside to 25%, why isn't it working as expected? In my browser, each div appears really small and doesn't fill the full page. Can anyone help me figure out what I'm doing wrong here?

This is my HTML Code:

<div class="container-fluid" style="height: 100%">
    <div class="row" style="height: 25%;">
        <div class="col-xs-4 col-md-4" style="background-color:red;">
            .col-xs-9 .col-md-7
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:yellow;">
            .col-xs-3 .col-md-5
        </div>
        <div class="col-xs-4 col-md-4" style="background-color:lavender;">
            .col-xs-3 .col-md-5
        </div>
    </div>

    (The rest of the code remains unchanged)

I have already read this resource on how to make Bootstrap columns all the same height but I still can't seem to understand why setting 100% -> 25% for each div isn't working in this case.

Link to Output Screenshot: https://i.sstatic.net/Fdbey.png

htmlcss

Answer №1

.container-fluid {
   height: 100vh;
}

.row .col-xs-4.col-md-4 {
  height: 100%;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>;

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>;

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>;
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>;

  <div class="row" style="height:25vh;">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>;
</div>

Answer №2

How to Utilize the Percentage Symbol %

html,
body,
.container-fluid {
  height: 100%;
}

.row {
  height: 25%;
}

.row > div {
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      <h1 class="h1Title">Azkaban</h1>
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
</div>

Exploring the Uses of Viewport Height vh

.row {
  height: 25vh;
}

.row > div {
  height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:lavender;">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row&quot;>
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-7
    </div>
    <div class="col-xs-4 col-md-4" style="background-color:yellow;">
      .col-xs-3 .col-md-5
    </div>
    <div class="col-xs-4 col-md-4" style="">
      .col-xs-3 .col-md-5
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-4" style="background-color:red;">
      .col-xs-9 .col-md-

Answer №3

Include the following CSS:

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
.container > [class*='item-'] {
     display: flex;
     flex-direction: column;
}

Make sure to remove any explicit height declarations on the container element. Keep in mind that using viewport heights may not be fully supported by Safari.

If you need a reference, check out this example on this website

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

Four identical columns with no outer margin and evenly spaced inner margins

This is a variation of the discussion on removing right and left border space in table-cell display elements. Despite attempting to use divs with equal inner margins, I encountered unexpected spacing causing the last div to wrap. You can view my attempt ...

htmlcss

Including files from different directories using PHP

I'm currently involved in a project for school. The index is functioning properly, however, when I click on 'Lab 1 Q1' located at labs/1/1.html, it does direct me to the page but my <?php include('/main-nav.php') ?> isn' ...

phphtmlwamp

When hovering, the CSS border-bottom should extend

I am looking to create an animated border effect. When hovering over the link, I want the border-bottom to extend seamlessly from left to right. After much searching, I am still unsure what this effect is called. Below is the code I have: .a{ width ...

htmlcss

What are the benefits of keeping JavaScript and HTML separate in web development?

Recently, I came across the concept of Unobtrusive JavaScript while researching best practices in the realm of JavaScript. One particular point that grabbed my attention was the idea of separating functionality (the "behavior layer") from a web page's ...

javascripthtmlangularjs

Select item with h1 and p tags using Chromedriver in an HTML document

I am working on a specific article section that includes a h1 heading and p paragraph representing the product name and color. I am looking for a way to click on this particular item only when both conditions of the product name and color match the expec ...

pythoncssgoogle-chromeseleniumselenium-chromedriver

Images loading slowly causing scrolling to be slow

I've developed an image manager that displays a fixed grid of images in thumbnails. The size of the thumbnails is already relatively small, so reducing them further is not an option. To improve performance, I implemented lazy loading and used a deboun ...

javascriptcssangular

Placing Google Adsense among the content created using a JQuery loop

I have implemented a search function on my website that retrieves results from the database in JSON format. These results are then dynamically displayed by appending a DIV or SPAN element within a loop. $("#btnGetresult" ).click(function(e) { var ...

javascriptjqueryhtmladsense

The issue of why padding left is not functioning correctly in Bootstrap version 5.3.1

</head> <body> <header class="bg-info "> <div class="container"> <div class="row text-white"> <div class="col-md-6 p-3 pl-6 "> ...

javascripthtmlcssbootstrap-5bootstrap-tags-input

Creating a single header that can be used across multiple pages in HTML

Hello there, I've been on the hunt for a JavaScript code that will allow me to create one header for multiple HTML pages. Unfortunately, my search has come up empty-handed. Can anyone offer some advice on how to achieve this? Thank you! ...

javascripthtml

My goal is to adjust the height of every text box on the page

Seeking guidance here. Within the webpage I'm developing, there are multiple 'Divs' containing 'text boxes' and 'background images' within them. I aim to adjust the height of each text box on the page. The height of each ...

javascriptjquerycss

Encountering a problem with my Solidity map(int,string) function when attempting to use JavaScript to pass values back to HTML

I'm struggling to update my labels using a JavaScript function call to my Solidity smart contract. My goal is to create a map with integer and string values in Solidity, then display these values in HTML upon clicking a button. But for some reason, th ...

javascripthtmlsolidity

During the Internet Explorer browser, the command will run two times

<div style="width:expression(alert('1'));"></div> When this code is executed in IE7, it will trigger the alert function twice. Why does this happen? ...

javascriptcssinternet-explorer

Exploring elements using dynamic xpaths in selenium

When working with Selenium WebDriver, I am facing difficulties selecting the <input class="cs-autocomplete-input" tabindex=""> element due to its fluid ID. This is because there are multiple items with the same class name on the web page, making it c ...

htmlcssselenium

Adjust the width of a div element automatically using CSS

I have a dropdown bar with various options that I want to display inline while ensuring they can scale to occupy the entire width of the div, allowing for multiple options per row. Below is a screenshot showing my current progress: https://i.sstatic.net/3 ...

javascripthtmlcss

I'm having trouble getting the "spacing" styling attribute to work in Material UI when I attempt to space out elements within my Box component. Can anyone explain why this might be happening?

Within my React 16.10 application, I am utilizing materialUI components. Specifically, I have incorporated two buttons inside a Box element. <Box style={{ marginTop: "3rem", marginLeft: "1rem", display: "f ...

cssreactjsmaterial-uispacingbox

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

htmlcssangularflexbox

Completely overlay a div with another div that is the exact same size

Issue: I am experiencing visibility of the underlying divs, even though they are supposed to be covered by another div of the same size. .gauge-wrapper { position:relative; margin:20px; background-color: black; } .gauge-arc { position:a ...

htmlcssborderz-index

Issues with Forms Affecting my Footer

One of the best methods to understand this issue is to view it live. The footer on the homepage looks great at www.fishingreports.com. However, there seems to be a problem with the footer at www.fishingreports.com/users/register. Whenever I copy the cod ...

htmlcssfooter

php redirecting form data

Being a beginner in PHP, I'm aiming to create a script that can direct me to a specific address based on the value of an input form. Is this the right approach? index.html <form action="process.php" method="post"> <input type="text" nam ...

phphtmlforms

What is the best way to display matching columns in a table on a single row?

I am looking to display information from my database in a table format. Specifically, I want to only show the Math subject and list the units from UI to the last unit available in the database. Below each unit, I would like to display the corresponding hom ...

phphtmlmysqlsqldatabase