-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path4_Float-FixedPosition.html
58 lines (53 loc) · 5.49 KB
/
4_Float-FixedPosition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float & Fixed</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<!-- Float & Fixed Position Responsive-->
<div>
<img src="html.png"class="float-start" style="width: 200px;height: 200px;" alt="">
<p>Float Start</p>
</div>
<div>
<img src="css3.png"class="float-end" style="width: 150px;height: 200px;" alt="">
<p>Float End</p>
</div>
<div>
<img src="js.png"class="float-none" style="width: 200px;height: 200px;" alt="">
<p>Float None</p>
</div>
<!-- ClearFix -->
<div class="bg-success">
<button class="float-start">Float Left</button>
<button class="float-end">Float Right</button>
</div>
<h3>Hello Bootstrap 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex adipisci obcaecati qui reprehenderit cumque, dolore quia veniam in facere, eius explicabo sunt officia eos alias omnis ad ducimus. Non, facilis!</p>
<div class="bg-success clearfix">
<button class="float-start">Float Left</button>
<button class="float-end">Float Right</button>
</div>
<h3>Hello Bootstrap 5</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex adipisci obcaecati qui reprehenderit cumque, dolore quia veniam in facere, eius explicabo sunt officia eos alias omnis ad ducimus. Non, facilis!</p>
<!-- Fixed -->
<div class="container" style="margin-top: 20px;">
<h3 class="fixed-top">Fixed Top</h3>
<h3 class="sticky-top">Sticky Top</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae repudiandae ea eveniet expedita velit iure sapiente praesentium in optio labore veritatis, minus nesciunt, cupiditate adipisci est aliquid harum, consequuntur quaerat laudantium ipsum nobis molestiae qui corrupti? Quod laudantium delectus officia nam inventore consequatur explicabo adipisci iure odio doloribus sint temporibus fuga cum voluptatum architecto rerum suscipit hic, dolorum voluptatem sequi saepe assumenda! Nam, blanditiis omnis autem minima expedita provident accusamus tenetur debitis modi possimus corporis error, similique magnam asperiores quis quidem maiores. Perspiciatis aliquid consectetur laboriosam eligendi, cum maiores, ducimus, atque placeat pariatur quasi voluptates sequi optio. Veritatis, modi quaerat.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae repudiandae ea eveniet expedita velit iure sapiente praesentium in optio labore veritatis, minus nesciunt, cupiditate adipisci est aliquid harum, consequuntur quaerat laudantium ipsum nobis molestiae qui corrupti? Quod laudantium delectus officia nam inventore consequatur explicabo adipisci iure odio doloribus sint temporibus fuga cum voluptatum architecto rerum suscipit hic, dolorum voluptatem sequi saepe assumenda! Nam, blanditiis omnis autem minima expedita provident accusamus tenetur debitis modi possimus corporis error, similique magnam asperiores quis quidem maiores. Perspiciatis aliquid consectetur laboriosam eligendi, cum maiores, ducimus, atque placeat pariatur quasi voluptates sequi optio. Veritatis, modi quaerat.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi consequatur excepturi doloremque assumenda minima similique magni, aspernatur nihil. Dignissimos deleniti vitae quaerat sunt accusamus, recusandae tempore expedita facere beatae iusto repellat tenetur nesciunt sit nemo officia saepe atque nulla placeat. Eos pariatur obcaecati totam accusantium aliquid nostrum, labore alias id sequi. Inventore ab sed natus libero tenetur reprehenderit, odit dolores rerum? Repellendus impedit nemo sapiente nobis enim reprehenderit officiis voluptatibus earum consectetur tempora possimus, similique totam animi ipsum recusandae error blanditiis temporibus veritatis quasi. Unde odit nesciunt alias odio minima quod, perspiciatis officia eum mollitia dolor nobis nemo veniam soluta!</p>
<h3 class="fixed-bottom">Fixed Bottom</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, fugiat consequuntur? Aliquam harum cum expedita perferendis ea officiis explicabo ad minus neque! Fuga corrupti quia necessitatibus soluta eos odio. Provident illo qui vitae odit id facere. Quod nam, ad iusto voluptatibus obcaecati dignissimos non blanditiis. Deleniti quo delectus soluta at incidunt eos numquam sunt aut aperiam quia quibusdam quae, expedita dolor consequuntur similique fugit voluptatem voluptatum dicta enim? Alias veniam quis ut quam doloribus molestiae pariatur ab, explicabo nobis atque magnam. Minima voluptate, aliquid laboriosam commodi atque sint esse, eius consequuntur praesentium, hic ab dicta temporibus! Molestias aut assumenda dignissimos.</p>
</div>
<!-- Invisible -->
<h1 class="visible">Hello Visible</h1>
<h1 class="invisible">Hello Invisible</h1>
</div>
</body>
</html>