Horje Website
Bootstrap 4 Position Classes – Learn Sticky top class – Bootstrap Code

Bootstrap 4 Position Classes – Learn Sticky top class

Bootstrap 4 Position Classes - Learn Sticky top class - Bootstrap Code


 
  1. <!DOCTYPE htpl>
  2. <htpl lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6. <title>Bootstrap 4 Position Classes</title>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  10. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
  11. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
  12. <style>
  13. .bs-example{
  14. margin: 20px;
  15. padding: 20px;
  16. height: 200px;
  17. overflow-y: auto;
  18. border: 1px solid #ccc;
  19. }
  20. .box{
  21. padding: 20px;
  22. background: #abb1b8;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div class="bs-example">
  28. <p class="mb-3"><strong>Note:</strong> Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top class uses CSS's position: sticky, however isn't fully supported in all browsers. Scroll the area to see how it works.</p>
  29. <div class="box sticky-top">.sticky-top</div>
  30. <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
  31. </div>
  32. </body>



Try Your Self ->



Published:
September 23, 2020
Author:
admin
Category:
Bootstrap Basic, Bootstrap Source Code
Views:
19

This article was posted in Bootstrap Basic, Bootstrap Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023