<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-sm-3">
<div class="nav-side-menu">
<div class="brand">Brand Logo</div>
<i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#new" class="collapsed">
<a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a>
</li>
<ul class="sub-menu collapse" id="new">
<li>New New 1</li>
</ul>
</ul>
</div>
</div>
</div>
<div class="col-sm-9">
<nav class="navbar navbar-light bg-faded">
<form class="form-inline float-xs-left">
<button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav></div>
<div class="col-sm-9 col-sm-offset-1">
<h1>Welcome To Dashboard Panel :)</h1>
<p>
this is test text.this is test text.this is test text.this is test text.
this is test text.this is test text.this is test text.this is test text.
this is test text.this is test text.this is test text.this is test text.
this is test text.this is test text.this is test text.this is test text.
this is test text.this is test text.
</p>
</div>
</div>
</div>
