Fluid Bootstrap Container Experiencing Alignment Issues with Rows when CSS Height Property set to 100%

My Bootstrap container has a fluid width and I'm trying to align three rows within a sidebar to sit at the top, middle, and bottom. I came across this demo in the Bootstrap documentation which shows how to do it for full-width layout, but I need it for a sidebar.

It seems that vertical alignment works with a fixed height, but not with a fluid one (height: 100%). Both the sidebar and content should be the full height of the page. Is there a way to achieve this using Bootstrap classes or perhaps custom classes?

I haven't added any custom CSS yet, just relying on Bootstrap classes. Here's my attempt:

<div class="container-fluid h-100">
    <div class="row h-100">
        
        <div id="content" class="col-8 h-100">
            <p>Some Content</p>
        </div>

        <div id="sidebar" class="col-4 h-100">

            <div id="logo" class="row align-items-start">
                <div class="col text-center">
                <p>Test Top</p>
                </div>
            </div>

            <div id="helpful-info" class="row align-items-center">
                <div class="col text-center">
                <p>Test Middle</p>
                </div>
            </div>

            <div id="side-footer" class="row align-items-end">
                <div class="col text-center">
                <p>Test Bottom</p>
                </div>
            </div>

        </div>
        
    </div>
</div>
htmlcssbootstrap-4

Answer №1

Creating custom classes for the sidebar section can help maintain its position on the page. Additionally, configuring the sidebar with 

d-flex flex-column justify-content-between
will ensure that the divisions fill the entire height of the viewport. The height of the sidebar is determined by subtracting the navbar's height from the viewport height.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b7adb5adb3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1a0018001e">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<style>
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 100; /* Behind the navbar */
        padding: 48px 0 0; /* Height of navbar */
        box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1);
    }

    .sidebar-sticky {
        position: relative;
        top: 0;
        height: calc(100vh - 40px);
        padding-top: 0.5rem;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    }

    @supports ((position: -webkit-sticky) or (position: sticky)) {
        .sidebar-sticky {
            position: -webkit-sticky;
            position: sticky;
        }
    }

</style>

<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
    <a class="navbar-brand mr-0" href="#">Site name</a>
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>

<div class="container-fluid">
    <div class="row">
        <main class="col-8 mr-auto" style="height: 200vh;">
            <h2>Content Area</h2>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p>   
        </main>
        
        <nav class="col-4 d-block bg-light sidebar">
            <div class="sidebar-sticky d-flex flex-column justify-content-between">
                <div id="logo" class="row">
                    <div class="col text-center">
                        <h6>Top Section</h6>
                    </div>
                </div>
                
                <div id="helpful-info" class="row">
                    <div class="col text-center">
                        <h6>Middle Section</h6>
                    </div>
                </div>
                
                <div id="side-footer" class="row">
                    <div class="col text-center">
                        <h6>Bottom Section</h6>
                    </div>
                </div>
            </div>
        </nav>
    </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

Finding the identifier of an HTML element using AngularJS

I am trying to retrieve the specific id of each line and pass it to a JavaScript function that will make an HTTP request. However, I am encountering an issue when calling the function excluir(id). The parameters seem to be correct, but the alert is not tri ...

javascripthtmlangularjs

Reorganize elements using CSS styling

I have a trio of child divs with the classes span2, span7, and span3. When my browser width drops below 763px, I want them to display in the order span2, span3, and span7. How can I achieve this using CSS? Here is the code snippet I started with: <div ...

htmlcss

Align a div to the center horizontally at the top of the screen

Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...

htmlcss

The lack of flexibility in this element stems from the fact that it is not classified as a flex item

I'm facing an issue with flexbox and its unusual behavior. I have set up flexbox for the parent element and used flex: 1 1 100%, but it's not working as expected. When I checked in Firefox Developer Tools, it says that the parent is not a flex co ...

htmlcssflexbox

Automated scrolling within a div when an li element overflows

