Subversion Repositories cheapmusic

Rev

Rev 62 | Rev 65 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
62 - 1
<!doctype html>
2
<html lang="en">
3
 
4
<head>
5
  <title>Bootstrap Color Theme Test</title>
6
  <meta charset="utf-8">
7
  <meta name="viewport" content="width=device-width, initial-scale=1">
8
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
9
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
11
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
12
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.1/css/all.css">
13
 
14
  <link rel="stylesheet" href="https://www.findcheapmusic.linkpc.net/css/style.css">
63 - 15
  <link rel="stylesheet" href="https://www.findcheapmusic.linkpc.net/css/theme-cyborg.css">
62 - 16
</head>
17
<body>
18
    <div class="preview">
19
 
20
        <div class="container-fluid pb-5">
21
            <!-- Brand color  -->
22
            <div class="container-fluid mt-5" data-category="brand-color">
23
                <h1>Brand color</h1>
24
 
25
                <div class="mt-3 mb-5">
26
                    <h3>Theme colors</h3>
27
                    <!--div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
28
                    <div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
29
                    <div class="p-2 mb-2 bg-success text-white">.bg-success</div>
30
                    <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
31
                    <div class="p-2 mb-2 bg-warning text-white">.bg-warning</div>
32
                    <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
33
                    <div class="p-2 mb-2 bg-light text-gray-dark">.bg-light</div>
34
                    <div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
35
                    <div class="p-2 mb-2 bg-white text-gray-dark">.bg-white</div-->
36
                    <div class="p-2 mb-2 bg-primary">.bg-primary</div>
37
                    <div class="p-2 mb-2 bg-secondary">.bg-secondary</div>
38
                    <div class="p-2 mb-2 bg-success">.bg-success</div>
39
                    <div class="p-2 mb-2 bg-danger">.bg-danger</div>
40
                    <div class="p-2 mb-2 bg-warning">.bg-warning</div>
41
                    <div class="p-2 mb-2 bg-info">.bg-info</div>
42
                    <div class="p-2 mb-2 bg-light">.bg-light</div>
43
                    <div class="p-2 mb-2 bg-dark">.bg-dark</div>
44
                    <div class="p-2 mb-2 bg-white">.bg-white</div>
45
                    <div class="p-2 mb-2 bg-transparent">.bg-transparent</div>
63 - 46
                    <div class="p-2 mb-2">No background</div>
62 - 47
 
48
                    <button type="button" class="btn btn-primary">Primary</button>
49
                    <button type="button" class="btn btn-secondary">Secondary</button>
50
                    <button type="button" class="btn btn-success">Success</button>
51
                    <button type="button" class="btn btn-danger">Danger</button>
52
                    <button type="button" class="btn btn-warning">Warning</button>
53
                    <button type="button" class="btn btn-info">Info</button>
54
                    <button type="button" class="btn btn-light">Light</button>
55
                    <button type="button" class="btn btn-dark">Dark</button>
56
                    <button type="button" class="btn btn-white">White</button>
63 - 57
                    <br>
58
                    <button type="button" class="btn btn-primary active">Primary active</button>
59
                    <button type="button" class="btn btn-outline-dark">No color class</button>
62 - 60
                </div>
61
            </div>
62
 
63
            <!-- Links  -->
64
            <div class="container-fluid" data-category="links">
65
                <h1>Links</h1>
66
 
67
                <div class="mt-3 mb-5">
68
                    <h3>Default Link</h3>
69
                    <a href="javascript:void(0);">Example link</a>
70
                </div>
71
 
72
                <div class="mt-3 mb-5">
73
                    <h3>Link inside an alert</h3>
74
                    <div class="alert alert-primary" role="alert">
75
                        This is a primary alert with
76
                        <a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you like.
77
                    </div>
78
                </div>
79
            </div>
80
 
81
            <!-- Grid  -->
82
            <div class="container-fluid" data-category="grid">
83
                <h1>Grid</h1>
84
 
85
                <div>
86
                    <div class="bs-example-row">
87
                        <!-- Bootstrap Grid -->
88
                        <div class="row">
89
                            <div class="col-sm-1">.col-sm-1</div>
90
                            <div class="col-sm-1">.col-sm-1</div>
91
                            <div class="col-sm-1">.col-sm-1</div>
92
                            <div class="col-sm-1">.col-sm-1</div>
93
                            <div class="col-sm-1">.col-sm-1</div>
94
                            <div class="col-sm-1">.col-sm-1</div>
95
                            <div class="col-sm-1">.col-sm-1</div>
96
                            <div class="col-sm-1">.col-sm-1</div>
97
                            <div class="col-sm-1">.col-sm-1</div>
98
                            <div class="col-sm-1">.col-sm-1</div>
99
                            <div class="col-sm-1">.col-sm-1</div>
100
                            <div class="col-sm-1">.col-sm-1</div>
101
                        </div>
102
                        <div class="row">
103
                            <div class="col-sm-2">.col-sm-2</div>
104
                            <div class="col-sm-3">.col-sm-3</div>
105
                            <div class="col-sm-7">.col-sm-7</div>
106
                        </div>
107
                        <div class="row">
108
                            <div class="col-sm-4">.col-sm-4</div>
109
                            <div class="col-sm-4">.col-sm-4</div>
110
                            <div class="col-sm-4">.col-sm-4</div>
111
                        </div>
112
                        <div class="row">
113
                            <div class="col-sm-5">.col-sm-5</div>
114
                            <div class="col-sm-7">.col-sm-7</div>
115
                        </div>
116
                        <div class="row">
117
                            <div class="col-sm-6">.col-sm-6</div>
118
                            <div class="col-sm-6">.col-sm-6</div>
119
                        </div>
120
                        <div class="row">
121
                            <div class="col-sm-12">.col-sm-12</div>
122
                        </div>
123
                    </div>
124
                </div>
125
            </div>
126
 
127
            <!-- Fonts  -->
128
            <div class="container-fluid" data-category="fonts">
129
                <h1>Fonts</h1>
130
 
131
                <div>
132
                    <h1>h1 </h1>
133
                    <h2>h2 </h2>
134
                    <h3>h3 </h3>
135
                    <h4>h4 </h4>
136
                    <h5>h5 </h5>
137
                    <h6>h6 </h6>
138
 
139
                    <br>
140
 
141
                    <h1>Heading 1
142
                        <small>Sub-heading</small>
143
                    </h1>
144
                    <h2>Heading 2
145
                        <small>Sub-heading</small>
146
                    </h2>
147
                    <h3>Heading 3
148
                        <small>Sub-heading</small>
149
                    </h3>
150
                    <h4>Heading 4
151
                        <small>Sub-heading</small>
152
                    </h4>
153
                    <h5>Heading 5
154
                        <small>Sub-heading</small>
155
                    </h5>
156
                    <h6>Heading 6
157
                        <small>Sub-heading</small>
158
                    </h6>
159
 
160
                    <br>
161
 
162
                    <h1 class="display-1">Display 1</h1>
163
                    <h1 class="display-2">Display 2</h1>
164
                    <h1 class="display-3">Display 3</h1>
165
                    <h1 class="display-4">Display 4</h1>
166
                    <h1 class="display-5">Display 5</h1>
167
                    <h1 class="display-6">Display 6</h1>
168
                    <h1 class="display-7">Display 7</h1>
169
 
170
                    <br>
171
 
172
                    <p class="lead">
173
                        This is the article lead &mdash; it stands out at the start of the article.
174
                    </p>
175
 
176
                    <p>
177
                        This is normal text at the normal size etc...
178
                    </p>
179
 
180
                    <p>Sample
181
                        <mark>marked text</mark>.</p>
182
 
183
                    <br>
184
                    <blockquote class="blockquote">
185
                        <p>The most important moment of your life is now. The most important person in your life is the one you are with now, and the most important activity in your life is the one you are involved with now.</p>
186
                    </blockquote>
187
                </div>
188
            </div>
189
 
190
 
191
 
192
            <!-- Buttons  -->
193
            <div class="container-fluid" data-category="buttons">
194
                <h1>Buttons</h1>
195
 
196
                <div class="mt-3 mb-5">
197
                    <h3>Default buttons</h3>
198
                    <button type="button" class="btn btn-primary">Primary</button>
199
                    <button type="button" class="btn btn-secondary">Secondary</button>
200
                    <button type="button" class="btn btn-info">Info</button>
201
                    <button type="button" class="btn btn-success">Success</button>
202
                    <button type="button" class="btn btn-warning">Warning</button>
203
                    <button type="button" class="btn btn-danger">Danger</button>
204
                    <button type="button" class="btn btn-light">Light</button>
205
                    <button type="button" class="btn btn-dark">Dark</button>
206
                    <button type="button" class="btn btn-link">Link</button>
207
                </div>
208
 
209
                <div class="mt-3 mb-5">
210
                    <h3>Buttons with outline</h3>
211
                    <button type="button" class="btn btn-outline-primary">Primary</button>
212
                    <button type="button" class="btn btn-outline-secondary">Secondary</button>
213
                    <button type="button" class="btn btn-outline-info">Info</button>
214
                    <button type="button" class="btn btn-outline-success">Success</button>
215
                    <button type="button" class="btn btn-outline-warning">Warning</button>
216
                    <button type="button" class="btn btn-outline-danger">Danger</button>
217
                    <button type="button" class="btn btn-outline-light">Light</button>
218
                    <button type="button" class="btn btn-outline-dark">Dark</button>
219
                </div>
220
 
221
 
222
 
223
                <div class="mt-3 mb-5">
224
                    <h3>Buttons sizes</h3>
225
                    <button type="button" class="btn btn-success btn-sm">Small</button>
226
                    <button type="button" class="btn btn-success">Default</button>
227
                    <button type="button" class="btn btn-success btn-lg">Large</button>
228
 
229
                    <br>
230
 
231
                    <button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
232
                </div>
233
 
234
 
235
 
236
                <div class="mt-3 mb-5">
237
                    <h3>Disabled button</h3>
238
                    <p>
239
                        <a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a' Element</a>
240
                    </p>
241
 
242
                    <p>
243
                        <button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element</button>
244
                    </p>
245
 
246
                    <p>
247
                        <input type="button" class="btn btn-lg btn-primary" disabled="disabled" value="The 'input' Element">
248
                    </p>
249
                </div>
250
 
251
                <div class="mt-3 mb-5">
252
                    <h3>Checkbox buttons</h3>
253
                    <div class="btn-group" data-toggle="buttons">
254
                        <label class="btn btn-primary active">
255
          <input type="checkbox" checked> Boots
256
        </label>
257
                        <label class="btn btn-primary">
258
          <input type="checkbox"> Shoes
259
        </label>
260
                        <label class="btn btn-primary">
261
          <input type="checkbox"> Feet
262
        </label>
263
                    </div>
264
                </div>
265
 
266
 
267
 
268
                <div class="mt-3 mb-5">
269
                    <h3>Radio buttons</h3>
270
                    <div class="btn-group" data-toggle="buttons">
271
                        <label class="btn btn-primary">
272
          <input type="radio" name="options" id="boots" checked> Boots
273
        </label>
274
                        <label class="btn btn-primary">
275
          <input type="radio" name="options" id="shoes"> Shoes
276
        </label>
277
                        <label class="btn btn-primary">
278
          <input type="radio" name="options" id="feet"> Feet
279
        </label>
280
                    </div>
281
                </div>
282
            </div>
283
 
284
            <!-- Forms  -->
285
            <div class="container-fluid" data-category="forms">
286
                <h1>Forms</h1>
287
 
288
 
289
 
290
                <div class="mt-3 mb-5">
291
                    <h3>Default form group</h3>
292
                    <form action="javascript:void(0);">
293
                        <fieldset class="form-group">
294
                            <label for="first_name1">First Name</label>
295
                            <input type="text" class="form-control" id="first_name1" name="first_name">
296
                        </fieldset>
297
                        <fieldset class="form-group">
298
                            <label for="last_name1">Last Name</label>
299
                            <input type="text" class="form-control" id="last_name1" name="last_name">
300
                        </fieldset>
301
                        <button type="submit" class="btn btn-default">Submit</button>
302
                    </form>
303
                </div>
304
 
305
                <h3>Inline form</h3>
306
 
307
                <div class="mt-3 mb-5">
308
                    <form action="javascript:void(0);" class="form-inline">
309
                        <label class="mr-sm-2 mb-0" for="first_name2">First Name</label>
310
                        <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name2" name="first_name">
311
                        <label class="mr-sm-2 mb-0" for="last_name2">Last Name</label>
312
                        <input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name2" name="last_name">
313
                        <button type="submit" class="btn btn-default mt-2 mt-sm-0">Submit</button>
314
                    </form>
315
                </div>
316
 
317
                <h3>Aligned form</h3>
318
 
319
                <div class="mt-3 mb-5">
320
                    <div class="container">
321
                        <form action="javascript:void(0);">
322
                            <div class="form-group row">
323
                                <label for="first_name3" class="col-xs-3 col-form-label mr-2">First Name</label>
324
                                <div class="col-xs-9">
325
                                    <input type="text" class="form-control" id="first_name3" name="first_name">
326
                                </div>
327
                            </div>
328
                            <div class="form-group row">
329
                                <label for="last_name3" class="col-xs-3 col-form-label mr-2">Last Name</label>
330
                                <div class="col-xs-9">
331
                                    <input type="text" class="form-control" id="last_name3" name="last_name">
332
                                </div>
333
                            </div>
334
                            <div class="form-group row">
335
                                <div class="offset-xs-3 col-xs-9">
336
                                    <button type="submit" class="btn btn-default">Submit</button>
337
                                </div>
338
                            </div>
339
                        </form>
340
                    </div>
341
                </div>
342
 
343
                <div>
344
                    <div class="container">
345
                        <form action="javascript:void(0);">
346
                            <fieldset class="form-group">
347
                                <div class="row">
348
                                    <label class="col-form-legend col-3">Fruit</label>
349
                                    <div class="col-9">
350
                                        <div class="form-check">
351
                                            <label class="form-check-label">
352
                    <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio1" value="1"> Apple
353
                  </label>
354
                                        </div>
355
                                        <div class="form-check">
356
                                            <label class="form-check-label">
357
                    <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio2" value="2" checked> Orange
358
                  </label>
359
                                        </div>
360
                                        <div class="form-check">
361
                                            <label class="form-check-label">
362
                    <input class="form-check-input" type="radio" name="legendRadio" id="legendRadio3" value="3"> Watermelon
363
                  </label>
364
                                        </div>
365
                                    </div>
366
                                </div>
367
                            </fieldset>
368
 
369
                            <div class="form-group row">
370
                                <label for="first_name4" class="col-3 col-form-label">First Name</label>
371
                                <div class="col-9">
372
                                    <input type="text" class="form-control" id="first_name4" name="first_name">
373
                                </div>
374
                            </div>
375
                            <div class="form-group row">
376
                                <label for="last_name4" class="col-3 col-form-label">Last Name</label>
377
                                <div class="col-9">
378
                                    <input type="text" class="form-control" id="last_name4" name="last_name">
379
                                </div>
380
                            </div>
381
 
382
                            <div class="form-group row">
383
                                <div class="offset-3 col-9">
384
                                    <button type="submit" class="btn btn-default">Submit</button>
385
                                </div>
386
                            </div>
387
 
388
                        </form>
389
                    </div>
390
                </div>
391
 
392
                <h3>Form with help text </h3>
393
 
394
                <div class="mt-3 mb-5">
395
                    <label for="accountId">Account Id</label>
396
                    <input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
397
                    <span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
398
                </div>
399
 
400
                <h3>Checkbox and radio </h3>
401
 
402
                <div class="mt-3 mb-5">
403
                    <div class="form-check form-check-inline">
404
                        <label class="form-check-label">
405
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> 1
406
                        </label>
407
                    </div>
408
 
409
                    <div class="form-check form-check-inline">
410
                        <label class="form-check-label">
411
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> 2
412
                        </label>
413
                    </div>
414
 
415
                    <div class="form-check form-check-inline">
416
                        <label class="form-check-label">
417
                            <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> 3
418
                        </label>
419
                    </div>
