Blank vertical gap among columns within Bootstrap 4

Here is the current HTML setup:

<div class="container">
   <div class="row">
      <div class="col-lg-9 description"></div>
      <div class="col-lg-3 sidebar"></div>
      <div class="col-lg-9 comments"></div>
   </div>
</div>

The desired outcome looks like this: https://i.sstatic.net/nNRaq.png I require this specific HTML structure to ensure that when the viewport shrinks and Bootstrap transitions into one-column mode, the sidebar column appears between the description and comments columns.

However, I am facing an issue where there is empty space in the layout when the template is not in mobile mode.

I have attempted various solutions without success. Can anyone provide assistance?

EDIT

I also tried the following approach:

<div class="container">
   <div class="row">
      <div class="col-lg-9">
         <div class="description"></div>
         <div class="comments"></div>
      </div>
      <div class="col-lg-3 sidebar"></div>
   </div>
</div>

I experimented with using CSS's "order" property to rearrange the elements, but it did not produce the intended result (it only allowed me to position the sidebar at the beginning of the page).

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

The reason behind this behavior is that Bootstrap 4 utilizes flexbox for its layout, causing all columns to adjust to the height of the tallest column...

Instead of the traditional layout shown below:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
 ------------------ |         |
|                  ||         |
 ------------------  ---------

You end up with a more uniform appearance like this:

 ------------------  ---------
|                  ||         |
|                  ||         |
 ------------------ |         |
                    |         |
                    |         |
 ------------------  ---------
|                  |
 ------------------

To address this issue, you may attempt to nest columns within each other, but unfortunately, this affects the intended order of the columns....

Nesting Example:

<div class="container">
    <div class="row">
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-12 description"></div>
                <div class="col-lg-12 comments"></div>
            </div>
        </div>
        <div class="col-lg-3 sidebar"></div>
    </div>
</div>

However, in order to maintain the correct column order, it is essential to enclose all columns within a single .row.

Using Floats:

In Bootstrap 4, an alternative approach is to revert back to utilizing floats (similar to Bootstrap 3) as elaborated in this resource: Bootstrap 4 - I don't want columns to have the same height. For instance:

<div class="container">
   <div class="row d-lg-block">
      <div class="col-lg-9 float-left description">Desc</div>
      <div class="col-lg-3 float-right sidebar">Sidebar</div>
      <div class="col-lg-9 float-left comments">Comments</div>
   </div>
</div>

The d-lg-block designation enforces display:block on the row instead of display:flex, enabling columns to float within lg screen widths.

For additional insights:
Bootstrap with different order on mobile version

Answer №2

.description {
  background-color: red
}

.sidebar {
  background-color: blue
}

