-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2_4_floats_position.html
executable file
·193 lines (175 loc) · 11.8 KB
/
2_4_floats_position.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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
crossorigin="anonymous">
<title>Bootstrap Sandbox</title>
</head>
<body>
<header>
<h1 class="display-3 text-center my-4">Floats & Fixed Positions</h1>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown">
2: Utilities
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="2_2_basic_typography.html">2.2 Basic Typography</a>
<a class="dropdown-item" href="2_3_text_alignment_display.html">2.3 Text Alignment & Display</a>
<a class="dropdown-item" href="2_4_floats_position.html">2.4 Floats & Position</a>
<a class="dropdown-item" href="2_5_colors_background.html">2.5: Colors & Background</a>
<a class="dropdown-item" href="2_6_spacing.html">2.6 Spacing</a>
<a class="dropdown-item" href="2_7_sizing.html">2.7 Sizing</a>
<a class="dropdown-item" href="2_8_breakpoints.html">2.8 Breakpoints</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-success btn-block dropdown-toggle" type="button" data-toggle="dropdown">
3: CSS Components
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="3_2_buttons.html">3.2 Buttons</a>
<a class="dropdown-item" href="3_3_navbar.html">3.3 Navbar</a>
<a class="dropdown-item" href="3_4_list_groups_badges.html">3.4 List Groups & Badges</a>
<a class="dropdown-item" href="3_5_forms.html">3.5 Forms</a>
<a class="dropdown-item" href="3_6_input_groups.html">3.6 Input Groups</a>
<a class="dropdown-item" href="3_7_alerts_progress.html">3.7 Alerts & Progress</a>
<a class="dropdown-item" href="3_8_tables_pagination.html">3.8 Tables & Pagination</a>
<a class="dropdown-item" href="3_9_cards.html">3.9 Cards</a>
<a class="dropdown-item" href="3_10_media_object.html">3.10 Media Objects</a>
<a class="dropdown-item" href="3_11_jumbotron.html">3.11 Jumbotron</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-warning btn-block dropdown-toggle" type="button" data-toggle="dropdown">
4: Grid & Flexbox
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="4_2_grid_system.html">4.2 Grid System</a>
<a class="dropdown-item" href="4_3_grid_alignment.html">4.3 Grid Alignment</a>
<a class="dropdown-item" href="4_4_flexbox.html">4.4 Flexbox</a>
<a class="dropdown-item" href="4_5_auto_margins_wrapping_order.html">4.5 Auto Margins & Wrap</a>
</div>
</div>
</div>
<div class="col-md-3">
<div class="dropdown">
<button class="btn btn-danger btn-block dropdown-toggle" type="button" data-toggle="dropdown">
5: JavaScript Widgets
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="5_2_carousel.html">5.2 Carousel</a>
<a class="dropdown-item" href="5_3_collapse.html">5.3 Collapse</a>
<a class="dropdown-item" href="5_4_tooltips.html">5.4 Tooltips</a>
<a class="dropdown-item" href="5_5_popovers.html">5.5 Popovers</a>
<a class="dropdown-item" href="5_6_modals.html">5.6 Modals</a>
<a class="dropdown-item" href="5_7_scrollspy.html">5.7 ScrollSpy</a>
</div>
</div>
</div>
</div>
</div>
<hr>
</header>
<div class="container">
<!--##################START HERE###################-->
<!-- 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>
<!-- 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>
<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>
<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>
<br>
<!-- CLEARFIX -->
<div class="bg-success clearfix">
<button class="float-left">Float Left</button>
<button class="float-right">Float Right</button>
</div>
<!-- FIXED TOP -->
<h3 class="fixed-top">Fixed Top</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure natus, fuga provident molestias, voluptates molestiae
aperiam sit dicta a assumenda nesciunt quos adipisci reprehenderit animi ipsum unde quasi nobis veniam, modi.
Fuga natus harum, maxime corporis rerum, maiores delectus aliquam aut quo incidunt dignissimos temporibus? Vitae
dolorem accusamus voluptatibus illo aut nam praesentium obcaecati quaerat cupiditate distinctio tempora eius
esse fuga, repellat fugit harum quia nihil sit in debitis expedita. Eos, voluptates eum rem voluptatum tempore
accusamus soluta enim, animi in voluptatibus aliquam distinctio totam repudiandae necessitatibus quidem consequatur
incidunt aliquid ad! Inventore ratione, consequatur eligendi iusto esse iure officia praesentium magni in! Nemo
tempora, voluptatem facilis reprehenderit minima reiciendis alias similique est rem debitis id expedita voluptatum
porro fugiat magni inventore neque. </p>
<!-- FIXED STICKY -->
<h3 class="sticky-top">Sticky</h3>
<p>Est molestias sunt quae quibusdam sequi odit, iusto expedita tempore aspernatur ipsum, necessitatibus rerum debitis,
harum, voluptatibus dolorem. Reprehenderit ex aperiam tempore. Cumque ut iste ullam non pariatur, qui architecto,
commodi illo praesentium debitis similique, molestiae harum distinctio inventore incidunt enim atque repudiandae
eius molestias exercitationem tempore odio dignissimos iusto officia. Libero quasi dicta quos est eveniet magni
deserunt aut vero id ad, incidunt nostrum provident tempora modi placeat voluptatem, quod excepturi ipsam aspernatur
necessitatibus molestias possimus veritatis sequi. Minus ducimus maiores debitis, nulla magni eum ratione numquam
deleniti sunt et dolorum necessitatibus cumque fugit libero recusandae impedit, quaerat, nemo. Vel temporibus
amet alias mollitia aspernatur error sint, doloremque, porro blanditiis quia atque ratione reiciendis, praesentium
sed doloribus excepturi. Eius tenetur quis veniam enim atque fugit, a itaque dignissimos iusto, tempore fugiat
minima libero quasi exercitationem corrupti nam sequi, doloremque quae repudiandae quisquam iure nisi totam consectetur.
Corrupti corporis doloribus dolore iusto perspiciatis ipsum, enim sapiente nobis ullam delectus aperiam eaque
harum sequi porro! Reprehenderit hic dolores repellat deleniti, illo nostrum nam at odio quasi quis eaque asperiores
culpa doloremque ad velit ullam ratione omnis quae adipisci autem necessitatibus. Quod nam non maiores assumenda
quae eius nobis cum suscipit, optio aliquid beatae modi tempora delectus voluptatibus debitis earum natus amet
libero itaque quasi expedita, maxime repudiandae! Repudiandae sunt similique eum, provident deserunt vitae. Maxime
nostrum, nemo quia eius rerum quas recusandae. Molestiae ullam dignissimos illo eum necessitatibus culpa ea,
distinctio maiores molestias aliquam, eligendi soluta cumque odio quaerat cupiditate similique in accusamus dolorum
nobis. Ea, rem fugit. Minima quae magni laboriosam possimus corporis quidem recusandae aspernatur dignissimos
accusamus adipisci, maiores, tenetur excepturi doloremque eum consequuntur? Expedita possimus sit, vel neque
fugiat quo ab? Quaerat alias, molestias rerum repudiandae, iste, voluptatem consequatur ex enim tenetur quidem
expedita, provident vel reiciendis. Ea ipsam suscipit ex ab nulla est, aspernatur nesciunt consequatur cumque
laudantium. Unde ab earum eius vero obcaecati reiciendis omnis quod culpa harum, modi, possimus molestiae voluptatibus
beatae, minima ad accusamus quibusdam! Dolor nostrum impedit culpa nemo expedita, numquam dignissimos totam ex
reprehenderit consectetur neque dicta deserunt, recusandae porro ipsa accusamus maxime soluta eum facilis temporibus
nesciunt accusantium. Placeat provident facere blanditiis doloremque eos tempora officia doloribus deserunt molestias
voluptates velit hic, tenetur cupiditate ab. Hic, unde!</p>
<!-- FIXED BOTTOM -->
<h3 class="fixed-bottom">Fixed Bottom</h3>
</div>
<!-- ./container -->
<div style="margin-top:500px;"></div>
<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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
crossorigin="anonymous"></script>
</body>
</html>