Bootstrap Scrollable Layouts Assistance

Hello :wave:

I have a specific layout structure in-mind for a an app I am currently working-on. I faced some difficulties achieving the required layout. I’ve already searched for hours on my own, but eventually, I need some professional assistance. I would love if read your ideas and thoughts about my problem.

I attached a skeleton of current progress I made using Bootstrap Studio so you can get a clear idea of my vision. And here is a list of features I need to implement

  • #sidebar and #main must fill the full height of the page

  • #cta must be fixed on the top of #sidebar

  • #cap must be fixed on the bottom of #sidebar

  • #menu must fill the full height of #sidebar

  • Content inside of #menu must be scrollable

  • #filters must be fixed on the top of #main

  • #content must fill the full height of #main

  • Content inside of #content must be scrollable

(Image)

(Code)

<body class="vh-100 d-flex flex-column scroll-none">
    <div id="navbar" class="row g-0 p-3 bg-body-tertiary border-bottom">
        <div class="col">
            <div class="alert alert-success m-0" role="alert"><span><strong>NAVBAR</strong></span></div>
        </div>
    </div>
    <div class="row g-0 flex-grow-1">
        <div id="sidebar" class="col-3 d-none d-lg-flex flex-column border-end">
            <div id="cta" class="row g-0 p-3 border-bottom">
                <div class="col">
                    <div class="alert alert-info m-0" role="alert"><span><strong>CTA</strong></span></div>
                </div>
            </div>
            <div id="menu" class="row g-0 flex-grow-1 p-3">
                <div class="col overflow-auto">
                    <div class="alert alert-danger m-0" role="alert"><span><strong>MENU</strong></span></div>
                    <div class="alert alert-danger m-0" role="alert"><span><strong>MENU</strong></span></div>
                </div>
            </div>
            <div id="cap" class="row g-0 p-3 border-top">
                <div class="col">
                    <div class="alert alert-light m-0" role="alert"><span><strong>CAPACITY</strong></span></div>
                </div>
            </div>
        </div>
        <div id="main" class="col d-flex flex-column">
            <div id="filters" class="row g-0 p-3 border-bottom">
                <div class="col">
                    <div class="alert alert-warning m-0" role="alert"><span><strong>FILTERS</strong></span></div>
                </div>
            </div>
            <div id="content" class="row g-0 flex-grow-1 p-3">
                <div class="col overflow-auto">
                    <div class="alert alert-dark m-0" role="alert"><span><strong>CONTENT</strong></span></div>
                    <div class="alert alert-dark m-0" role="alert"><span><strong>CONTENT</strong></span></div>
                </div>
            </div>
        </div>
    </div>
</body>

Feel free to adjust or modify my code as you like, recommendations regarding anything is very welcome. Thank you all.

EDIT: Figma Design visualisation link has been added

I recommend you either hire a web developer, or take a CSS course.

Not sure what you spent hours searching for, but based on your list of requirements, what you want done here is not clear-cut, and will entail a considerable amount of work and communication between you and whomever takes on this project.

2 Likes

Make a sketch of what you want in figma and place the image here, it will be useful.

1 Like

Done, thank you for the recommendation

Done, I’ve posted this work on Fiverr, thank you for the recommendation

I have now created this for you to your specification. The Figma file helped a lot.

I created the layout in Bootstrap 5.3, there is no custom CSS and I made it fully mobile responsive as well. Please message me to discuss payment and I can send you the finished file. I used the placeholder text you specified but it will work with other content too.

See below for demonstration and design.

Video

layout

Desktop

Mobile

1 Like