how to make a fixed grid layout with bootstrap?

Question

I need to make a fixed grid layout which i will then customize, the webpage have to have just full screen height and mustn't be V scrollable.

The page mocukup looks like this:

So i was trying to archieve it by using bootstrap grid system like this:

.content {
    background-color: rgb(0, 119, 255);
}

.content .dettagli {
    background-color: aquamarine;
}

.content .logo {
    height: 100px;
    background-color: rgb(255, 0, 0);
}

.content .action-bar {
    height: 200px;
    background-color: rgb(246, 255, 127);
}

.scontrino {
    background-color: rgb(255, 127, 127);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="asssets/css/index.css">
</head>
  <body>

    <div class="container-fluid">

        <div class="row">
            <div class="col-sm-9 content">
                <div class="row">
                    <div class="col-sm-12 logo">

                    </div>
                    <div class="col-sm-12 dettagli">
                        
                    </div>
                    <div class="col-sm-12 action-bar">
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-3 scontrino">
                
            </div>
        </div>


    </div>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>

But actually the row and colls wrap the content so are not shown, while how can i set them immediatly to cover the entire page?

the logo col should cover only 100px of height while the action-bar 200px...

EDIT i'm trying to set 100% height to dettagli but it takes more space and the page become scrollable, while that 100% have to fit between .logo and .action-bar

<div class="container-fluid h-100">

    <div class="row h-100">
        <div class="col-sm-9 content">
            <div class="row h-100">
                <div class="col-sm-12 logo">
                    
                </div>
                <div class="col-sm-12 dettagli h-100">
                    
                </div>
                <div class="col-sm-12 action-bar">
                    
                </div>
            </div>
        </div>
        <div class="col-sm-3 scontrino">
            
        </div>
    </div>


</div>

They are all here working fine, it is just that you did not fix any height on any of your div. So it does not show Specialy without content — MaxiGui, Feb 04 '21 at 09:48
@MaxiGui i just set the fixed height, but which height i have to set to dettagli? as 100% doesn't work while 100vh will cover the whole screen and the .action-bar will go down and the content will be scrollable what i would prevent — Kasper Juner, Feb 04 '21 at 09:51
100% height will only work if there is a container over with a fix height. After you still did not apply a height on one of your child div. https://stackoverflow.com/questions/7049875/why-doesnt-height-100-work-to-expand-divs-to-the-screen-height — MaxiGui, Feb 04 '21 at 10:00
@MaxiGui i've just made an edit where i set the height 100% but at this point .dettagli become too height while i would it fill between .logo and .action-bar — Kasper Juner, Feb 04 '21 at 10:03
class `h-100` still need to have a fix height as you try to apply a height % with a fix height.... (3 times) or to apply h-100 to all classes `body` & `html` included. As I said in the link. — MaxiGui, Feb 04 '21 at 10:11

MaxiGui · Accepted Answer · 2021-02-04T10:26:37.830

Here an example of what I am trying to explain you in comment. You cannot apply % height everywhere, except if you start from html.

So here an example working. I let you understand.

.content {
    background-color: rgb(0, 119, 255);
}
.height-fix-on-row{
    height:300px;
    /* You can try with different height as below
    height:20vh;
    height:20em;
    height:20rem;
    */
}
.content .dettagli {
    background-color: aquamarine;
}

.content .logo{
    background-color: rgb(255, 0, 0);
}

.content .action-bar {
    background-color: rgb(246, 255, 127);
}

.scontrino {
    background-color: rgb(255, 127, 127);
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="stylesheet" href="asssets/css/index.css">
</head>
  <body>

    <div class="container-fluid">

        <div class="row height-fix-on-row">
            <div class="col-sm-9 content h-100">
                <div class="row h-100">
                    <div class="col-sm-12 logo h-25">

                    </div>
                    <div class="col-sm-12 dettagli h-50">
                        
                    </div>
                    <div class="col-sm-12 action-bar h-25">
                        
                    </div>
                </div>
            </div>
            <div class="col-sm-3 scontrino h-100">
                
            </div>
        </div>


    </div>



  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script></body>
</html>

how to make a fixed grid layout with bootstrap?

1 Answers1