<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 ----------> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script><script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand"> <a href="#"> Start Bootstrap </a> </li> <li> <a href="#">Dashboard</a> </li> <li> <a href="#">Shortcuts</a> </li> <li> <a href="#">Overview</a> </li> <li> <a href="#">Events</a> </li> <li> <a href="#">About</a> </li> <li> <a href="#">Services</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-12" > <div > <div > </div> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">SandBox </a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Development</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Production</a> </li> </ul><!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="tabs-1" role="tabpanel"> <div class="client" style="margin-left:30px"> <p style="background-color: white;width: 77px;margin-top: -24px;margin-right: 9px;margin-left: 15px;padding-left: 8px;">Client Id</p> ****************************** </div> <div class="client" style="margin-left:70px "> <p style="background-color: white;width: 77px;margin-top: -24px;margin-right: 9px;margin-left: 15px;padding-left: 8px;">Secret</p> ****************************** </div> <br> <div class="client" style="margin-left:30px"> <p style="background-color: white;width: 77px;margin-top: -24px;margin-right: 9px;margin-left: 15px;padding-left: 8px;">Client Id</p> ****************************** </div> <div class="client" style="margin-left:70px "> <p style="background-color: white;width: 77px;margin-top: -24px;margin-right: 9px;margin-left: 15px;padding-left: 8px;">Secret</p> ****************************** </div> </div> <div class="tab-pane" id="tabs-2" role="tabpanel"> </div> <div class="tab-pane" id="tabs-3" role="tabpanel"> </div> </div> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper --> <!-- Menu Toggle Script --> <script> $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); }); </script>

#wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .sidebar-nav { position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { display: block; text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255,255,255,0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav > .sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav > .sidebar-brand a { color: #999999; } .sidebar-nav > .sidebar-brand a:hover { color: #fff; background: none; } @media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } }