Achieving consistent column heights in Bootstrap by aligning neighboring columns

I am striving to achieve a layout similar to this: https://i.sstatic.net/HIEB4.png

However, in Bootstrap, I am currently getting this: https://i.sstatic.net/sLw1v.png

My desired layout specifications are as follows:

  1. Width ratios should be in the proportion of Sites : User : Download = 2:8:2
  2. Sites-Banner, Sites-Search, Download-Banner, Download-Summary all need to have the same heights
  3. User-Login must have a combined height equivalent to that of Sites-Banner & Sites-Search (or Download-Banner & Download-Summary)
  4. Heights of Sites-List, User-Operations, Download-Details must be independent and able to extend as needed.

Here is my code for reference: Fiddle (Please see Update 1)

<div>
  <div class="row">
    <div class="col-2">
      <div class="row">
        <div class="col bg-primary">
          <p id="sites-banner">Sites Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-secondary">
          <p id="sites-search">Sites Search</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-success">
          <p id="sites-list">Sites List</p>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div class="row">
        <div class="col bg-danger">
          <p id="user-login">User Login</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-warning">
          <p id="user-operations">User Operations</p>
        </div>
      </div>
    </div>
    <div class="col-2">
      <div class="row">
        <div class="col bg-info">
          <p id="downloader-banner">Download Banner</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-light">
          <p id="download-summary">Download Summary</p>
        </div>
      </div>
      <div class="row">
        <div class="col bg-dark">
          <p id="download-details">Download Details</p>
        </div>
      </div>
    </div>
  </div>
</div>

  1. I managed to align the height of User-Login with Sites-Banner & Sites-Search [Completed: Update 1]
  2. Sites-List, User-Operations & Download-Details do not extend independently

Update 1: New Code

  1. I was successful in setting the User-Login height to match the combination of Sites-Banner & Sites-Search, by enclosing them within a single row
  2. However, I still face difficulty in making the heights of Sites-List, User-Operations, Download-Details independent.

Update 2: New Code

  1. Managed to make the heights of Sites-List, User-Operations, Download-Details appear distinct.
  2. However, there seems to be excessive padding between columns, causing misalignment and white space.

https://i.sstatic.net/2o8mL.png

Update 3: Fiddle

While it may seem in Update 2 that Sites-List, User-Operations & Download-Detail vary in height, they actually do not. This illusion is due to only applying background-color classes to the enclosing div element containing the list items.

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

To address the padding issue between columns, applying a mx-0 class attribute on the two rows will set the margin to zero. By default, rows have a negative margin of -15px. Refer: Bootstrap negative margin on rows

If mx-0 is omitted, horizontal scrollbars may appear on the page. Refer: Bootstrap columns cause horizontal scrollbar

Key Points:

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

.col p{
  margin: 0;
}

.user-login{
  height: 100%
}
<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Downloader</title>
  </head>

  <body>

    <div class="container-fluid">
      <div class="row">
        <div class="col">
          <div class="bg-primary">
            <p>Sites-Banner</p>
          </div>
          <div class="bg-secondary">
            <p>Sites-Search</p>
          </div>
        </div>
        <div class="col">
          <div class="bg-danger user-login">
            <p>User-Login</p>
          </div>
        </div>
        <div class="col">

          <div class="bg-info">
            <p>Download-Banner</p>
          </div>
            <div class="bg-light">
              <p>Download-Summary</p>
            </div>

        </div>
      </div>
      <div class="row">
        <div class="col">
          <div class="bg-success">
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
            <p>Sites-List</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-warning">
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
            <p>User-Operations</p>
          </div>
        </div>
        <!-- <div class="clearfix"></div> -->
        <div class="col">
          <div class="bg-dark">
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
            <p>Download-Details</p>
          </div>
        </div>
      </div>
    </div>

  </body>

</html>

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

Obtaining data with jQuery.Ajax technology

I am attempting to retrieve real-time data from a different URL and display it in a text field every second without refreshing the entire page. The content of the URL is constantly changing, so I want the field to update accordingly. However, despite my ef ...

javascriptjqueryhtmlajax

Is it possible to enable auto-completion for IDs in a separate CSS file using WebStorm 7?

I am new to using WebStorm 7 and currently working on building a simple HTML/CSS website. Initially, I included my CSS within the HTML file using the style tag, but now I have decided to move it to a separate file. Auto completion is functioning for all h ...

htmlcsswebstorm

How to reposition the Bootstrap navbar Logo from the left to the center

I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order? Check out the current Navbar layout below: <nav c ...

javascripthtmlcss

Is it possible to execute a PHP script within a .css file and ensure it functions correctly?

