CODEWITHSUNDEEP
bootstrap-4
Greg Gum
Greg Gum

Reputation: 38009

Bootstrap 4 Flex Layout for App

How do I create this layout using Bootstrap 4. I did this once myself before 4 was out with Flexbox, but I want to use Bootstrap 4 now.

<div class="d-flex flex-column">
  <div>Fixed Header Height</div>
  <div>This should take full available height of screen</div>
  <div>Fixed Footer Height</div>
</div>

What class do I use on the center div to make it take up the full height of the screen?

Upvotes: 1

Views: 597

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

You will need to write some css like applying min-height of flex div to 100vh and then use flex:1 to the middle div....

..as I am aware to bootstrap4 there is such no class to set flex:1 and height:screen-height to the div

Stack Snippet

.navbar {
  background: #ccc;
}

.d-flex.flex-column {
  height: 100vh;
}

.full-height {
  background: black;
  flex: 1;
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-column">
  <div class="navbar header">Fixed Header Height</div>
  <div class="full-height"><br><br>This should take full available height of screen</div>
  <div class="navbar footer">Fixed Footer Height</div>
</div>

Upvotes: 2

Kamal Singh
Kamal Singh

Reputation: 1000

It looks like you want to create fixed header at top, fixed footer at bottom and rest space to be used as content. This can be achieved using bootstrap very easily. Here is sample layout:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Resources -->
        <style type='text/css'>
            .header {
                height: 60px;
            }
            .footer {
                height: 80px;
            }
            .app-content {
                margin-top: 60px;
                margin-bottom: 80px;
            }
        </style>
    </head>
    <body class="vertical-layout">
        <div class="fixed-top header bg-success">
            <!-- Content -->
        </div>
        <div class="content app-content">
            <!-- Content -->
        </div>
        <footer class="footer footer-dark fixed-bottom bg-info">
            <!-- Content -->
        </footer>
    </body>
</html>

If this does not solve your problem, than using flex you can use code as:

 <style>
    .full {
        min-height: 100%;
        height: 100%;
    }
    .fill {
        flex: 1;
        overflow: auto;
    }
</style>

Using flex: 1 will make it fill the available space. The content as:

<div class="d-flex flex-column full">
    <div>Fixed Header Height</div>
    <div class="fill">
        This should take full available height of screen
    </div>
    <div>Fixed Footer Height</div>
</div>

Upvotes: 2

Related Questions