Sidebar content alignment vertically

Question

Sidebar content alignment vertically

Struggling with aligning items in a sidebar, specifically regarding the fixed footer and the overflow of the main sidebar container. Trying to achieve a layout where the scrollable element stays within the designated space.

Current setup includes:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>


<div class="container-fluid">
    <div class="row">
        <div class="col-4 bg-dark text-white" style="height: 100vh; width:250px;">
            <div class="d-flex flex-column justify-content-start mb-3">
                <div class="p-2 bg-primary">
                    Flex item 1
                </div>

                <div class="p-2 bg-danger flex-grow-1">
                    Flex item 2
                </div>
                
                <div class="p-2 bg-primary" style="position:fixed; bottom:0;">
                    Flex item 3
                </div>
            </div>
        </div>

        <div class="col bg-secondary text-white">
            main body
        </div>
    </div>
</div>

Utilizing Bootstrap 5.3.0 alpha1

html css twitter-bootstrap bootstrap-5

Answer 1

Answer №1

Check out this simple example illustrating how to create a full-page layout with a container that enables scrolling on overflow using Bootstrap V5.3.

If you're interested in learning more about how it works, refer to the documentation.

Explore flex-grow-1 or if you are new to flexbox, you can start here.
Understand how overflow behaves.

To ensure both <nav> and <main> have scroll functionality at 100% viewport height (100vh), add the following CSS:

main {
  height: 100vh;
  max-height: 100vh;
}

In your HTML content, include:

<main class="col overflow-auto">

If <main> is permitted to exceed the viewport height and you want <nav> to expand accordingly, wrap the content inside col-4 in an absolutely positioned container filling col-4. This allows it to grow beyond 100vh while maintaining overflow scrollability even when <main> is smaller.

For vertical stacking of <nav> and <main> on smaller screen sizes:

Adjust the HTML structure by making use of default .row as flex-column, switching to a flex row on medium breakpoints with flex-md-row, and changing col-4 to col-md-4.

Add a media query in the CSS utilizing Bootstrap's medium breakpoint width.

Note: The snippet examples above revolve around an absolute positioning approach for wrapping content in a container, but similar logic could be applied to other scenarios outlined in the material.

Answer 2

Check out this simple example illustrating how to create a full-page layout with a container that enables scrolling on overflow using Bootstrap V5.3.

If you're interested in learning more about how it works, refer to the documentation.

Explore flex-grow-1 or if you are new to flexbox, you can start here.
Understand how overflow behaves.

To ensure both <nav> and <main> have scroll functionality at 100% viewport height (100vh), add the following CSS:

main {
  height: 100vh;
  max-height: 100vh;
}

In your HTML content, include:

<main class="col overflow-auto">

If <main> is permitted to exceed the viewport height and you want <nav> to expand accordingly, wrap the content inside col-4 in an absolutely positioned container filling col-4. This allows it to grow beyond 100vh while maintaining overflow scrollability even when <main> is smaller.

For vertical stacking of <nav> and <main> on smaller screen sizes:

Adjust the HTML structure by making use of default .row as flex-column, switching to a flex row on medium breakpoints with flex-md-row, and changing col-4 to col-md-4.

Add a media query in the CSS utilizing Bootstrap's medium breakpoint width.

Note: The snippet examples above revolve around an absolute positioning approach for wrapping content in a container, but similar logic could be applied to other scenarios outlined in the material.

Sidebar content alignment vertically

Answer №1

Similar questions

Highlighting the active nav-item in Bootstrap-5 is proving to be a challenge

Generate an HTML document from a website page

footer extending beyond the previous div's boundaries

Adjust the font color in code function for Woocommerce

Incorporate Arabic typography into the React Material Theme

Is there a different option to <br /> that allows me to adjust the spacing between lines?

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

Tips for formatting HTML to showcase two data cards when printing a page

Use Angular to change the style of multiple element groups at the same time when hovering

Using the innerHTML property to place an Img tag within a div element

Creating an appealing navbar in React by skillfully integrating the image logo and brand name for a

Optimal methods for refreshing website lists

The username index is not defined in the file path C:xampphtdocsAppX1signin.php on line 6

Creating an object positioned to the right side of a div (div:right) is a matter of using CSS positioning properties

Ways to eliminate whitespace in React and Bootstrap 5

What is the best way to retrieve the height of a <DIV> element without factoring in the presence of a horizontal scrollbar with

TemplateUrl malfunctioning

CSS - Make the entire div clickable while leaving a specific area non-clickable

The ScrollToTop feature in MUI component seems to be malfunctioning when paired with the useScrollTrigger hook

Is it possible for a label to contain elements other than the input field for accessibility purposes?