420
 
421
                    <div class="form-check form-check-inline">
422
                        <label class="form-check-label">
423
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1"> 1
424
                        </label>
425
                    </div>
426
 
427
                    <div class="form-check form-check-inline">
428
                        <label class="form-check-label">
429
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> 2
430
                        </label>
431
                    </div>
432
 
433
                    <div class="form-check form-check-inline">
434
                        <label class="form-check-label">
435
                            <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3"> 3
436
                        </label>
437
                    </div>
438
                </div>
439
            </div>
440
 
441
            <!-- Dropdown  -->
442
            <div class="container-fluid" data-category="dropdown">
443
                <h1>Dropdown</h1>
444
 
445
                <div class="row">
446
                    <div style="position: relative" class="mt-3 mb-5 col-4">
447
                        <h3>Default dropdown</h3>
448
                        <div class="dropdown">
449
                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
450
            Dropdown button
451
          </button>
452
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
453
                                <a class="dropdown-item" href="javascript:void(0);">Action</a>
454
                                <a class="dropdown-item" href="javascript:void(0);">Another action</a>
455
                                <a class="dropdown-item" href="javascript:void(0);">Something else here</a>
456
                            </div>
457
 
458
                        </div>
459
                    </div>
460
                    <div class="mt-3 mb-5 col-4">
461
                        <h3>Dropdown with menu</h3>
462
                        <div class="dropdown">
463
                            <button class="btn btn-primary dropdown-toggle" type="button" id="about-us1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
464
            About Us
465
          </button>
466
                            <div class="dropdown-menu" aria-labelledby="about-us1">
467
                                <h6 class="dropdown-header">Company Information</h6>
468
                                <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
469
                                <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
470
                                <h6 class="dropdown-header">Contact Us</h6>
471
                                <a class="dropdown-item" href="javascript:void(0);">Call Center</a>
472
                                <a class="dropdown-item" href="javascript:void(0);">Store Locations</a>
473
                            </div>
474
                        </div>
475
                    </div>
476
                    <div class="mt-3 mb-5 col-4">
477
                        <h3>Dropdown with divider</h3>
478
                        <div class="dropdown">
479
                            <button class="btn btn-primary dropdown-toggle" type="button" id="about-us2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
480
            About Us
481
          </button>
482
                            <div class="dropdown-menu" aria-labelledby="about-us2">
483
                                <a class="dropdown-item" href="javascript:void(0);">Our Story</a>
484
                                <a class="dropdown-item" href="javascript:void(0);">Our Team</a>
485
                                <div class="dropdown-divider"></div>
486
                                <a class="dropdown-item" href="javascript:void(0);">Contact Us</a>
487
                            </div>
488
                        </div>
489
                    </div>
490
                </div>
491
            </div>
492
 
493
            <!-- Navs  -->
494
            <div class="container-fluid" data-category="navs">
495
                <h1>Navs</h1>
496
 
497
                <h3>Default nav</h3>
498
 
499
                <div class="mt-3 mb-5">
500
                    <ul class="nav">
501
 
502
                        <li class="nav-item">
503
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
504
                        </li>
505
 
506
                        <li class="nav-item">
507
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
508
                        </li>
509
 
510
                        <li class="nav-item">
511
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
512
                        </li>
513
 
514
                        <li class="nav-item">
515
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
516
                        </li>
517
 
518
                    </ul>
519
                </div>
520
 
521
                <h3>Horizontal menu</h3>
522
 
523
                <div class="mt-3 mb-5">
524
                    <nav class="nav flex-column">
525
                        <a class="nav-link active" href="javascript:void(0);">HTML</a>
526
                        <a class="nav-link" href="javascript:void(0);">CSS</a>
527
                        <a class="nav-link" href="javascript:void(0);">JavaScript</a>
528
                        <a class="nav-link" href="javascript:void(0);">Preview</a>
529
                    </nav>
530
                </div>
531
 
532
                <h3>Nav with tabs</h3>
533
 
534
                <div class="mt-3 mb-5">
535
                    <ul class="nav nav-tabs">
536
 
537
                        <li class="nav-item">
538
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
539
                        </li>
540
 
541
                        <li class="nav-item">
542
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
543
                        </li>
544
 
545
                        <li class="nav-item">
546
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
547
                        </li>
548
 
549
                        <li class="nav-item">
550
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
551
                        </li>
552
 
553
                    </ul>
554
                </div>
555
 
556
                <h3>Nav with pills</h3>
557
 
558
                <div class="mt-3 mb-5">
559
                    <ul class="nav nav-pills">
560
 
561
                        <li class="nav-item">
562
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
563
                        </li>
564
 
565
                        <li class="nav-item">
566
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
567
                        </li>
568
 
569
                        <li class="nav-item">
570
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
571
                        </li>
572
 
573
                        <li class="nav-item">
574
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
575
                        </li>
576
 
577
                    </ul>
578
                </div>
579
 
580
                <h3>Horizontal nav with pills</h3>
581
 
582
                <div class="mt-3 mb-5">
583
                    <ul class="nav nav-pills flex-column">
584
 
585
                        <li class="nav-item">
586
                            <a class="nav-link active" href="javascript:void(0);">HTML</a>
587
                        </li>
588
 
589
                        <li class="nav-item">
590
                            <a class="nav-link" href="javascript:void(0);">CSS</a>
591
                        </li>
592
 
593
                        <li class="nav-item">
594
                            <a class="nav-link" href="javascript:void(0);">JavaScript</a>
595
                        </li>
596
 
597
                        <li class="nav-item">
598
                            <a class="nav-link" href="javascript:void(0);">Preview</a>
599
                        </li>
600
 
601
                    </ul>
602
                </div>
603
 
604
                <h3>Nav with tabs and dropdown</h3>
605
 
606
                <div class="mt-3 mb-5">
607
                    <ul id="clothing-nav" class="nav nav-tabs" role="tablist">
608
 
609
                        <li class="nav-item">
610
                            <a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
611
                        </li>
612
 
613
                        <li class="nav-item">
614
                            <a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab" aria-controls="hats">Hats</a>
615
                        </li>
616
 
617
                        <!-- Dropdown -->
618
                        <li class="nav-item dropdown">
619
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="true" aria-expanded="false">
620
            Footwear
621
          </a>
622
                            <div class="dropdown-menu">
623
                                <a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-toggle="tab" aria-controls="dropdown-shoes">Shoes</a>
624
                                <a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-toggle="tab" aria-controls="dropdown-boots">Boots</a>
625
                            </div>
626
                        </li>
627
 
628
                    </ul>
629
 
630
                    <!-- Content Panel -->
631
                    <div id="clothing-nav-content" class="tab-content">
632
 
633
                        <div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
634
                            <p>Welcome home! Click on the tabs to see the content change.</p>
635
                        </div>
636
 
637
                        <div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
638
                            <p>A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons, safety, or as a fashion accessory.</p>
639
                        </div>
640
 
641
                        <div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">
642
                            <p>A shoe is an item of footwear intended to protect and comfort the human foot while doing various activities. Shoes are also used as an item of decoration.</p>
643
                        </div>
644
 
645
                        <div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">
646
                            <p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the foot and the ankle, while some also cover some part of the lower calf. Some boots extend up the leg, sometimes as far as the knee or even
647
                                the hip.
648
                            </p>
649
                        </div>
650
 
651
                    </div>
652
                </div>
653
            </div>
654
 
655
            <!-- Navbar  -->
656
            <div class="container-fluid" data-category="navbar">
657
                <h1>Navbar</h1>
658
 
659
                <div class="mt-3 mb-5">
660
                    <nav class="navbar navbar-expand-sm bg-faded">
661
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content1" aria-expanded="false" aria-label="Toggle navigation">
662
          <span class="navbar-toggler-icon"></span>
663
        </button>
664
 
665
                        <!-- Brand -->
666
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>
667
 
668
                        <!-- Links -->
669
                        <div class="collapse navbar-collapse" id="nav-content1">
670
                            <ul class="navbar-nav">
671
                                <li class="nav-item">
672
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
673
                                </li>
674
                                <li class="nav-item active">
675
                                    <a class="nav-link" href="javascript:void(0);">Link 2
