/
Float-fixedPosition.html
53 lines (49 loc) · 3.92 KB
/
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap 5 Basic</title>
<!-- CDN link
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> -->
<!-- Compiled CSS and JS -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>
<body>
<div class="container" style="margin-top: 20px;">
<!-- float position -->
<div>
<img src="https://cdn.pixabay.com/photo/2022/01/21/08/15/woman-6954155_1280.jpg" alt="" class="float-start">
<p>Float Start</p>
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2022/01/21/08/15/woman-6954155_1280.jpg" alt="" class="float-end">
<p>Float End</p>
</div>
<div>
<img src="https://cdn.pixabay.com/photo/2022/01/21/08/15/woman-6954155_1280.jpg" alt="" class="float-none">
<p>Float None</p>
</div>
<!-- clearFix -->
<div class="bg-success clearfix visible">
<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. Repudiandae earum laudantium maxime delectus maiores voluptate enim illum cum, nisi ratione.</p>
<!-- fixed -->
<!-- <h3 class="fixed-top">Fixed Top</h3> -->
<h3 class="sticky-top">Sticky Top</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus illo omnis consequuntur dignissimos ipsa praesentium nostrum perspiciatis nisi, maiores vitae reiciendis, placeat veniam non, quia alias. Quibusdam, perferendis aspernatur.</p>
<!-- <h3 class="fixed-bottom">Fixed Bottom</h3> -->
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolores omnis itaque? Nisi quis sapiente architecto eius enim eum facere dignissimos debitis qui explicabo? Doloribus natus incidunt pariatur provident ratione commodi eligendi iusto corrupti exercitationem esse, adipisci modi eum cum hic quia in ducimus laborum mollitia, nesciunt rerum vero est. Porro consectetur necessitatibus ipsa? Ut porro tempore veritatis quo quod facere consectetur, sint, blanditiis tenetur sapiente ab, reprehenderit similique. Officiis quod illo distinctio maxime iste asperiores quibusdam exercitationem deleniti magnam at aut doloremque inventore, necessitatibus impedit rem odio! Maxime eligendi, illum mollitia laudantium rerum aperiam asperiores et sit modi placeat cupiditate ipsam est, aliquid accusantium perspiciatis, facere veritatis unde magnam numquam! Dolorum commodi in sint saepe doloremque repellat alias. Vel, eos quidem explicabo dicta tenetur architecto fuga odit nisi cupiditate laborum similique deleniti veniam aperiam. Velit provident fugit perferendis modi distinctio nemo harum sint illum laborum itaque! Impedit, fugiat! Deserunt nostrum natus repellendus odio asperiores ea dignissimos amet dicta adipisci? Repellat odio, laudantium praesentium ipsum vero, voluptas in culpa blanditiis aliquam libero similique nihil velit tempore error nobis quia, assumenda corrupti impedit. Quidem illum accusamus qui, voluptate impedit officiis minus nam pariatur tempore ducimus cumque nisi ab nemo magni hic.</p>
<!-- invisible -->
<h1 class="visible">Hello Visible</h1>
</div>
<!-- CDN link
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script> -->
<!-- Compiled CSS and JS -->
<script src="/js/bootstrap.min.js"></script>
</body>
</html>