-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path4_Float-FixedPosition.html
57 lines (52 loc) · 4.71 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
<!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>
<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 Visible</h1>
</div>
</body>
</html>