676
                <span class="sr-only">(current)</span>
677
              </a>
678
                                </li>
679
                                <li class="nav-item">
680
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
681
                                </li>
682
                            </ul>
683
                        </div>
684
                    </nav>
685
 
686
                </div>
687
                <div class="mt-3 mb-5">
688
                    <nav class="navbar navbar-expand-sm bg-dark navbar-light bg-primary">
689
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content2" aria-expanded="false" aria-label="Toggle navigation">
690
          <span class="navbar-toggler-icon"></span>
691
        </button>
692
 
693
                        <!-- Brand -->
694
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>
695
 
696
                        <!-- Links -->
697
                        <div class="collapse navbar-collapse" id="nav-content2">
698
                            <ul class="navbar-nav">
699
                                <li class="nav-item">
700
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
701
                                </li>
702
                                <li class="nav-item">
703
                                    <a class="nav-link" href="javascript:void(0);">Link 2</a>
704
                                </li>
705
                                <li class="nav-item">
706
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
707
                                </li>
708
                            </ul>
709
                        </div>
710
                    </nav>
711
 
712
                </div>
713
 
714
                <div class="mt-3 mb-5">
715
                    <nav class="navbar navbar-expand-sm bg-dark navbar-dark bg-primary">
716
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content3" aria-expanded="false" aria-label="Toggle navigation">
717
          <span class="navbar-toggler-icon"></span>
718
        </button>
719
 
720
                        <!-- Brand -->
721
                        <a class="navbar-brand" href="javascript:void(0);">Logo</a>
722
 
723
                        <!-- Links -->
724
                        <div class="collapse navbar-collapse" id="nav-content3">
725
                            <ul class="navbar-nav">
726
                                <li class="nav-item">
727
                                    <a class="nav-link" href="javascript:void(0);">Link 1</a>
728
                                </li>
729
                                <li class="nav-item">
730
                                    <a class="nav-link" href="javascript:void(0);">Link 2</a>
731
                                </li>
732
                                <li class="nav-item">
733
                                    <a class="nav-link" href="javascript:void(0);">Link 3</a>
734
                                </li>
735
                            </ul>
736
                        </div>
737
                    </nav>
738
                </div>
739
            </div>
740
 
741
 
742
            <!-- Tables  -->
743
            <div class="container-fluid" data-category="tables">
744
                <h1>Tables</h1>
745
 
746
                <div class="mt-3 mb-5">
747
                    <h3>Default table</h3>
748
                    <div>
749
                        <table class="table">
750
                            <thead>
751
                                <tr>
752
                                    <th>Header 1</th>
753
                                    <th>Header 2</th>
754
                                    <th>Header 3</th>
755
                                </tr>
756
                            </thead>
757
                            <tbody>
758
                                <tr>
759
                                    <td>Cell</td>
760
                                    <td>Cell</td>
761
                                    <td>Cell</td>
762
                                </tr>
763
                                <tr>
764
                                    <td>Cell</td>
765
                                    <td>Cell</td>
766
                                    <td>Cell</td>
767
                                </tr>
768
                                <tr>
769
                                    <td>Cell</td>
770
                                    <td>Cell</td>
771
                                    <td>Cell</td>
772
                                </tr>
773
                            </tbody>
774
                            <tfoot>
775
                                <tr>
776
                                    <th>Footer 1</th>
777
                                    <th>Footer 2</th>
778
                                    <th>Footer 3</th>
779
                                </tr>
780
                            </tfoot>
781
                        </table>
782
                    </div>
783
                </div>
784
 
785
 
786
 
787
                <div class="mt-3 mb-5">
788
                    <h3>Table inverse</h3>
789
                    <table class="table table-inverse">
790
                        <thead>
791
                            <tr>
792
                                <th>Header 1</th>
793
                                <th>Header 2</th>
794
                                <th>Header 3</th>
795
                            </tr>
796
                        </thead>
797
                        <tbody>
798
                            <tr>
799
                                <td>Cell</td>
800
                                <td>Cell</td>
801
                                <td>Cell</td>
802
                            </tr>
803
                            <tr>
804
                                <td>Cell</td>
805
                                <td>Cell</td>
806
                                <td>Cell</td>
807
                            </tr>
808
                            <tr>
809
                                <td>Cell</td>
810
                                <td>Cell</td>
811
                                <td>Cell</td>
812
                            </tr>
813
                        </tbody>
814
                        <tfoot>
815
                            <tr>
816
                                <th>Footer 1</th>
817
                                <th>Footer 2</th>
818
                                <th>Footer 3</th>
819
                            </tr>
820
                        </tfoot>
821
                    </table>
822
                </div>
823
 
824
 
825
 
826
                <div class="mt-3 mb-5">
827
                    <h3>Table striped</h3>
828
                    <table class="table table-striped">
829
                        <thead>
830
                            <tr>
831
                                <th>Header 1</th>
832
                                <th>Header 2</th>
833
                                <th>Header 3</th>
834
                            </tr>
835
                        </thead>
836
                        <tbody>
837
                            <tr>
838
                                <td>Cell</td>
839
                                <td>Cell</td>
840
                                <td>Cell</td>
841
                            </tr>
842
                            <tr>
843
                                <td>Cell</td>
844
                                <td>Cell</td>
845
                                <td>Cell</td>
846
                            </tr>
847
                            <tr>
848
                                <td>Cell</td>
849
                                <td>Cell</td>
850
                                <td>Cell</td>
851
                            </tr>
852
                        </tbody>
853
                        <tfoot>
854
                            <tr>
855
                                <th>Footer 1</th>
856
                                <th>Footer 2</th>
857
                                <th>Footer 3</th>
858
                            </tr>
859
                        </tfoot>
860
                    </table>
861
                </div>
862
 
863
 
864
 
865
                <div class="mt-3 mb-5">
866
                    <h3>Table with border</h3>
867
                    <table class="table table-bordered">
868
                        <thead>
869
                            <tr>
870
                                <th>Header 1</th>
871
                                <th>Header 2</th>
872
                                <th>Header 3</th>
873
                            </tr>
874
                        </thead>
875
                        <tbody>
876
                            <tr>
877
                                <td>Cell</td>
878
                                <td>Cell</td>
879
                                <td>Cell</td>
880
                            </tr>
881
                            <tr>
882
                                <td>Cell</td>
883
                                <td>Cell</td>
884
                                <td>Cell</td>
885
                            </tr>
886
                            <tr>
887
                                <td>Cell</td>
888
                                <td>Cell</td>
889
                                <td>Cell</td>
890
                            </tr>
891
                        </tbody>
892
                        <tfoot>
893
                            <tr>
894
                                <th>Footer 1</th>
895
                                <th>Footer 2</th>
896
                                <th>Footer 3</th>
897
                            </tr>
898
                        </tfoot>
899
                    </table>
900
                </div>
901
 
902
                <div class="mt-3 mb-5">
903
                    <h3>Table with hover</h3>
904
                    <table class="table table-hover">
905
                        <thead>
906
                            <tr>
907
                                <th>Header 1</th>
908
                                <th>Header 2</th>
909
                                <th>Header 3</th>
910
                            </tr>
911
                        </thead>
912
                        <tbody>
913
                            <tr>
914
                                <td>Cell</td>
915
                                <td>Cell</td>
916
                                <td>Cell</td>
917
                            </tr>
918
                            <tr>
919
                                <td>Cell</td>
920
                                <td>Cell</td>
921
                                <td>Cell</td>
922
                            </tr>
923
                            <tr>
924
                                <td>Cell</td>
925
                                <td>Cell</td>
926
                                <td>Cell</td>
927
                            </tr>
928
                        </tbody>
929
                        <tfoot>
930
                            <tr>
931
                                <th>Footer 1</th>
932
                                <th>Footer 2</th>
933
                                <th>Footer 3</th>
934
                            </tr>
935
                        </tfoot>
936
                    </table>
937
                </div>
938
 
939
 
940
 
941
                <div class="mt-3 mb-5">
942
                    <h3>Table with Head with default color</h3>
943
                    <table class="table">
944
                        <thead class="thead-default">
945
                            <tr>
946
                                <th>Header 1</th>
