Question 263574 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I make the main container take up entire screen?

Given:
Bootstrap 5.1
VS 2022 Pro
Blazor Server App

How can I make the container take up entire screen no margins all around?

<div class="container bg-primary">
  Hello World!
</div>

This is what that currently looks like:

enter image description here

Tags:

2

Answers


  1. 0

    I think you may be looking for the "container-fluid" class instead of "container".

    Try this:

    <div class="container-fluid bg-primary">
Hello World!
</div>

    Docs: https://getbootstrap.com/docs/5.0/layout/containers/

    Login or Signup to reply.
  2. 0

    Modify the last section of mainLayout.razor.css to：

    @media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }

    article {
       height:100vh;

    }

}

    MainLayout.razor:

    <div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content ps-0 pt-0">
            @Body
        </article>
    </main>
</div>

    In your target component:

    <div class="container-fluid bg-primary" style="height:100vh">
    Hello World!
</div>

    Result:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search