<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <div id="left-block" class="col-md-2 col-sm-3 col-lg-1"> <div class="row"> <div class="text-center avatar pull-left"> <img src="http://placehold.it/150" alt="" class="img-circle img-responsive center-block" /> <h6 >Some name</h6> </div> </div> <div class="row"> <nav class="navbar navbar-default sidebar" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> <ul class="nav navbar-nav user-controls"> <li ><a href="#">SETTINGS<span style="margin-left:3px;" class="pull-right showopacity fa fa-cog fa-2x"></span></a></li> <li> <a href="#">FOLLOWINGS<span class="pull-right showopacity fa fa-rss fa-2x"></span></a> </li> <li ><a href="#">EDIT RULS<span class="pull-right showopacity fa fa-pencil-square-o fa-2x"></span></a></li> <li ><a href="#">JOBS<span class="pull-right showopacity fa fa-briefcase fa-2x"></span></a></li> <li ><a href="#">MY COMPANIES<span class="pull-right showopacity fa fa-building fa-2x"></span></a></li> <li ><a href="#">UPGRADE<span class="pull-right showopacity fa fa-level-up fa-2x"></span></a></li> </ul> </div> </div> </nav> </div> </div> <div id="right-block" class="col-md-8 col-sm-8 col-md-offset-2 col-sm-offset-1"> <div class="user-settings"> <div class="row"> <div class="col-md-5"> <div class="col-md-6 col-sm-8 col-xs-10"> <h3>My companies </h3></div> <div class="col-md-6 col-sm-4 col-xs-2"> <button id="add-new-company" type="button" class="btn btn-danger" data-toggle="collapse" data-target="#add-company"><i class="fa fa-plus fa-2x"></i></button></div> </div> </div> <div id="add-company" class="collapse row"> <div class="col-sm-12 col-md-8 col-lg-6"> <div class="panel panel-success"> <div class="panel-heading"> <h4 class="inline">New company details</h4> </div> <div class="panel-body"> <div class="col-md-12"> <form role="form"> <div class="form-group"> <label for="comp-name" class='control-label'>Company Name:</label> <input type="text" class="form-control" id="comp-name" required="required"> </div> <div class="form-group"> <label for="country" class='control-label'>Country</label> <select class="input-medium bfh-countries" data-country="AM" id="country" required="required"></select> </div> <div class="form-group"> <label for="company-details">Company Details</label> <textarea class="form-control" rows="5" cols="25" id="company-details"></textarea> </div> <div class="form-group"> <label for="comp-url" class='control-label'>Company Website:</label> <input type="url" class="form-control" id="comp-url" required="required" > </div> <div class="form-group"> <label class='control-label'> Company Status</label> <div class="radio"> <label class="radio-inline"><input type="radio" id="status-private" name="optradio"> Private</label> <label class="radio-inline"><input type="radio" id="status-public" name="optradio" >Public</label> </div> </div> <div class="form-group"> <label for="ticker" class='control-label'>Ticker</label> <input type="text" class="form-control" id="ticker" required="required" > </div> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="inline">Divisons</h4> <button id="new-division" type="button" class="btn btn-success pull-right" data-toggle="modal" data-target="#myModal">Add New</button> </div> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add New division</h4> </div> <div class="modal-body"> <div class="form-group"> <label for="div-name" class='control-label'>Divison Name</label> <input type="text" class="form-control" id="div-name" required="required"> </div> <div class="form-group"> <label for="ind-search" class='control-label'>Industry</label> <input type="search" class="form-control" id="ind-search" required="required"> </div> <div class="form-group"> <label for="product" >Product</label> <input type="text" class="form-control" id="product" > </div> <div class="form-group"> <label for="cogs" class='control-label'>COGS</label> <input type="search" class="form-control" id="cogs" required="required"> </div> <div class="form-group"> <label for="sales" class='control-label'>Sales</label> <input type="search" class="form-control" id="sales" required="required"> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Save</button> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="panel-body"> <div class="col-md-12"> <div id="company-container" class="m-b-20"> <ul class="list-group company-divisions"> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Division 1 </strong></a> <span data-toggle="popover" title="sales = 1245" data-container="body" data-content="Cogs = 121245121" > <strong class="text-danger"> finansials</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Division 2 </strong></a> <span data-toggle="popover" title="sales = 1245" data-container="body" data-content="Cogs = 121245121" > <strong class="text-danger"> finansials</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Division3 </strong></a> <span data-toggle="popover" title="sales = 1245" data-container="body" data-content="Cogs = 121245121" > <strong class="text-danger"> finansials</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> </ul> </div> </div> </div> </div> <button id="save-company" type="submit" class="btn btn-primary btn-md">Save</button> <button class="btn btn-danger btn-md" type="reset">Reset</button> </form> </div> </div> </div> </div> </div> <div class ="row m-t-20"> <div class="col-sm-12 col-md-8 col-lg-6"> <div id="company-container" class="m-b-20"> <ul class="list-group company-divisions"> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Honda Motor </strong></a> total <span data-toggle="popover" data-container="body" data-content=" 121245121%" > <strong class="text-danger"> impact</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Honda Motor </strong></a> total <span data-toggle="popover" data-container="body" data-content=" 121245121%" > <strong class="text-danger"> impact</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Honda Motor </strong></a> total <span data-toggle="popover" data-container="body" data-content=" 121245121%" > <strong class="text-danger"> impact</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> <li class="list-group-item"> <span class="badge">NAICS</span> <a href="#"><strong class="text-info"> Honda Motor </strong></a> total <span data-toggle="popover" data-container="body" data-content=" 121245121%" > <strong class="text-danger"> impact</strong> </span> <span class="company-controls hidden-xs"> <i class="edit fa fa-pencil fa-2x"></i> <i class=" delete fa fa-trash-o fa-2x"></i> </span> </li> </ul> </div> </div> </div> </div> </div> <script src="js/bootstrap-formhelpers.min.js"></script>