947
                                <th>Header 2</th>
948
                                <th>Header 3</th>
949
                            </tr>
950
                        </thead>
951
                        <tbody>
952
                            <tr>
953
                                <td>Cell</td>
954
                                <td>Cell</td>
955
                                <td>Cell</td>
956
                            </tr>
957
                            <tr>
958
                                <td>Cell</td>
959
                                <td>Cell</td>
960
                                <td>Cell</td>
961
                            </tr>
962
                            <tr>
963
                                <td>Cell</td>
964
                                <td>Cell</td>
965
                                <td>Cell</td>
966
                            </tr>
967
                        </tbody>
968
                        <tfoot>
969
                            <tr>
970
                                <th>Footer 1</th>
971
                                <th>Footer 2</th>
972
                                <th>Footer 3</th>
973
                            </tr>
974
                        </tfoot>
975
                    </table>
976
                </div>
977
 
978
 
979
 
980
                <div class="mt-3 mb-5">
981
                    <h3>Table with inverse Head color</h3>
982
                    <table class="table">
983
                        <thead class="thead-inverse">
984
                            <tr>
985
                                <th>Header 1</th>
986
                                <th>Header 2</th>
987
                                <th>Header 3</th>
988
                            </tr>
989
                        </thead>
990
                        <tbody>
991
                            <tr>
992
                                <td>Cell</td>
993
                                <td>Cell</td>
994
                                <td>Cell</td>
995
                            </tr>
996
                            <tr>
997
                                <td>Cell</td>
998
                                <td>Cell</td>
999
                                <td>Cell</td>
1000
                            </tr>
1001
                            <tr>
1002
                                <td>Cell</td>
1003
                                <td>Cell</td>
1004
                                <td>Cell</td>
1005
                            </tr>
1006
                        </tbody>
1007
                        <tfoot>
1008
                            <tr>
1009
                                <th>Footer 1</th>
1010
                                <th>Footer 2</th>
1011
                                <th>Footer 3</th>
1012
                            </tr>
1013
                        </tfoot>
1014
                    </table>
1015
                </div>
1016
            </div>
1017
 
1018
            <!-- Pagination  -->
1019
            <div class="container-fluid" data-category="pagination">
1020
                <h1>Pagination</h1>
1021
 
1022
                <div class="mt-3 mb-5">
1023
                    <nav>
1024
                        <ul class="pagination">
1025
                            <li class="page-item">
1026
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
1027
              <span aria-hidden="true">&laquo;</span>
1028
            </a>
1029
                            </li>
1030
                            <li class="page-item">
1031
                                <a href="javascript:void(0);" class="page-link">1</a>
1032
                            </li>
1033
                            <li class="page-item">
1034
                                <a href="javascript:void(0);" class="page-link">2</a>
1035
                            </li>
1036
                            <li class="page-item">
1037
                                <a href="javascript:void(0);" class="page-link">3</a>
1038
                            </li>
1039
                            <li class="page-item">
1040
                                <a href="javascript:void(0);" class="page-link">4</a>
1041
                            </li>
1042
                            <li class="page-item">
1043
                                <a href="javascript:void(0);" class="page-link">5</a>
1044
                            </li>
1045
                            <li class="page-item">
1046
                                <a href="javascript:void(0);" class="page-link">6</a>
1047
                            </li>
1048
                            <li class="page-item">
1049
                                <a href="javascript:void(0);" class="page-link">7</a>
1050
                            </li>
1051
                            <li class="page-item">
1052
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
1053
              <span aria-hidden="true">&raquo;</span>
1054
            </a>
1055
                            </li>
1056
                        </ul>
1057
                    </nav>
1058
                </div>
1059
 
1060
                <div class="mt-3 mb-5">
1061
                    <nav>
1062
                        <ul class="pagination">
1063
                            <li class="page-item">
1064
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
1065
              <span aria-hidden="true">&laquo;</span>
1066
            </a>
1067
                            </li>
1068
                            <li class="page-item">
1069
                                <a href="javascript:void(0);" class="page-link">1</a>
1070
                            </li>
1071
                            <li class="page-item">
1072
                                <a href="javascript:void(0);" class="page-link">2</a>
1073
                            </li>
1074
                            <li class="page-item">
1075
                                <a href="javascript:void(0);" class="page-link">3</a>
1076
                            </li>
1077
                            <li class="page-item active">
1078
                                <a href="javascript:void(0);" class="page-link">4</a>
1079
                            </li>
1080
                            <li class="page-item">
1081
                                <a href="javascript:void(0);" class="page-link">5</a>
1082
                            </li>
1083
                            <li class="page-item">
1084
                                <a href="javascript:void(0);" class="page-link">6</a>
1085
                            </li>
1086
                            <li class="page-item">
1087
                                <a href="javascript:void(0);" class="page-link">7</a>
1088
                            </li>
1089
                            <li class="page-item">
1090
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
1091
              <span aria-hidden="true">&raquo;</span>
1092
            </a>
1093
                            </li>
1094
                        </ul>
1095
                    </nav>
1096
                </div>
1097
 
1098
                <div class="mt-3 mb-5">
1099
                    <nav>
1100
                        <ul class="pagination pagination-lg">
1101
                            <li class="page-item">
1102
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
1103
              <span aria-hidden="true">&laquo;</span>
1104
            </a>
1105
                            </li>
1106
                            <li class="page-item">
1107
                                <a href="javascript:void(0);" class="page-link">1</a>
1108
                            </li>
1109
                            <li class="page-item">
1110
                                <a href="javascript:void(0);" class="page-link">2</a>
1111
                            </li>
1112
                            <li class="page-item">
1113
                                <a href="javascript:void(0);" class="page-link">3</a>
1114
                            </li>
1115
                            <li class="page-item">
1116
                                <a href="javascript:void(0);" class="page-link">4</a>
1117
                            </li>
1118
                            <li class="page-item">
1119
                                <a href="javascript:void(0);" class="page-link">5</a>
1120
                            </li>
1121
                            <li class="page-item">
1122
                                <a href="javascript:void(0);" class="page-link">6</a>
1123
                            </li>
1124
                            <li class="page-item">
1125
                                <a href="javascript:void(0);" class="page-link">7</a>
1126
                            </li>
1127
                            <li class="page-item">
1128
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
1129
              <span aria-hidden="true">&raquo;</span>
1130
            </a>
1131
                            </li>
1132
                        </ul>
1133
                    </nav>
1134
                </div>
1135
 
1136
                <div class="mt-3 mb-5">
1137
                    <nav>
1138
                        <ul class="pagination">
1139
                            <li class="page-item">
1140
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
1141
              <span aria-hidden="true">&laquo;</span>
1142
            </a>
1143
                            </li>
1144
                            <li class="page-item">
1145
                                <a href="javascript:void(0);" class="page-link">1</a>
1146
                            </li>
1147
                            <li class="page-item">
1148
                                <a href="javascript:void(0);" class="page-link">2</a>
1149
                            </li>
1150
                            <li class="page-item">
1151
                                <a href="javascript:void(0);" class="page-link">3</a>
1152
                            </li>
1153
                            <li class="page-item">
1154
                                <a href="javascript:void(0);" class="page-link">4</a>
1155
                            </li>
1156
                            <li class="page-item">
1157
                                <a href="javascript:void(0);" class="page-link">5</a>
1158
                            </li>
1159
                            <li class="page-item">
1160
                                <a href="javascript:void(0);" class="page-link">6</a>
1161
                            </li>
1162
                            <li class="page-item">
1163
                                <a href="javascript:void(0);" class="page-link">7</a>
1164
                            </li>
1165
                            <li class="page-item">
1166
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
1167
              <span aria-hidden="true">&raquo;</span>
1168
            </a>
1169
                            </li>
1170
                        </ul>
1171
                    </nav>
1172
                </div>
1173
 
1174
                <div class="mt-3 mb-5">
1175
                    <nav>
1176
                        <ul class="pagination pagination-sm">
1177
                            <li class="page-item">
1178
                                <a href="javascript:void(0);" class="page-link" aria-label="Previous">
1179
              <span aria-hidden="true">&laquo;</span>
1180
            </a>
