<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 ----------> <div class="container"> <div class="row"> <UL class="cubox" style="background:red;"> <LI id="" class="ubox " style="background:green; padding:100px 20px"><h2>ccccc</h2></LI> <LI class="example">Antarctica</LI> <LI>Asia</LI> </UL> </div> </div>

xa = document.querySelector(".ubox "); elemHeight = xa.offsetHeight; document.getElementsByClassName("example")[0].style.marginTop = -elemHeight + "px";