#new-division { margin-top: -4px; } .form-group .control-label:after { content:"*"; color:red; font-size: 12px; } .inline { display: inline-block; margin-top: 0px; margin-bottom: 0px; } #add-new-company { width: 56px; height: 39px; float: right; margin: 20px; } .m-t-20 { margin-top: 20px; } #right-block { padding-top: 50px; } .company-controls { float: right; margin-top: 0px; margin-right:10px } .company-controls i { margin-right:10px; } .company-controls i.edit:hover { color: #0039dc; } .company-controls i.delete:hover { color: #dc0000; } #follow_checkr { text-align: center } #follow_checkr { text-align: center } #rleft-block,#right0block { margin-bottom: 50px; display: block; } .avatar img { padding: 15px; width: 150px; height: 150px; } .avatar { text-align: center; } nav.sidebar, .main{ -webkit-transition: margin 200ms ease-out; -moz-transition: margin 200ms ease-out; -o-transition: margin 200ms ease-out; transition: margin 200ms ease-out; } .main{ padding: 10px 10px 0 10px; } @media (min-width: 765px) { .main{ position: absolute; width: calc(100% - 40px); margin-left: 40px; float: right; } nav.sidebar:hover + .main{ margin-left: 200px; } nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0px; } nav.sidebar .navbar-brand, nav.sidebar .navbar-header{ text-align: center; width: 100%; margin-left: 0px; } nav.sidebar a{ padding-right: 6px; } nav.sidebar .navbar-nav > li:first-child{ border-top: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav > li{ border-bottom: 1px #e5e5e5 solid; } nav.sidebar .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{ padding: 0 0px 0 0px; } .navbar-inverse .navbar-nav .open .dropdown-menu>li>a { color: #777; } nav.sidebar{ width: 200px; height: 100%; margin-left: -160px; float: left; margin-bottom: 0px; } nav.sidebar li { width: 100%; font-size:16px; } nav.sidebar li:hover { background-color: green; border-radius:5px; } nav.sidebar:hover{ margin-left: 0px; } .forAnimate{ opacity: 0; } } @media (min-width: 1930px) { .main{ width: calc(100% - 200px); margin-left: 200px; } nav.sidebar{ margin-left: 0px; float: left; } nav.sidebar .forAnimate{ opacity: 1; } } nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus { color: #CCC; background-color: transparent; } nav:hover .forAnimate{ opacity: 1; } section{ padding-left: 15px; } /* Tabs panel */ .tabbable-panel { border:1px solid #eee; padding: 10px; } /* Default mode */ .tabbable-line > .nav-tabs { border: none; margin: 0px; } .tabbable-line > .nav-tabs > li { margin-right: 2px; } .tabbable-line > .nav-tabs > li > a { border: 0; margin-right: 0; color: #737373; } .tabbable-line > .nav-tabs > li > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { border-bottom: 4px solid #fbcdcf; } .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { border: 0; background: none !important; color: #333333; } .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { color: #a6a6a6; } .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { margin-top: 0px; } .tabbable-line > .nav-tabs > li.active { border-bottom: 4px solid #f3565d; position: relative; } .tabbable-line > .nav-tabs > li.active > a { border: 0; color: #333333; } .tabbable-line > .nav-tabs > li.active > a > i { color: #404040; } .tabbable-line > .tab-content { margin-top: -3px; background-color: #fff; border: 0; border-top: 1px solid #eee; padding: 15px 0; } .portlet .tabbable-line > .tab-content { padding-bottom: 0; } /* Below tabs mode */ .tabbable-line.tabs-below > .nav-tabs > li { border-top: 4px solid transparent; } .tabbable-line.tabs-below > .nav-tabs > li > a { margin-top: 0; } .tabbable-line.tabs-below > .nav-tabs > li:hover { border-bottom: 0; border-top: 4px solid #fbcdcf; } .tabbable-line.tabs-below > .nav-tabs > li.active { margin-bottom: -2px; border-bottom: 0; border-top: 4px solid #f3565d; } .tabbable-line.tabs-below > .tab-content { margin-top: -10px; border-top: 0; border-bottom: 1px solid #eee; padding-bottom: 15px; } .followed-objects { margin-top: 50px; }

$(document).ready(function(){ $('[data-toggle="popover"]').popover({ placement : 'top', trigger : 'hover', html: 'true' }); });