1181
                            </li>
1182
                            <li class="page-item">
1183
                                <a href="javascript:void(0);" class="page-link">1</a>
1184
                            </li>
1185
                            <li class="page-item">
1186
                                <a href="javascript:void(0);" class="page-link">2</a>
1187
                            </li>
1188
                            <li class="page-item">
1189
                                <a href="javascript:void(0);" class="page-link">3</a>
1190
                            </li>
1191
                            <li class="page-item">
1192
                                <a href="javascript:void(0);" class="page-link">4</a>
1193
                            </li>
1194
                            <li class="page-item">
1195
                                <a href="javascript:void(0);" class="page-link">5</a>
1196
                            </li>
1197
                            <li class="page-item">
1198
                                <a href="javascript:void(0);" class="page-link">6</a>
1199
                            </li>
1200
                            <li class="page-item">
1201
                                <a href="javascript:void(0);" class="page-link">7</a>
1202
                            </li>
1203
                            <li class="page-item">
1204
                                <a href="javascript:void(0);" class="page-link" aria-label="Next">
1205
              <span aria-hidden="true">&raquo;</span>
1206
            </a>
1207
                            </li>
1208
                        </ul>
1209
                    </nav>
1210
                </div>
1211
            </div>
1212
 
1213
            <!-- Jumbotron  -->
1214
            <div class="container-fluid" data-category="jumbotron">
1215
                <h1>Jumbotron</h1>
1216
 
1217
                <div class="container">
1218
                    <div class="jumbotron">
1219
                        <h1>Container size jumboton</h1>
1220
                        <p>Think BIG with a Bootstrap Jumbotron!</p>
1221
                    </div>
1222
                </div>
1223
 
1224
                <div>
1225
                    <div class="jumbotron jumbotron-fluid">
1226
                        <div class="container">
1227
                            <h1>Container fluid size jumbotron</h1>
1228
                            <p>Think BIG with a Bootstrap Jumbotron!</p>
1229
                        </div>
1230
                    </div>
1231
                </div>
1232
            </div>
1233
 
1234
            <!-- Cards  -->
1235
            <div class="container-fluid" data-category="cards">
1236
                <h1>Cards</h1>
1237
                <div class="row mb-3">
1238
                    <div class="col-3">
1239
                        <div class="card card-body">
1240
                            <h4 class="card-title">Boot Polish</h4>
1241
                            <p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes or boots to extend the footwear's life, and restore, maintain and improve their appearance.</p>
1242
                            <a href="javascript:void(0);" class="btn btn-primary">More</a>
1243
                        </div>
1244
                    </div>
1245
 
1246
                    <div class="col-3">
1247
                        <div class="card">
1248
                            <div class="card-body">
1249
                                <h4 class="card-title">Sun Gone</h4>
1250
                                <p class="card-text">Here are the top resources for all things related to the Sun.</p>
1251
                                <a href="javascript:void(0);" class="card-link">Sun Gone</a>
1252
                                <a href="javascript:void(0);" class="card-link">Still Gone</a>
1253
                            </div>
1254
                        </div>
1255
                    </div>
1256
 
1257
                    <div class="col-3">
1258
                        <div class="card text-center">
1259
                            <div class="card-body">
1260
                                <h4 class="card-title">Sun Gone</h4>
1261
                                <h6 class="card-subtitle text-muted">Sun disappears!</h6>
1262
                            </div>
1263
                            <img src="https://via.placeholder.com/300x150" alt="Photo of sunset">
1264
 
1265
                            <div class="card-body">
1266
                                <p class="card-text">The sun disappeared behind the horizon today. Experts claim it could be gone for good!</p>
1267
                                <a href="javascript:void(0);" class="btn btn-primary">Full Report</a>
1268
                            </div>
1269
 
1270
                        </div>
1271
                    </div>
1272
 
1273
                    <div class="col-3">
1274
                        <div class="card">
1275
                            <div class="card-header">
1276
                                Sponsored Content
1277
                            </div>
1278
                            <div class="card-body">
1279
                                <h4 class="card-title">Ugg Boots</h4>
1280
                                <p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer service.</p>
1281
                            </div>
1282
                            <div class="card-footer">
1283
                                By boots.com
1284
                            </div>
1285
                        </div>
1286
                    </div>
1287
 
1288
                </div>
1289
                <div class="row mb-3">
1290
                    <div class="col-12">
1291
                        <div class="card-group">
1292
                            <div class="card">
1293
                                <div class="card-header">Sun Gone</div>
1294
                                <div class="card-body">
1295
                                    <p class="card-text">The top resources for all things related to the Sun.</p>
1296
                                    <a href="javascript:void(0);" class="card-link">Sun Gone</a>
1297
                                    <a href="javascript:void(0);" class="card-link">Still Gone</a>
1298
                                </div>
1299
                            </div>
1300
 
1301
                            <div class="card">
1302
                                <div class="card-header">Sun Up</div>
1303
                                <div class="card-body">
1304
                                    <p class="card-text">Looks like the Sun has returned. Here's
1305
                                        <a href="javascript:void(0);" class="card-link">why</a>.</p>
1306
                                </div>
1307
                            </div>
1308
 
1309
                        </div>
1310
                    </div>
1311
 
1312
                </div>
1313
            </div>
1314
 
1315
            <!-- Tooltip  -->
1316
            <div class="container-fluid" data-category="tooltip">
1317
                <h1>Tooltip</h1>
1318
 
1319
                <div class="mt-3 mb-5">
1320
                    <h3>Inline tooltip</h3>
1321
                    <p style="margin:40px;">Check out my
1322
                        <a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you might need it!</p>
1323
                </div>
1324
 
1325
                <div class="mt-3 mb-5">
1326
                    <h3>All position tooltip</h3>
1327
                    <button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Top shoes" style="margin:20px;">
1328
        Shoes
1329
      </button>
1330
                    <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Right boot" style="margin:20px;">
1331
        Boots
1332
      </button>
1333
                    <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Bottom uggs" style="margin:20px;">
1334
        Ugg
1335
      </button>
1336
                    <button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left" title="Left sock" style="margin:20px;">
1337
        Socks
1338
      </button>
1339
                </div>
1340
 
1341
            </div>
1342
 
1343
            <!-- Popovers  -->
1344
            <div class="container-fluid" data-category="popovers">
1345
                <h1>Popovers</h1>
1346
                <div class="mt-3 mb-5">
1347
                    <h3>All popover position</h3>
1348
                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
1349
        Popover on top
1350
      </button>
1351
 
1352
                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
1353
        Popover on right
1354
      </button>
1355
 
1356
                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
1357
          sagittis lacus vel augue laoreet rutrum faucibus.">
1358
        Popover on bottom
1359
      </button>
1360
 
1361
                    <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
1362
        Popover on left
1363
      </button>
1364
                </div>
1365
            </div>
1366
 
1367
            <!-- Badges  -->
1368
            <div class="container-fluid" data-category="badges">
1369
                <h1>Badges</h1>
1370
 
1371
                <div class="mt-3 mb-5">
1372
                    <h3>Badge heading</h3>
1373
                    <h1>Example heading
1374
                        <span class="badge badge-secondary">New</span>
1375
                    </h1>
1376
                    <h2>Example heading
1377
                        <span class="badge badge-secondary">New</span>
1378
                    </h2>
1379
                    <h3>Example heading
1380
                        <span class="badge badge-secondary">New</span>
1381
                    </h3>
1382
                    <h4>Example heading
1383
                        <span class="badge badge-secondary">New</span>
1384
                    </h4>
1385
                    <h5>Example heading
1386
                        <span class="badge badge-secondary">New</span>
1387
                    </h5>
1388
                    <h6>Example heading
1389
                        <span class="badge badge-secondary">New</span>
1390
                    </h6>
1391
                </div>
1392
 
1393
                <div class="mt-3 mb-5">
1394
                    <h3>Button with inline badge</h3>
1395
                    <button type="button" class="btn btn-primary">
1396
        Notifications
1397
        <span class="badge badge-light">4</span>
1398
      </button>
1399
                    <button type="button" class="btn btn-primary">
1400
        Profile
1401
        <span class="badge badge-light">9</span>