Recently, I've been making some changes to the .css file in order to get my PHP codes to work. However, when I insert them as usual, they appear as regular text. I'm curious to find out if it's possible to execute a PHP file within a .css fi ...

phpcss

Troubleshoot: Why is the Chrome Extension content script failing to prepend to the body

Currently, I am developing a content script for a Google Chrome browser extension that inserts a horizontal bar at the top of any webpage visited by the user. The issue arises when visiting google.com as Google's navigation bar covers my bar. Here is ...

jquerycssgoogle-chrome-extension

Is there a way to compel the browser to re-cache an image?

In my website, each user has a cover image on their profile page with the constant name main_cover.jpg. The issue I am facing is that when a user uploads a new image, the old image remains cached in the browser and I have to refresh the page (ctrl+f5) to ...

phphtml

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

What is the best way to align an element on the right side of the screen?

I am having some trouble positioning a CSS element to the right side of the header. I attempted using the following code: position: Absolute; top: 20px; right 0px; This method works, however, when adjusting the browser window, the text also moves. I ha ...

htmlcss

Styling the content within Template Strings is not supported by VSCode

Recently, I've noticed that there are two scenarios in which my VSCode doesn't properly style the content within my template strings. One is when I'm writing CSS in a JavaScript file, and the other is when I'm fetching data from GraphQL ...

javascriptcssreactjsvisual-studio-codegraphql

Adjust the width of an item on CSS Grid upon hovering

I recently created a basic CSS grid layout with the following structure... .container { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; } .col1 { padding:20px; background:red; color:white; text-align:center; } .col2 { padding:20px; ...

csscss-grid

Ways to conceal a grid item in Material UI framework

My goal is to hide a specific grid item for a product and smoothly slide the others in its place. Currently, I am using the display:none property but it hides the item instantly. I have already filtered the products and now I want to animate the hiding of ...

javascriptcssmaterial-ui

Implementing Angular with HTML progress bar for interactive client-side features

Exploring the integration of HTML built-in progress bars with Angular: <label for="file">File progress:</label> <progress id="file" max="100" value="70">30%</progress> I am curious about how ...

htmlangularprogress-bar

Unexpected behavior when trying to bind data with AngularJS through a response message

Here is the code snippet: var myApp = angular.module("gameModule", []); myApp.controller("gamecontroller", function ($scope) { $scope.message = "test"; // websocket connection. var gameHub = $.connection.socketHub; $.connection.hub.star ...

htmlangularjsdata-bindingwebsocket

Construct a structure containing the key/value pairs of cells within an HTML table row using JavaScript

I'm completely new to JavaScript so please be patient with me; I'm not even sure if I'm searching for the solution correctly. Despite spending hours googling and experimenting, I still can't get it to work. My issue is related to an HT ...

javascriptjqueryhtmlarrayshtml-table

Transferring a Variable from Arduino to JavaScript

Is there a simple way to pass an Arduino variable as a JS variable? Let's say we have an integer Arduino variable called sensorData: int sensorData = analogRead(sensorPin); How can we transfer this value to a JavaScript variable? client.println(&quo ...

javascripthtmlarduino

Unlocking the parallax effect with your grandchildren: A guide to creating memorable

I have successfully implemented the parallaxing background effect several times before on Codepen and in small, experimental projects. My go-to tutorial for this technique is this one by Keith Clark. Here is the structure outlined in the tutorial: <d ...

htmlcss

Efficiently running multiple PHP pages with just one simple click

Below is the code fragment that I currently have: <html> <script type="text/javascript"> function Run() {var a=["ONE" ,"TWO" ,"THREE", "FOUR", "FIVE"]; window.location.href = "index.php?w1=" +a;} </script> <body> <input type="b ...

javascriptphphtml

What is the method to show text on hover in angularjs?

I'm a beginner in AngularJS and I'm looking to show {{Project.inrtcvalue}} when the mouse hovers over values. Can anyone guide me on how to achieve this using AngularJS? <table ng-table="tableParams" show-filter="true" class="table" > ...

javascriptjquerycssangularjs

incorporating numerous interconnected javascript files within a single html document

I have a pair of JavaScript files (file1, file2). File1 utilizes a class that is defined in file2. Can I include these files in an HTML document like this: <script type="text/javascript" src="file1.js"></script> <script type="text/javascrip ...

javascripthtmldependency-management

Tips for adjusting the color of multiple classes that have a common class using a toggle feature

I am working on a simple website using bootstrap 4 and SCSS. I want to include a toggler that switches between dark and light modes on the webpage. However, I'm facing an issue with changing the background color of 6 Bootstrap cards, footer, and the t ...

javascripthtmlcssbootstrap-4