Looking to implement automatic scrolling in a div. I have a list of elements within a fixed height div, and now I want the div to scroll automatically when I press the down key after highlighting the 3rd li element (i.e Compt0005). Can anyone help me solve ...

javascriptjqueryhtmlcss

How to display an image in a pop-up with a title

I am currently using the Bootstrap framework and I am trying to create a popup image with a title, but it only shows the image. I am not sure how to add code in JavaScript to display the title as well. Can someone please assist me? Here is my code: Javas ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

Jquery is not working as expected

I am having trouble implementing a jQuery function to show and hide select components. It doesn't seem to be working correctly. Can someone help me identify the issue? <html> <head> <meta charset='UTF-8' /> <script ...

javascriptjqueryajaxhtml

Conceal the Slider until Fully Loaded with Slick Slider by Ken Wheeler

I am currently using a slider function called Slick by Ken Wheeler. It is currently being loaded in the footer with just two variables. $('.slickSlider').slick({ dots: true, fade: true }); Currently, ...

jquerycssjquery-pluginssliderslick.js

The functionality of displaying and hiding elements in HTML using jQuery is not functioning as expected

When I implemented the .toggle() functionality in jQuery on the content, I encountered a problem where clicking on the "read more" button caused the text link to disappear and the first paragraph to become invisible. Below is the jQuery code snippet: $( ...

jqueryhtml

What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains? <div class="wrapper"> <div class="element" /> </div> or... <div class="wrapper"> <div class="element" /> <div class="el ...

htmlcssstylesheet

Positioning a div beyond the visible area without altering its original width, with the assistance of the Skrollr plugin

I'm currently experimenting with a parallax website using Skrollr. My goal is to achieve a curtain effect where two divs slide open left and right as I scroll down. The issue I'm facing is that when I scroll, the divs extend beyond the 100% widt ...

htmlcssskrollr

The FontAwesome icon is not showing up on this particular view, but it displays correctly on a

I'm facing a strange issue: one of my FontAwesome icons is not appearing on the view, even though all the other icons are working fine. I've been trying to figure out why. <a class="add-img fa fa-plus-circle" title="@SharedResources.Index.Add ...

htmlcsstwitter-bootstrapfont-awesome

Create a background for a dropdown list that appears unreachable, positioned above all other elements

I am encountering an issue with my autocomplete function where the drop down list appears unreadable as it is overlapping other elements on the page. The problem lies in the fact that I did not manually create the drop down list, but rather it is generate ...

javascripthtmlcssdrop-down-menu

New programmer seeking to apply a dim effect to the entire photo while also adding a highlight when the image is hovered over

I am looking to add a special effect to my photos where they appear dimmed but highlighted when hovered over. Any guidance on how to achieve this would be greatly appreciated! The image is contained within a flexbox div that also contains a clickable lin ...

htmlcss

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...

htmlcsstwitter-bootstrap

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

Recently, I've encountered some challenges with the footer formatting on my website's home page and the sign-in form on a separate page. It appears that the Bootstrap framework at the top of the page is affecting these elements exclusively. How c ...

htmlcssbootstrap-4frontend

Looking to establish a minimum height for a webpage

I am working on creating a webpage with three distinct sections: A fixed height header A fluid main section A fixed height footer My goal is to ensure that the page has a minimum height so that the bottom of the footer aligns with the bottom of the wind ...

javascripthtmlcss

What is a simple way to ensure that my image retains its square shape on a responsive design without having to use numerous media queries?

I've been searching for solutions to my issue, but none of them have worked for me so far. I am working on a form where users can edit or add images, and I want each image to be displayed as a square regardless of the device being used (desktop, mobil ...

cssimagebootstrap-4responsive

How to Customize the Navbar Position in Bootstrap 3 when the Brand/Logo is Collapsed

I am currently in the process of creating my first website and experimenting with the Bootstrap 3 framework. The navbar I have selected is designed to adjust based on screen size, collapsing into a small button for use on tablets and mobile devices. Howe ...

javascriptjqueryhtmlcsstwitter-bootstrap

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress