Click here to Skip to main content
15,070,511 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
[Amazing picture of what I want to achieve]

Basically i kind of want to add a color to a column, and ensure its there from top to the bottom. Adding color to container makes huge gaps.

Navbar and footer is easy to achieve (and it's basically built in). Background color is also easy to change. But body is where the real fun begins.

HTML
<div class="container">
        <div class="row">
            <div class="col-md-9">
                <main role="main" class="pb-3">
                    @RenderBody()
                </main>
            </div>
            <div class="col-md-3">
                ...
            </div>
        </div>
    </div>


This is what I have, columns are fine, but I want them to have full color. No idea how to do it. HTML and CSS are my horrors.

What I have tried:

Googling and messing with containers but its not giving satisfying results. Jumbotron also has size of text, instead of being full size.
Posted
Updated 26-Mar-21 4:42am
v2

1 solution

You can get there with Bootstrap, but it's not pretty:
HTML
<div class="min-vh-100 d-flex flex-column">
    <header class="bg-dark text-light p-1">
        <h1>Site Header...</h1>
    </header>

    <div class="flex-fill bg-success d-flex flex-column">
        <div class="container d-flex flex-column flex-fill">
            <div class="row flex-fill">
                <div class="col-sm bg-light p-1">
                    <main role="main" class="pb-3">
                        <p>Body...</p>
                    </main>
                </div>
                <div class="col-sm-3 bg-info p-1">
                    <p>Sidebar...</p>
                    <p>Sidebar...</p>
                    <p>Sidebar...</p>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light p-1">
        <p>Site footer...</p>
    </footer>
</div>
Demo[^]

It would be simpler to use CSS Grid instead:
HTML
<div class="site-grid bg-success">
    <header class="bg-dark text-light p-1">
        <h1>Site Header...</h1>
    </header>

    <div class="container">
        <main role="main" class="pb-3 bg-light">
            <p>Body...</p>
        </main>

        <div class="bg-info p-1">
            <p>Sidebar...</p>
            <p>Sidebar...</p>
            <p>Sidebar...</p>
        </div>
    </div>

    <footer class="bg-dark text-light p-1">
        <p>Site footer...</p>
    </footer>
</div>
CSS
.site-grid {
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.site-grid > .container {
    display: grid;
    grid-template-columns: 3fr 1fr;
}
Updated demo[^]
   
v3
Comments
Member 15047625 26-Mar-21 13:55pm
   
I actually wouldn't call it not pretty.It's better than CSS version because it's fully responsive.

But both versions have certain flaw. Scroll bar appears even without text in columns.
Richard Deeming 29-Mar-21 3:47am
   
Really? I'm not seeing a scrollbar on either demo until I resize the window to less than a mobile screen size.

The CSS Grid version can easily be made responsive. For example: Demo[^]

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900