<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <a class="nav-link" data-toggle="modal" data-target="#exampleModal1">Macros</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true"> <div class="modal-dialog modal-dialog-slideout modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Current Macros:</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p class="font-weight-bold">Calories:</p> <p> 1683 Current / 2400 Total</p> <p><span class="bg-warning font-weight-bold">Fat</span>-505</p> <p><span class="bg-primary font-weight-bold">Carbs</span>-224</p> <p><span class="bg-danger font-weight-bold">Protein</span>-909</p> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 21%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100">30%</div> <div class="progress-bar bg-primary" role="progressbar" style="width: 9%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">13%</div> <div class="progress-bar bg-danger" role="progressbar" style="width: 37%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">55%</div> </div> </div> </div> </div> </div>

.modal-dialog-slideout {min-height: 100%; margin: 0 0 0 auto;background: #fff;} .modal.fade .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(100%,0)scale(1);transform: translate(100%,0)scale(1);} .modal.fade.show .modal-dialog.modal-dialog-slideout {-webkit-transform: translate(0,0);transform: translate(0,0);display: flex;align-items: stretch;-webkit-box-align: stretch;height: 100%;} .modal.fade.show .modal-dialog.modal-dialog-slideout .modal-body{overflow-y: auto;overflow-x: hidden;} .modal-dialog-slideout .modal-content{border: 0;} .modal-dialog-slideout .modal-header, .modal-dialog-slideout .modal-footer {height: 69px; display: block;} .modal-dialog-slideout .modal-header h5 {float:left;}