1402
        <span class="sr-only">unread messages</span>
1403
      </button>
1404
                </div>
1405
 
1406
                <div class="mt-3 mb-5">
1407
                    <h3>Default badges</h3>
1408
                    <span class="badge badge-primary">Primary</span>
1409
                    <span class="badge badge-secondary">Secondary</span>
1410
                    <span class="badge badge-success">Success</span>
1411
                    <span class="badge badge-danger">Danger</span>
1412
                    <span class="badge badge-warning">Warning</span>
1413
                    <span class="badge badge-info">Info</span>
1414
                    <span class="badge badge-light">Light</span>
1415
                    <span class="badge badge-dark">Dark</span>
1416
                </div>
1417
 
1418
                <div class="mt-3 mb-5">
1419
                    <h3>Badges pill</h3>
1420
                    <span class="badge badge-pill badge-primary">Primary</span>
1421
                    <span class="badge badge-pill badge-secondary">Secondary</span>
1422
                    <span class="badge badge-pill badge-success">Success</span>
1423
                    <span class="badge badge-pill badge-danger">Danger</span>
1424
                    <span class="badge badge-pill badge-warning">Warning</span>
1425
                    <span class="badge badge-pill badge-info">Info</span>
1426
                    <span class="badge badge-pill badge-light">Light</span>
1427
                    <span class="badge badge-pill badge-dark">Dark</span>
1428
                </div>
1429
 
1430
                <div class="mt-3 mb-5">
1431
                    <h3>Badges with link</h3>
1432
                    <a href="javascript:void(0);" class="badge badge-primary">Primary</a>
1433
                    <a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>
1434
                    <a href="javascript:void(0);" class="badge badge-success">Success</a>
1435
                    <a href="javascript:void(0);" class="badge badge-danger">Danger</a>
1436
                    <a href="javascript:void(0);" class="badge badge-warning">Warning</a>
1437
                    <a href="javascript:void(0);" class="badge badge-info">Info</a>
1438
                    <a href="javascript:void(0);" class="badge badge-light">Light</a>
1439
                    <a href="javascript:void(0);" class="badge badge-dark">Dark</a>
1440
                </div>
1441
            </div>
1442
 
1443
            <!-- Modals  -->
1444
            <div class="container-fluid" data-category="modals">
1445
                <h1>Modals</h1>
1446
 
1447
                <div class="mt-3 mb-5 row">
1448
                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#flipFlop">
1449
        Default Modal
1450
      </button>
1451
 
1452
                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#largeShoes">
1453
        Large Modal
1454
      </button>
1455
 
1456
                    <button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal" data-target="#smallShoes">
1457
        Small Modal
1458
      </button>
1459
 
1460
                    <!-- The modal -->
1461
                    <div class="modal fade" id="smallShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelSmall" aria-hidden="true">
1462
                        <div class="modal-dialog modal-sm">
1463
                            <div class="modal-content">
1464
 
1465
                                <div class="modal-header">
1466
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1467
                <span aria-hidden="true">&times;</span>
1468
              </button>
1469
                                    <h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
1470
                                </div>
1471
 
1472
                                <div class="modal-body">
1473
                                    Small shoes are typically worn by people with small feet.
1474
                                </div>
1475
 
1476
                            </div>
1477
                        </div>
1478
                    </div>
1479
 
1480
                    <!-- The modal -->
1481
                    <div class="modal fade" id="largeShoes" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
1482
                        <div class="modal-dialog modal-lg">
1483
                            <div class="modal-content">
1484
 
1485
                                <div class="modal-header">
1486
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1487
                <span aria-hidden="true">&times;</span>
1488
              </button>
1489
                                    <h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
1490
                                </div>
1491
 
1492
                                <div class="modal-body">
1493
                                    Large shoes are usually avoided by people with small feet.
1494
                                </div>
1495
 
1496
                            </div>
1497
                        </div>
1498
                    </div>
1499
 
1500
                    <!-- The modal -->
1501
                    <div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
1502
                        <div class="modal-dialog" role="document">
1503
                            <div class="modal-content">
1504
                                <div class="modal-header">
1505
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
1506
                <span aria-hidden="true">&times;</span>
1507
              </button>
1508
                                    <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
1509
                                </div>
1510
                                <div class="modal-body">
1511
                                    A type of open-toed sandal.
1512
                                </div>
1513
                                <div class="modal-footer">
1514
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
1515
                                </div>
1516
                            </div>
1517
                        </div>
1518
                    </div>
1519
                </div>
1520
            </div>
1521
 
1522
            <!-- Alerts  -->
1523
            <div class="container-fluid" data-category="alerts">
1524
                <h1>Alerts</h1>
1525
 
1526
                <div class="mt-3 mb-5">
1527
                    <h3>Default alert</h3>
1528
                    <div class="alert alert-success" role="alert">Success alert</div>
1529
                    <div class="alert alert-info" role="alert">Info alert</div>
1530
                    <div class="alert alert-warning" role="alert">Warning alert</div>
1531
                    <div class="alert alert-danger" role="alert">Danger alert</div>
1532
                    <div class="alert alert-light" role="alert">Light alert</div>
1533
                    <div class="alert alert-dark" role="alert">Dark alert</div>
1534
                </div>
1535
 
1536
                <div class="mt-3 mb-5">
1537
                    <h3>Dismissible alert</h3>
1538
                    <div class="alert alert-success alert-dismissible" role="alert">
1539
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1540
          <span aria-hidden="true">&times;</span>
1541
        </button>
1542
                        <strong>Congratulations!</strong> You successfully tied your shoelace!
1543
                    </div>
1544
                </div>
1545
 
1546
                <div class="mt-3 mb-5">
1547
                    <h3>Dismissible alert with fade</h3>
1548
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
1549
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
1550
          <span aria-hidden="true">&times;</span>
1551
        </button>
1552
                        <strong>Congratulations!</strong> You successfully tied your shoelace!
1553
                    </div>
1554
                </div>
1555
            </div>
1556
 
1557
            <!-- Progress bars  -->
1558
            <div class="container-fluid" data-category="progress-bars">
1559
                <h1>Progress bars</h1>
1560
 
1561
                <div class="mt-3 mb-5">
1562
                    <h3>Default Progress bar</h3>
1563
                    <div class="progress">
1564
                        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1565
                    </div>
1566
                    <br>
1567
                    <div class="progress">
1568
                        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1569
                    </div>
1570
                    <br>
1571
                    <div class="progress">
1572
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1573
                    </div>
1574
                    <br>
1575
                    <div class="progress">
1576
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1577
                    </div>
1578
                    <br>
1579
                    <div class="progress">
1580
                        <div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
1581
                    </div>
1582
                    <br>
1583
                    <div class="progress">
1584
                        <div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
1585
                    </div>
1586
                </div>
1587
 
1588
                <div class="mt-3 mb-5">
1589
                    <h3>Striped Progress bar </h3>
1590
                    <div class="progress">
1591
                        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
1592
                    </div>
1593
                    <br>
1594
                    <div class="progress">
1595
                        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
1596
                    </div>
1597
                    <br>
1598
                    <div class="progress">
1599
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
1600
                    </div>
1601
                    <br>
1602
                    <div class="progress">
1603
                        <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
1604
                    </div>
1605
                    <br>
1606
                    <div class="progress">
1607
                        <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
1608
                    </div>
1609
                    <br>
1610
                    <div class="progress">
1611
                        <div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
1612
                    </div>
1613
                    <br>
1614
                    <div class="progress">
1615
                        <div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
1616
                    </div>
1617
                </div>
1618
 
1619
                <div class="mt-3 mb-5">
1620
                    <h3>Animated Progress bar</h3>
1621
                    <div class="progress">
1622
                        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
1623
                    </div>
1624
                </div>
1625
            </div>
1626
 
1627
            <!-- List group  -->
1628
            <div class="container-fluid" data-category="list-group">
1629
                <h1>List group</h1>
1630
 
1631
                <div class="mt-3 mb-5">
1632
                    <h3>Default list group</h3>
1633
                    <ul class="list-group">
1634
                        <li class="list-group-item">These Boots Are Made For Walking</li>
