I have multiple boostrap rows like this. I would like to have both the headers sticky in CSS. But no luck.
CSS
.sticky {
top: 0 px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<div class="row sticky-top bg-white">
<div class="col-md-1">HEADER</div>
<div class="col-md-11">HEADER</div>
</div><!-- row -->
<div class="row sticky-top bg-white sticky-top1">
<div class="col-md-1">HEADER2</div>
<div class="col-md-11">HEADER2</div>
</div><!-- row -->
<!-- some data -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
</div>You want like this?
CSS
.sticky {
top: 0 px;
}
<style>.sticky-top1{ top: 50px !important;}</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="container">
<div class="row sticky-top bg-white">
<div class="col-md-1">HEADER</div>
<div class="col-md-11">HEADER</div>
</div><!-- row -->
<div class="row sticky-top bg-white sticky-top1">
<div class="col-md-1">HEADER2</div>
<div class="col-md-11">HEADER2</div>
</div><!-- row -->
<!-- some data -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div><!-- row -->
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
<div class="row">
<div class="col-md-1">id</div>
<div class="col-md-3">L Name</div>
<div class="col-md-1">M</div>
<div class="col-md-2">F Name</div>
<div class="col-md-3">Username</div>
<div class="col-md-2">Phone</div>
</div>
</div>