1

I am attempting to create a bootstrap 4 layout with 2 sidebars that are fixed as well as headers.

Problem:

At the moment, the struggle seems to be getting a correct bootstrap layout and the battle between flexbox or just normal columns from bootstrap.

As one sidebar needs to work across the height of the view port. The fixed content sidebar also needs to be the height of the view port.

https://jsfiddle.net/8fkgxop1/

What I want it to be:

Example

Code examples: 

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 3.75rem;
    padding: 0;
}

.fixed-wp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
}

.workpackage_sidebar {
    margin-left: 3.75rem;
}

.sidebar-sticky-wp {
    position: -webkit-sticky;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    height: 100vh;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    .feather {
        margin-right: 4px;
        color: #999;
    }
    &.active {
        color: #007bff;
    }
    &:hover .feather,
    &.active .feather {
        color: inherit;
    }
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}


/*
 * Navbar
 */

.navbar-brand {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    &:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    }
}


/*
 * Utilities
 */

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>
<nav class="bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file"></span> Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span> Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span> Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="bar-chart-2"></span> Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="layers"></span> Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
       <span>Saved reports</span>
       <a class="d-flex align-items-center text-muted" href="#">
        <span data-feather="plus-circle"></span>
       </a>
      </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span> Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 workpackage_sidebar">
            <div class="affix">
                <div class="sidebar-sticky-wp">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                </div>
            </div>
        </div>

        <main role="main" class="col-md-9 col-lg-offset-3">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
            </div>

            <canvas class="my-4" id="myChart" width="900" height="380"></canvas>

            <h2>Section title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
        </main>
    </div>
</div>
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73
jagmitg
  • 4,236
  • 7
  • 25
  • 59

2 Answers2

3

First of all let's get into the HTML code, you have to change the "CONTAINER - scrollable - NOT FIXED" div classes to: col-md-6 offset-lg-3

<main role="main" class="col-md-6 offset-lg-3">

So everything won't be wrapped by flexbox.

Now, let's get to CSS stuff!

Regarding the "Fixed Content Scrollbar":

.container-fluid .workpackage_sidebar {
  height: calc(100vh - 60px);
  overflow: auto;
  position: fixed;
  top: 60px;
  left: 0;
  padding-bottom: 60px;
}

The property: height: calc(100vh - 60px), combined with overflow: auto; set the element height to 100% (excluding the 60px got from the top property) and make it scrollable.

Regarding the "CONTAINER - scrollable - NOT FIXED":

.container-fluid .offset-lg-3 {
  margin-left: calc(25% + 60px);
}

You have to add 60 extra pixels due to the sibling element margin (.workpackage_sidebar {margin-left: 3.75rem;}).

Here's a working CodePen: https://codepen.io/alezuc/pen/bGVEWvG

Hope this helps!

Alessio
  • 3,404
  • 19
  • 35
  • 48
  • Please when you use `flexbox` don't use position, else you must need it, this is possible without `position`, wait for my answer. – Nisharg Shah Apr 15 '20 at 17:02
  • @NishargShah Why? https://stackoverflow.com/questions/41033245/does-position-absolute-conflict-with-flexbox#answer-41033582 – Alessio Apr 15 '20 at 17:03
2

@Alessio answer is 100% valid but it uses position to achieve the goal, I used height concept to achieve that thing.

I added main_right class in main tag and added some CSS.

.workpackage_sidebar {
    padding-left: 3.75rem;
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.main_right {
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

EXPLAINATION

1 Why 48px is subtracted from 100vh?

  • It is subtracted from your main height because your navigation bar height is 48px.

2 I used margin in my sidebar, why you are using padding?

  • Margin remove inline behavior from flexbox in your case, so I convert into the padding.

FIDDLE

https://jsfiddle.net/2mg93tak/

SNIPPET

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 3.75rem;
    padding: 0;
}

.fixed-wp {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 0;
}

.workpackage_sidebar {
    padding-left: 3.75rem;
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.main_right {
    max-height: calc(100vh - 48px);
    overflow-y: scroll;
}

.sidebar-sticky-wp {
    position: -webkit-sticky;
    position: sticky;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
    height: 100vh;
    padding-top: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
    .feather {
        margin-right: 4px;
        color: #999;
    }
    &.active {
        color: #007bff;
    }
    &:hover .feather,
    &.active .feather {
        color: inherit;
    }
}

.sidebar-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
}


/*
 * Navbar
 */

.navbar-brand {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, 0.25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
    padding: 0.75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    &:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
    }
}


/*
 * Utilities
 */

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
    <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
            <a class="nav-link" href="#">Sign out</a>
        </li>
    </ul>
</nav>
<nav class="bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span data-feather="home"></span> Dashboard <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file"></span> Orders
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="shopping-cart"></span> Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="users"></span> Customers
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="bar-chart-2"></span> Reports
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="layers"></span> Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
      <span>Saved reports</span>
      <a class="d-flex align-items-center text-muted" href="#">
        <span data-feather="plus-circle"></span>
      </a>
    </h6>
        <ul class="nav flex-column mb-2">
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Current month
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Last quarter
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-feather="file-text"></span> Social engagement
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <span data-="file-text"></span> Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3 workpackage_sidebar">
            <div class="affix">
                <div class="sidebar-sticky-wp">
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint officia odio numquam ducimus ea consequuntur, saepe sapiente provident ipsa, porro aliquid! Obcaecati amet repellendus nisi iste voluptatum! In, molestiae obcaecati!lorem Lorem ipsum dolor, sit amet consectetur adipisicing elit. Modi consequatur tempora est delectus praesentium ipsam molestiae quia dignissimos excepturi, nemo saepe nostrum harum esse eveniet facere aut officiis rerum vel? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex possimus reprehenderit inventore sunt assumenda excepturi, quo libero deleniti dolore, amet iure cum earum reiciendis repudiandae. Ratione delectus deserunt facilis nesciunt. lorem </p>
                </div>
            </div>
        </div>

        <main role="main" class="col-md-9 col-lg-offset-3 main_right">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
                <h1 class="h2">Dashboard</h1>
            </div>

            <canvas class="my-4" id="myChart" width="900" height="380"></canvas>

            <h2>Section title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat recusandae unde repudiandae maxime eaque, sint nulla sapiente adipisci eum, quas magnam quos suscipit fuga quam a voluptas, voluptatum sed consequatur. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Commodi distinctio, ab iusto est laboriosam eligendi optio corrupti magnam rem vel nesciunt illum quod sed neque impedit? Voluptatibus soluta molestiae laudantium. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa tempora a quia vero. Vero, nisi quas ad eaque earum repellendus assumenda perferendis corrupti quidem enim. Voluptatum deleniti praesentium laborum autem.</p>
        </main>
    </div>
</div>
Nisharg Shah
  • 16,638
  • 10
  • 62
  • 73