Sticky element
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block.
Sticky card & Card header
Use .sticky-card-header class with .card class.
Sticky Card Header
Special title treatment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et accumsan justo, vitae lobortis nulla. Duis quam libero, consectetur at enim vel, aliquam sagittis ante. Donec rutrum imperdiet rhoncus. Aenean neque ligula, rutrum sit amet nibh in, lobortis rutrum tellus. Integer efficitur augue eu enim ornare dictum. Pellentesque consectetur nisi eu viverra eleifend. Pellentesque viverra ac velit a venenatis. Morbi condimentum ultricies neque, sed finibus elit fringilla in. Etiam vel ex ut nulla pretium bibendum eu eget nibh. Duis mattis aliquet ligula, ac commodo elit consequat id. Nulla dapibus lacinia massa at volutpat. Nullam ac leo est. Mauris mattis pulvinar venenatis.
Nunc faucibus elit in tristique laoreet. Donec cursus tellus vel eros euismod aliquam. Nunc at pharetra purus. Nunc sit amet ante risus. Donec ut bibendum justo. Nulla sit amet euismod eros. Aenean tristique, augue at faucibus placerat, tortor sem tincidunt nisi, id hendrerit tortor mi in nulla. Duis sed luctus ex.
Suspendisse quis mauris non purus gravida egestas. Quisque laoreet rutrum sem ac dapibus. Nunc interdum nibh sed elementum placerat. Integer rutrum odio sed quam gravida aliquet. Nam vel nunc in libero lacinia ultricies. Curabitur rutrum bibendum lacus eu semper. Sed euismod ipsum risus, eu auctor quam ullamcorper ac. Sed tempus facilisis tellus quis tempor. In feugiat nunc sit amet felis tincidunt, id rhoncus mi porta. Etiam luctus mi in hendrerit semper.
Sticky Card
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="card card-border">
<div class="card-header bg-primary sticky-card-header">
<h6 class="text-white">Sticky Card Header</h6>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-8 col-6">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et accumsan justo, vitae lobortis nulla. Duis quam libero, consectetur at enim vel, aliquam sagittis ante. Donec rutrum imperdiet rhoncus. Aenean neque ligula, rutrum sit amet nibh in, lobortis rutrum tellus. Integer efficitur augue eu enim ornare dictum. Pellentesque consectetur nisi eu viverra eleifend. Pellentesque viverra ac velit a venenatis. Morbi condimentum ultricies neque, sed finibus elit fringilla in. Etiam vel ex ut nulla pretium bibendum eu eget nibh. Duis mattis aliquet ligula, ac commodo elit consequat id. Nulla dapibus lacinia massa at volutpat. Nullam ac leo est. Mauris mattis pulvinar venenatis.</p>
<p class="card-text">Nunc faucibus elit in tristique laoreet. Donec cursus tellus vel eros euismod aliquam. Nunc at pharetra purus. Nunc sit amet ante risus. Donec ut bibendum justo. Nulla sit amet euismod eros. Aenean tristique, augue at faucibus placerat, tortor sem tincidunt nisi, id hendrerit tortor mi in nulla. Duis sed luctus ex.</p>
<p class="card-text">Suspendisse quis mauris non purus gravida egestas. Quisque laoreet rutrum sem ac dapibus. Nunc interdum nibh sed elementum placerat. Integer rutrum odio sed quam gravida aliquet. Nam vel nunc in libero lacinia ultricies. Curabitur rutrum bibendum lacus eu semper. Sed euismod ipsum risus, eu auctor quam ullamcorper ac. Sed tempus facilisis tellus quis tempor. In feugiat nunc sit amet felis tincidunt, id rhoncus mi porta. Etiam luctus mi in hendrerit semper.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="col-md-4 col-6">
<div class="card position-sticky" style="top:150px">
<div class="card-header">
<h6>Sticky Card</h6>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
</div>
</div>
</div>
<div class="card-footer text-muted">
Card Footer
</div>
</div>
Sticky table header
Use .sticky-table-header class with table.
| # | First Name | Last Name | Username | Role |
|---|---|---|---|---|
| 1 | Jens | Brincker | Brincker123 | admin |
| 2 | Mark | Hay | Hay123 | member |
| 3 | Anthony | Davie | Davie123 | developer |
| 4 | David | Perry | Perry123 | supporter |
| 5 | Anthony | Davie | Davie123 | member |
| 6 | Alan | Gilchrist | Gilchrist123 | supporter |
| # | First Name | Last Name | Username | Role |
|---|---|---|---|---|
| 1 | Jens | Brincker | Brincker123 | admin |
| 2 | Mark | Hay | Hay123 | member |
| 3 | Anthony | Davie | Davie123 | developer |
| 4 | David | Perry | Perry123 | supporter |
| 5 | Anthony | Davie | Davie123 | member |
| 6 | Alan | Gilchrist | Gilchrist123 | supporter |
<table class="table table-bordered sticky-table-header">
<thead class="thead-primary">
<tr class="">
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jens</td>
<td>Brincker</td>
<td>Brincker123</td>
<td><span class="badge badge-danger">admin</span> </td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Hay</td>
<td>Hay123</td>
<td><span class="badge badge-info">member</span> </td>
</tr>
<tr>
<th scope="row">3</th>
<td>Anthony</td>
<td>Davie</td>
<td>Davie123</td>
<td><span class="badge badge-warning">developer</span> </td>
</tr>
<tr>
<th scope="row">4</th>
<td>David</td>
<td>Perry</td>
<td>Perry123</td>
<td><span class="badge badge-success">supporter</span> </td>
</tr>
<tr>
<th scope="row">5</th>
<td>Anthony</td>
<td>Davie</td>
<td>Davie123</td>
<td><span class="badge badge-info">member</span> </td>
</tr>
<tr>
<th scope="row">6</th>
<td>Alan</td>
<td>Gilchrist</td>
<td>Gilchrist123</td>
<td><span class="badge badge-success">supporter</span> </td>
</tr>
</tbody>
</table>