1635
                        <li class="list-group-item">Eleanor, Put Your Boots On</li>
1636
                        <li class="list-group-item">Puss 'n' Boots</li>
1637
                        <li class="list-group-item">Die With Your Boots On</li>
1638
                        <li class="list-group-item">Fairies Wear Boots</li>
1639
                    </ul>
1640
                </div>
1641
 
1642
                <div class="mt-3 mb-5">
1643
                    <h3>List group with pills</h3>
1644
                    <ul class="list-group">
1645
                        <li class="list-group-item justify-content-between">
1646
                            These Boots Are Made For Walking
1647
                            <span class="badge badge-secondary badge-pill">15</span>
1648
                        </li>
1649
                        <li class="list-group-item justify-content-between">
1650
                            Eleanor, Put Your Boots On
1651
                            <span class="badge badge-secondary badge-pill">38</span>
1652
                        </li>
1653
                        <li class="list-group-item justify-content-between">
1654
                            Puss 'n' Boots
1655
                            <span class="badge badge-secondary badge-pill">76</span>
1656
                        </li>
1657
                        <li class="list-group-item justify-content-between">
1658
                            Die With Your Boots On
1659
                            <span class="badge badge-secondary badge-pill">112</span>
1660
                        </li>
1661
                        <li class="list-group-item justify-content-between">
1662
                            Fairies Wear Boots
1663
                            <span class="badge badge-secondary badge-pill">181</span>
1664
                        </li>
1665
                    </ul>
1666
                </div>
1667
 
1668
                <div class="mt-3 mb-5">
1669
                    <h3>Link List group</h3>
1670
                    <div class="list-group">
1671
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>
1672
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</a>
1673
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
1674
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots On</a>
1675
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
1676
                    </div>
1677
                </div>
1678
 
1679
                <div class="mt-3 mb-5">
1680
                    <h3>Button List group</h3>
1681
                    <div class="list-group">
1682
                        <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button>
1683
                        <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</button>
1684
                        <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
1685
                        <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button>
1686
                        <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
1687
                    </div>
1688
                </div>
1689
 
1690
                <div class="mt-3 mb-5">
1691
                    <h3>List group with colors</h3>
1692
                    <div class="list-group">
1693
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made For Walking</a>
1694
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put Your Boots On</a>
1695
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
1696
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots On</a>
1697
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
1698
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
1699
                        <a href="javascript:void(0);" class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
1700
                    </div>
1701
                </div>
1702
            </div>
1703
 
1704
            <!-- Image thumbnails  -->
1705
            <div class="container-fluid" data-category="image-thumbnails">
1706
                <h1>Image thumbnails </h1>
1707
 
1708
                <div>
1709
                    <img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">
1710
                    <img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">
1711
                    <img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">
1712
                    <img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">
1713
                </div>
1714
            </div>
1715
 
1716
            <!-- Figures  -->
1717
            <div class="container-fluid" data-category="figures">
1718
                <h1>Figures</h1>
1719
 
1720
                <div>
1721
                    <figure class="figure">
1722
                        <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
1723
                        <figcaption class="figure-caption">A caption for the above image.</figcaption>
1724
                    </figure>
1725
                </div>
1726
 
1727
                <div>
1728
                    <figure class="figure">
1729
                        <img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
1730
                        <figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
1731
                    </figure>
1732
                </div>
1733
            </div>
1734
 
1735
            <!-- Breadcrumbs  -->
1736
            <div class="container-fluid" data-category="breadcrumbs">
1737
                <h1>Breadcrumbs</h1>
1738
 
1739
                <div>
1740
                    <ul class="breadcrumb">
1741
                        <li class="breadcrumb-item">
1742
                            <a href="javascript:void(0);">Home</a>
1743
                        </li>
1744
                        <li class="breadcrumb-item">
1745
                            <a href="javascript:void(0);">Fruit</a>
1746
                        </li>
1747
                        <li class="breadcrumb-item active">Pears</li>
1748
                    </ul>
1749
                </div>
1750
            </div>
1751
 
1752
            <!-- Carousel  -->
1753
            <div class="container-fluid" data-category="carousel">
1754
                <h1>Carousel</h1>
1755
 
1756
                <div>
1757
                    <div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
1758
                        <ol class="carousel-indicators">
1759
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
1760
                            <li data-target="#myCarousel" data-slide-to="1"></li>
1761
                            <li data-target="#myCarousel" data-slide-to="2"></li>
1762
                        </ol>
1763
                        <div class="carousel-inner" role="listbox">
1764
                            <div class="carousel-item active">
1765
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">
1766
                                <div class="carousel-caption">
1767
                                    <h3>First slide</h3>
1768
                                    <p>This is the first slide.</p>
1769
                                </div>
1770
                            </div>
1771
                            <div class="carousel-item">
1772
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Second slide">
1773
                                <div class="carousel-caption">
1774
                                    <h3>Second slide</h3>
1775
                                    <p>This is the second slide.</p>
1776
                                </div>
1777
                            </div>
1778
                            <div class="carousel-item">
1779
                                <img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">
1780
                                <div class="carousel-caption">
1781
                                    <h3>Third slide</h3>
1782
                                    <p>This is the third slide.</p>
1783
                                </div>
1784
                            </div>
1785
                        </div>
1786
                        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
1787
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
1788
          <span class="sr-only">Previous</span>
1789
        </a>
1790
                        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
1791
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
1792
          <span class="sr-only">Next</span>
1793
        </a>
1794
                    </div>
1795
                </div>
1796
            </div>
1797
 
1798
            <!-- Close  -->
1799
            <div class="container-fluid" data-category="close">
1800
                <h1>Close</h1>
1801
                <button type="button" class="close" aria-label="Close">
1802
      <span aria-hidden="true">&times;</span>
1803
    </button>
1804
            </div>
1805
 
1806
            <!-- Code -->
1807
            <div class="container-fluid" data-category="code">
1808
                <h1>Code</h1>
1809
                <div class="mt-3 mb-5">
1810
                    <h3>Default code</h3>
1811
                    For example,
1812
                    <code>&lt;section&gt;</code> should be wrapped as inline.
1813
                </div>
1814
 
1815
                <div class="mt-3 mb-5">
1816
                    <h3>Code with pre tag</h3>
1817
                    <pre>
1818
        <code>
1819
          &lt;p&gt;Sample text here...&lt;/p&gt;
1820
          &lt;p&gt;And another line of sample text here...&lt;/p&gt;
1821
        </code>
1822
      </pre>
1823
                </div>
1824
 
1825
 
1826
 
1827
                <div class="mt-3 mb-5">
1828
                    <h3>Var tag</h3>
1829
                    <var>y</var> =
1830
                    <var>m</var>
1831
                    <var>x</var> +
1832
                    <var>b</var>
1833
                </div>
1834
 
1835
                <div class="mt-3 mb-5">
1836
                    <h3>Kbd tag</h3>
1837
                    To switch directories, type
1838
                    <kbd>cd</kbd> followed by the name of the directory.
1839
                    <br> To edit settings, press
1840
                    <kbd>
1841
        <kbd>ctrl</kbd> +
1842
                    <kbd>,</kbd>
1843
                    </kbd>
1844
                </div>
1845
 
1846
                <div class="mt-3 mb-5">
1847
                    <h3>Samp tag</h3>
1848
                    <samp>This text is meant to be treated as sample output from a computer program.</samp>
1849
                </div>
1850
 
1851
                <div class="mt-3 mb-5 youtube">
1852
                    <h3>Youtube list</h3>
1853
                    <ul>
1854
                        <li>Video 1</li>
1855
                        <li>Video 2</li>
1856
                        <li>Video 3</li>
1857
                        <li>Video 4</li>
1858
                    </ul>
1859
                </div>
1860
 
1861
            </div>
1862
        </div>
1863
    </div>
1864
        <script>
1865
$(document).ready(function() {
1866
    $('[data-toggle="tooltip"]').tooltip({trigger : 'hover'});
1867
    $('[rel="tooltip"]').on('click', function() {$(this).tooltip('hide');});
1868
    $('[data-toggle="popover"]').popover();
1869
});
1870
        </script>
1871
 
1872
</body>
1873
</html>