.comments {
  background-color: green
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-12 description">description</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-12 col-lg-3 sidebar">sidebar</div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-9 comments">comments</div>
  </div>
</div>
</div>

It appears this is the design you are aiming for

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

Unable to transfer all the formatting from the original file for the window.print() function. Localhost is functioning properly, but encountering issues with production

I'm encountering an issue with getting all styles from my Vue app. I have tried the code provided in this answer: https://stackoverflow.com/questions/52343006/how-to-print-a-part-of-a-vue-component-without-losing-the-style While it works fine on loc ...

javascriptcssvue.jsvuejs2vuetify.js

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

javascripthtmlcss

Struggling with the adaptability of my website's footer section

I'm facing a dilemma... No matter what I do, I can't seem to position my contact form over my Google iframe perfectly. It works fine if I don't mind sacrificing responsiveness, but as soon as I try to make it responsive, the absolute assign ...

htmlcssformsiframeresponsive

Tips for adding style to a group of SVG elements:

I currently have an array of .svg icons, each with unique properties that I need to customize: <svg width="24" height="24" viewBox="0 0 24 24"> ... </svg> import styled from 'styled-components'; import Github from 'assets/git ...

javascriptcssreactjssvgstyled-components

AngularJS Splice Function Used to Remove Selected Items from List

I previously inquired about a method to remove items from the Grid and received a solution involving the Filter method. However, I am specifically looking for a way to remove items using the Splice Function instead. You can find my original question here: ...

javascripthtmlangularjsangularjs-ng-repeat

Display a substitute image if there is no internet connection available to load the Google Map Canvas

I have a WebApp that runs locally, but it's possible that users may not always have access to 3G/WiFi when using the app. This means that the Google Map will not load without an internet connection since it requires the web API. In order to provide a ...

javascripthtmlgoogle-maps

There seems to be an issue with the <mat-form-field> where normal input functions correctly, but encounters an error when trying to use mat

I've searched through other inquiries, but none have provided the solution I am looking for. <mat-form-field> <mat-select matInput placeholder="Favorite food"> <mat-option *ngFor="let food of foods" [value]="food.value"> ...

htmlangularweb

Is it necessary for a viewport breakpoint to have an impact beyond its designated area in Twitter Bootstrap?

Perhaps the title of this question may not make any sense at first glance. Here are the details of my query: As far as I know, in Twitter Bootstrap, the -sm- denotes the breakpoint between min-width: 576px and max-width: 767.98px. For example, @media ( ...

cssbootstrap-4breakpoints

I designed three interactive buttons that allow users to change the language of the website with a simple click. While my JavaScript code functions perfectly on local host, it seems to encounter issues when deployed

For those interested, the live server can be accessed at . After creating 3 buttons that change the language of the website when clicked, the issue arose where the JavaScript code worked perfectly on localhost but failed to function properly on the online ...

javascripthtmljquerycssgoogle-translate

How can you center a div at the top of another div?

I am working with a nested div structure and trying to center the inner content of one div within another. Is it possible to achieve this using CSS? <div id="outer"> bla, bla....... <div id="inner"> <p>Test</p> </div> ...

csshtml

Is it possible to make changes to local storage data without impacting the rest of the data set?

https://i.sstatic.net/BBcJF.pngI am looking for a way to modify specific data in the local storage without affecting any other stored information. However, I have encountered an issue where editing values works correctly for the first three attempts, but ...

javascripthtmlcss

Extracting the href attribute from a child <a> tag

I am struggling to retrieve the value of the href within the code structure below: <div class=""> <div class=""> <div class=""> <a href=""><img src=""></a> </div> </div> </div> The m ...

javascriptjqueryhtml

Having trouble getting the swiping feature to function on jQuery mobile

Hey there, I'm new to this so please bear with me if I'm not getting everything right with posting... I've been trying to figure out how to swipe left and right for jquery mobile by visiting a few pages. I found this page for my script - - ...

javascriptjqueryhtmlcssjquery-mobile

The scrollbar remains unresponsive and fixed until the screen size is adjusted

Need some assistance with a website project for a client. The scrollbars on each page are not loading or changing height until the window is resized. I have a jQuery scrollbar in place, but disabling it does not solve the issue as the normal scrollbar beha ...

jquerycsshtmlscrollbar

Displaying an image based on the selected dropdown using PHP, AJAX, and JQuery

This requires knowledge of PHP, AJAX, and JQuery. Hopefully, this question is straightforward. I have a dynamic dropdown menu that shows content when an option is selected. The content I want to display is an image. To achieve this, I am working with two ...

phphtmljqueryajaximage

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Ways to navigate to a tabbed section that is currently inactive

One of my challenges involves managing a tabbed form with multiple tabs: <ul class="tab-links"> <li class="active"><a href="#tab1">Pending</a></li> <li><a href="#tab2">All</a></li> ...

phpjqueryhtmlcss

The background image positioned in the center may experience cropping in HTML

I am currently facing an issue with aligning a background image horizontally in a specific scenario: The background image is large and needs to be centered horizontally The page has a minimum width requirement of 960px which may result in a scrollbar on ...

htmlcss

Implementing dynamic styles for a checked mat-button-toggle in Angular 6

How can I customize my button-toggle when it is checked? The current code I have doesn't seem to be working... This is the code snippet: <mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}"> <mat-bu ...

htmlcssangulardynamicstyles

Retrieve the folder and file name selected by the user in the browser

Can the client's directory path be obtained for a file uploaded to a server? ...

phpjavascripthtmlajaxbrowser