Implementing two columns Fixed-Fluid layout in Bootstrap 4

In this post we are going to show you how we implements a two columns layout in Bootstrap 4 with one of them fixed in width and height and the other is fluid and how we update it to support some basic functionalities existed in standard simple bootstrap dashboard template.

Empty Bootstrap 4 Starter Template

We start with the following standard bootstrap 4 starter template that references only needed CSS & Javascript files and provides latest design and development standards, like using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors:

<!doctype html>
<html lang="en">
    <head>
        <title>Hello, world!</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

Basic two columns Fixed-fluid layout in Bootstrap 4

Now we show you modified version of above template to support a fixed sidebar of 300 pixels width and fluid main content with zero functionalities and no responsiveness for changing width of the browser:

<!doctype html>
<html lang="en">
    <head>
        <title>Basic Bootstrap Admin Dashboard Template</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <style type="text/css">
            .sidebar {
                z-index: 2;
                position: fixed;
                width: 300px;
                top: 0px;
                bottom: 0px;
                overflow-y: scroll;
            }
            .main-content {
                z-index: 1;
                margin-left: 300px;
            }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col p-0">
                    <div class="sidebar bg-dark text-white p-3">
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                        <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                    </div>
                    <div class="main-content p-3">
                        <div class="row">
                            <div class="col">
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                                <p>Lorem ipsum dolor sit amet, ei dignissim urbanitas mea. Usu ei summo sensibus iudicabit. Sed ei dolorem luptatum, hinc autem cu vim, putent labitur eum in. Soleat luptatum postulant mea te, eu ius vitae nostrud oportere, no sed laudem nonumes. Nam ei probo disputationi, singulis posidonium constituam no ius. In eam virtute scribentur, sea exerci pertinacia ex.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
    </body>
</html>

 

The following screen show the above HTML template on the browser: 

Implementing two columns Fixed-Fluid layout in Bootstrap 4

  Now we can create customized versions of the above starter template by adding some of the standard sidebar and dashboard style functionalities like:

 

 


Back to Tutorial