<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 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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Font awesome --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div> <a href="https://bootsnipp.com/snippets/DV41">use this as folders</a> <a href="https://bootsnipp.com/snippets/z8Wx8">use this for the settings</a> </div> <div class="row"> <div id="left" class="span3"> <ul id="menu-group-1" class="nav menu"> <li class="item-1 deeper parent active"> <a class="" href="#"> <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign"><i class="icon-plus icon-white"></i></span> <span class="lbl"><span class="fa fa-gear">Citizen Ebox</span></span> </a> <ul class="children nav-child unstyled small collapse" id="sub-item-1"> <li class="item-2 deeper parent active"> <a class="" href="#"> <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-2" class="sign"><span class="fa fa-gear"></span>General settings</span> </a> </li> </ul> </li> <li class="item-1 deeper parent active"> <a class="" href="#"> <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign"><i class="icon-plus icon-white"></i></span> <span class="lbl"><span class="fa fa-gear">Settings</span></span> </a> <ul class="children nav-child unstyled small collapse" id="sub-item-1"> <li class="item-2 deeper parent active"> <a class="" href="#"> <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-2" class="sign"><span class="fa fa-gear"></span>General settings</span> </a> </li> </ul> </li> </ul> </div> </div> <div class="row"> <!-- side nav--> <aside class="col-sm-6 col-md-3 card my-4"> <h3>Company Name</h3> <hr/> <ul> <li> <a href="#" class="active"> <span class="fa fa-gear"></span> General settings </a> </li> <li> <a href="#"> <span class="fa fa-wrench"></span> account settings </a> </li> <li> <a href="#"> <span class="fa fa-paint-brush "></span> theme </a> </li> <li> <a href="#"> <span class="fa fa-clock-o"></span> time zone </a> </li> <li> <a href="#"> <span class="fa fa-btc "></span> payment details </a> </li> <li> <a href="#"> <span class="fa fa-user-secret "></span> access control </a> </li> </ul> </aside> <section class="col-sm-6 col-md-8 offset-md-1" id="main-content"> <h3 class="pull-right mb-4">General settings</h3> <form method="" action="" class="container"> <div class="input-group mb-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Message Type Id</span> </div> <input type="text" class="form-control" data-toggle="tooltip" data-placement="bottom" title="changes your sites domain name" a value="currentname.yoursite.com" placeholder="sexample.yoursite.come" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Sender Organization Id</span> </div> <input type="text" class="form-control" data-toggle="tooltip" data-placement="bottom" title="changes your sites domain name" a value="CBE Number, provided during the on-boarding" placeholder="CBE Number, provided during the on-boarding" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-5"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Sender Application Id</span> </div> <input type="text" class="form-control" data-toggle="tooltip" data-placement="bottom" title="changes your sites domain name" a value="UUID provided during the on-boarding" placeholder="UUID provided during the on-boarding" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-5"> <div class="col-sm-6 col-md-12 h6">Domain</div> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">site domain</span> </div> <input type="text" class="form-control" data-toggle="tooltip" data-placement="bottom" title="changes your sites domain name" a value="currentname.yoursite.com" placeholder="sexample.yoursite.come" aria-label="Username" aria-describedby="basic-addon1"> </div> </form> <button type="button" class="btn btn-success btn-lg btn-block my-4 mb-4 ">Save changes</button> </section> </div> </div>

body{ background:rgb(96%, 95%, 94%); } #main-content{ background:rgb(100%, 100%, 100%); min-height:40vh; } aside{ max-height:400px; } ul li{ list-style:none; margin-top:5%; color:rgb(71%, 73%, 75%); } ul li a { color:rgb(71%, 73%, 75%); } ul li a:hover { color:rgb(0%, 48%, 100%); text-decoration:none; } .active{ color:rgb(0%, 48%, 100%); } .fa{ margin-right:5%; } h1,h2,h3,h4{ padding-left:4%; } .input-group-text{ min-width:100px; } form{ padding-top:4%; padding-bottom:4%; } .slidecontainer{ } .slider{ cursor: pointer; } .radio-input{ margin-left:5px; margin-right:5px; } .radio-input-label{ margin-left:30px; }

$(function () { $('[data-toggle="tooltip"]').tooltip() })