-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
111 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| <!-- Bootstrap 4 starter template --> | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <!-- Required meta tags --> | ||
| <meta charset="utf-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | ||
|
|
||
| <!-- Bootstrap CSS --> | ||
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" | ||
| integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | ||
|
|
||
| <title>Float and fixed positions</title> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
|
|
||
| <!-- Space at the top --> | ||
| <div style="margin-top:20px;"></div> | ||
|
|
||
| <!-- Floats --> | ||
| <div class="float-left">float-left</div> | ||
| <br> | ||
| <div class="float-right">float-right</div> | ||
| <br> | ||
| <div class="float-none">float-none</div> | ||
| <br> | ||
|
|
||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Responsive Floats --> | ||
| <div class="float-sm-right">float right on small or wider</div> | ||
| <br> | ||
| <div class="float-md-right">float right on medium or wider</div> | ||
| <br> | ||
| <div class="float-lg-right">float right on large or wider</div> | ||
| <br> | ||
| <div class="float-xl-right">float right on extra large or wider</div> | ||
| <br> | ||
| <br> | ||
|
|
||
| <div class="float-sm-left">float left on small or wider</div> | ||
| <br> | ||
| <div class="float-md-left">float left on medium or wider</div> | ||
| <br> | ||
| <div class="float-lg-left">float left on large or wider</div> | ||
| <br> | ||
| <div class="float-xl-left">float left on extra large or wider</div> | ||
| <br> | ||
| <br> | ||
|
|
||
| <div class="float-sm-none">float none on small or wider</div> | ||
| <br> | ||
| <div class="float-md-none">float none on medium or wider</div> | ||
| <br> | ||
| <div class="float-lg-none">float none on large or wider</div> | ||
| <br> | ||
| <div class="float-xl-none">float none on extra large or wider</div> | ||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Clearfix --> | ||
| <div class="bg-success clearfix"> | ||
| <button class="float-left">Float left</button> | ||
| <button class="float-right">Float right</button> | ||
| </div> | ||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Fixed top --> | ||
| <h3 class="fixed-top">Fixed-top</h3> | ||
|
|
||
| <p>Fixed Top Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facilis iste libero natus neque, quo saepe. | ||
| Accusantium asperiores at commodi consequatur cum deleniti, dolor dolorum ea eligendi harum maiores, nostrum | ||
| numquam obcaecati quaerat qui quia quisquam rem similique suscipit tempora temporibus tenetur, velit voluptates. | ||
| Adipisci cumque facere illo mollitia ratione.</p> | ||
| <br> | ||
| <br> | ||
|
|
||
| <!-- Sticky top --> | ||
| <h3 class="sticky-top">Sticky-top</h3> | ||
|
|
||
| <p>Fixed Top Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque facilis iste libero natus neque, quo saepe. | ||
| Accusantium asperiores at commodi consequatur cum deleniti, dolor dolorum ea eligendi harum maiores, nostrum | ||
| numquam obcaecati quaerat qui quia quisquam rem similique suscipit tempora temporibus tenetur, velit voluptates. | ||
| Adipisci cumque facere illo mollitia ratione. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores | ||
| beatae blanditiis consequatur cumque ducimus earum est, ex fugit, ipsa molestiae nam nisi qui, veniam. Commodi | ||
| culpa facilis in itaque reprehenderit soluta vero voluptatibus. A aliquid animi aspernatur cupiditate enim ex | ||
| modi nulla obcaecati officiis, quis, repellat reprehenderit tempora velit veritatis voluptas? A ab dicta dolorem | ||
| illum nobis non placeat provident quis tenetur velit. Commodi iste unde voluptates! Ad animi deleniti dicta | ||
| ducimus eaque eius eligendi est facilis fuga, fugit laudantium magni nesciunt obcaecati odit officiis quis quo | ||
| rem repellat sapiente, sed similique tempora tempore unde velit voluptas, voluptate voluptatem voluptates.</p> | ||
|
|
||
| <!-- Fixed bottom --> | ||
| <h3 class="fixed-bottom">Fixed-Bottom</h3> | ||
|
|
||
| <!-- space at the bottom --> | ||
| <div style="margin-bottom:1000px;"></div> | ||
| </div> | ||
|
|
||
| <!-- Optional JavaScript --> | ||
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | ||
| <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" | ||
| integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" | ||
| integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> | ||
| <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" | ||
| integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> | ||
| </body> | ||
| </html> |