This repository has been archived by the owner on May 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 18
/
test-5.html
2177 lines (1932 loc) · 86.7 KB
/
test-5.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./dist/bootstrap-night.css">
<style>
body{
padding-top:10rem;
}
</style>
</head>
<body>
<div id="home" class="pb-3">
<p class="display-2 text-center mt-0">Bootstrap 4 Kitchen Sink</p>
</div>
<!--FIXED TOP NAVIGATION MENU-->
<nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="">MENU</span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="typog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Typography</a>
<div class="dropdown-menu" aria-labelledby="typog">
<a class="dropdown-item" href="#headings">Headings</a>
<a class="dropdown-item" href="#display-styles">Display Styles</a>
<a class="dropdown-item" href="#heading-classes">Heading Classes</a>
<a class="dropdown-item" href="#inline-text-elements">Inline Text Elements</a>
<a class="dropdown-item" href="#text-alignment">Text Alignment</a>
<a class="dropdown-item" href="#text-transform">Text Transform</a>
<a class="dropdown-item" href="#attribute">Text Abbreviations</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="grid" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Grid System</a>
<div class="dropdown-menu" aria-labelledby="grid">
<a class="dropdown-item" href="#containers">Containers</a>
<a class="dropdown-item" href="#media-queries">Media Queries</a>
<a class="dropdown-item" href="#auto-layout-columns">Auto Layout</a>
<a class="dropdown-item" href="#variable-width-content">Variable Width</a>
<a class="dropdown-item" href="#equal-width">Equal Width</a>
<a class="dropdown-item" href="#all-breakpoints">All Breakpoints</a>
<a class="dropdown-item" href="#stacked-horz">Stacked to Horizontal</a>
<a class="dropdown-item" href="#vertical-alignment">Vertical Alignment</a>
<a class="dropdown-item" href="#horiz-align">Horizontal Alignment</a>
<a class="dropdown-item" href="#no-gutters">No Gutters</a>
<a class="dropdown-item" href="#column-wrap">Column Wrapping</a>
<a class="dropdown-item" href="#clearfix">Clearfix Column Reset</a>
<a class="dropdown-item" href="#offsets">Column Offsets</a>
<a class="dropdown-item" href="#reordering">Column Reordering</a>
<a class="dropdown-item" href="#nesting">Column Nesting</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="images" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Images</a>
<div class="dropdown-menu" aria-labelledby="images">
<a class="dropdown-item" href="#resp-img">Responsive Images</a>
<a class="dropdown-item" href="#thumbs">Image Thumbnails</a>
<a class="dropdown-item" href="#align-img">Aligning Images</a>
<a class="dropdown-item" href="#center-img">Centering Images</a>
<a class="dropdown-item" href="#img-shapes">Image Shapes</a>
<a class="dropdown-item" href="#figures-captions">Figures & Captions</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="card" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cards</a>
<div class="dropdown-menu" aria-labelledby="card">
<a class="dropdown-item" href="#cards">Cards</a>
<a class="dropdown-item" href="#resp-cards">Cards with Responsive Widths</a>
<a class="dropdown-item" href="#cards-imgs">Cards with Images</a>
<a class="dropdown-item" href="#card-groups">Card Groups</a>
<a class="dropdown-item" href="#card-decks">Card Decks</a>
<a class="dropdown-item" href="#card-nav">Cards with Navigation</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="misc" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Misc</a>
<div class="dropdown-menu" aria-labelledby="misc">
<a class="dropdown-item" href="#tables">Tables</a>
<a class="dropdown-item" href="#breadcrumbs">Breadcrumbs</a>
<a class="dropdown-item" href="#accordions">Accordions</a>
<a class="dropdown-item" href="#spacing">Spacing Utilities</a>
<a class="dropdown-item" href="#modals">Modals</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- #################### TYPOGRAPHY ############################ -->
<div class="container mt-5" id="typography">
<section class="row">
<article id="headings">
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<h3>This is heading h3</h3>
<h4>This is heading h4</h4>
<h5>This is heading h5</h5>
<h6>This is heading h6</h6>
<hr>
<h1 id="display-styles" class="text-center">Display Styles</h1>
<p class="display-1">This is display-1</p>
<p class="display-2">This is display-2</p>
<p class="display-3">This is display-3</p>
<p class="display-4">This is display-4</p>
</article>
</section>
<hr>
<article>
<h1 id="heading-classes" class="text-center">Heading Classes</h1>
<p>.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<p class="h1">h1. Bootstrap heading class .h1</p>
<p class="h2">h2. Bootstrap heading class .h2</p>
<p class="h3">h3. Bootstrap heading class .h3</p>
<p class="h4">h4. Bootstrap heading class .h4</p>
<p class="h5">h5. Bootstrap heading class .h5</p>
<p class="h6">h6. Bootstrap heading class .h6</p>
</article>
<article>
<h1 class="text-center">Customized Headings</h1>
<h3>h3 Heading
<small class="text-muted">With faded secondary text that uses text-muted</small>
</h3>
</article>
<hr>
<article>
<h1 id="inline-text-elements" class="text-center">Inline Text Elements</h1>
<p>You can use the <strong>mark</strong> tag to
<mark>highlight</mark>text.</p>
<p><del>Use the <strong>del</strong> tag to show a text as deleted.</del>
</p>
<p><u>This line of text will render as underlined. It uses the u tag.</u>
</p>
<p><small>Use the <strong>small</strong> tag for fine or small print.</small>
</p>
<p><strong>Use the strong tag for bold text.</strong>
</p>
<p><em>Use the <strong>em</strong> tag for italicized text.</em>
</p>
</article>
<hr>
<article class="col" id="text-alignment">
<h1 class="text-centered">Text alignment</h1>
<p class="text-justify">This paragraph uses the <strong>text-justify</strong> class. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi.Cras
mattis iudicium purus sit amet fermentum.</p>
<p class="text-left">Use <strong>text-left</strong> for Left aligned text on all viewport sizes.</p>
<p class="text-center">Use <strong>text-center</strong> for Center aligned text on all viewport sizes.
</p>
<p class="text-right">Use <strong>text-right</strong> for Right aligned text on all viewport sizes.</p>
<p class="text-sm-right">Use <strong>text-sm-right</strong> for right aligned text on viewports sized SM. (small) or wider.</p>
<p class="text-md-right">Use <strong>text-md-right</strong> for right aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-right">Use <strong>text-lg-right</strong> for right aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Use <strong>text-xl-left</strong> for Left aligned text on viewports sized XL (extra-large) or wider.</p>
</article>
<article>
<h1 class="text-center" id="text-transform">Text transform</h1>
<p>Transform text in components with text capitalization classes.</p>
<p class="text-lowercase">Use <strong>text-lowercase</strong> for Lowercased text.</p>
<p class="text-uppercase">Use <strong>text-uppercase</strong> for Uppercased text.</p>
<p class="text-capitalize">Use <strong>text-capitalize</strong> to capitalize the first letter in each word.
</p>
</article>
</div>
<!--.container-->
<hr>
<!-- ################### GRID SYSTEM ######################## -->
<div class="myWrapper" id="containers">
<h1 class="text-center">Containers</h1>
<p>This paragraph is <strong>not inside a container</strong>. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque molestiae incidunt obcaecati placeat, beatae iure dolores vero earum accusamus ipsum soluta magni ut quasi cumque debitis, ducimus
voluptatem architecto est!</p>
<div class="container bg-danger text-white">
<p>This paragraph is <strong>inside a container</strong>. It resizes based on the responsive breakpoints. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio omnis minima vitae. Accusamus reprehenderit aspernatur nihil tempora atque
voluptas magni, consequatur nostrum odit iste eaque mollitia esse cumque tenetur ad.</p>
</div>
<div class="container-fluid bg-info">
<p>This paragraph is <strong>inside a container-fluid.</strong> Use .container-fluid for a full width container, spanning the entire width of the viewport. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi odit cum assumenda possimus,
non, doloribus. Nam odio ut totam repellat, facilis sequi repudiandae ea provident debitis explicabo quibusdam veniam molestias!</p>
</div>
</div>
<!--.myWrapper-->
<hr>
<!--MEDIA QUERIES-->
<div class="container" id="media-queries">
<article>
<h2>Min Width Media Queries</h2>
<p><strong>-xs</strong> Extra small devices (portrait phones, less than 576px) <strong>No media query since this is the default in Bootstrap</strong>
</p>
<p><strong>-sm</strong> Small devices (landscape phones, 576px and up) <strong>@media (min-width: 576px) { ... }</strong>
</p>
<p><strong>-md</strong> Medium devices (tablets, 768px and up) <strong>@media (min-width: 768px) { ... } </strong>
</p>
<p><strong>-lg</strong> Large devices (desktops, 992px and up) <strong>@media (min-width: 992px) { ... }</strong>
</p>
<p><strong>-xl</strong> Extra large devices (large desktops, 1200px and up) <strong>@media (min-width: 1200px)</strong> { ... }</p>
</article>
<article>
<h2>Max Width Media Queries</h2>
<p><strong>-xs</strong> Extra small devices (portrait phones, less than 576px) <strong>@media (max-width: 575px) { ... }</strong>
</p>
<p><strong>-sm </strong> Small devices (landscape phones, less than 768px)
<strong>@media (max-width: 767px) { ... }</strong>
</p>
<p><strong>-md</strong> Medium devices (tablets, less than 992px)
<strong>@media (max-width: 991px) { ... }</strong>
</p>
<p><strong>-lg </strong>Large devices (desktops, less than 1200px)
<strong>@media (max-width: 1199px)</strong> { ... }</p>
<p><strong>-xl </strong>Extra large devices (large desktops)
<strong>No media query since the extra-large breakpoint has no upper bound on its width</strong>
</p>
</article>
</div>
<!--.container-->
<hr>
<!--GRID SYSTEM-->
<div class="container" id="auto-layout-columns">
<h1 class="text-center">Grid System</h1>
<h2>Auto-layout columns</h2>
<section class="row">
<div class="col bg-danger">
<p>Column 1 of 2: The column class <strong>col</strong> applies to every device and viewport, from xs to xl and every column will be the same width.</p>
</div>
<div class="col bg-info">
<p>Column 2 of 2: The column class <strong>col</strong> applies to every device and viewport, from xs to xl and every column will be the same width.</p>
</div>
</section>
<section class="row">
<div class="col bg-primary">
<p>Column 1 of 3: The column class <strong>col</strong> applies to every device and viewport, from xs to xl and every column will be the same width.</p>
</div>
<div class="col bg-secondary">
<p>Column 2 of 3: The column class <strong>col</strong> applies to every device and viewport, from xs to xl and every column will be the same width.</p>
</div>
<div class="col bg-success">
<p>Column 3 of 3: The column class <strong>col</strong> applies to every device and viewport, from xs to xl and every column will be the same width.</p>
</div>
</section>
</div>
<!--.container-->
<hr>
<div id="variable-width-content" class="container">
<h2>Variable width content</h2>
<section class="row">
<article class="col bg-info">
<p>Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just <strong>col.</strong>
</p>
</article>
<article class="col-6 bg-light">
<p>Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that
the other columns will resize no matter the width of the center column. This column class is <strong>col-6</strong>
</p>
</article>
<article class="col bg-secondary">
<p>Column 3 of 3: This column class is just <strong>col</strong>. Note that the other columns will resize no matter the width of the center column.</p>
</article>
</section>
</div>
<!--.container-->
<hr>
<div class="container">
<h2>Setting one column width</h2>
<section class="row">
<article class="col" style="border: 1px solid">
<p>Column 1 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. This column class is just <strong>col.</strong>
</p>
</article>
<article class="col-6">
<p>Column 2 of 3: Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that
the other columns will resize no matter the width of the center column. This column class is <strong>col-6</strong>
</p>
</article>
<article class="col" style="border: 1px solid">
<p>Column 3 of 3: This column class is just <strong>col</strong>. Note that the other columns will resize no matter the width of the center column.</p>
</article>
</section>
</div>
<!--.container-->
<hr>
<!--VARIABLE WIDTH CONTENT-->
<div class="container" id="variable-width">
<h2>Variable width columns</h2>
<div class="row justify-content-md-center">
<div class="col col-xl-2 bg-danger">
<p>Column 1 of 3</p>
<p>This column is using "col col-xl-2" Using the col-{breakpoint}-auto classes, columns can size itself based on the natural width of its content.</p>
</div>
<div class="col-12 col-md-auto bg-warning">
<p>Column 2 of 3 is Using "col-12 col-md-auto"</p>
</div>
<div class="col col-xl-2 bg-info">
<p>Column3 of 3 is using "col col-xl-2"</p>
<p>This is super handy with single line content like inputs, numbers, etc. This, in conjunction with horizontal alignment classes, is very useful for centering layouts with uneven column sizes as viewport width changes.</p>
</div>
</div>
<div class="row">
<div class="col">
<p>Column 1 of 3</p>
<p>This column is using "col" only. Fugiat qui nostrum beatae, quod officiis animi nulla incidunt magni, delectus repellendus tempora saepe consectetur illum ullam facilis voluptates impedit quisquam nesciunt!</p>
</div>
<div class="col-12 col-md-auto">
<p>Column 2 of 3. This column is using "col-12 col-md-auto"</p>
</div>
<div class="col col-xl-2">
<p>Column 3 of 3. This column is using "col col-xl-2"</p>
</div>
</div>
<hr>
<h2 id="equal-width">Equal-width multi-row</h2>
<div class="row">
<div class="col">
<p>This column uses just "col"</p>
<p>Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.</p>
</div>
<div class="col">
<p>This column uses just "col"</p>
<p>Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.</p>
</div>
<div class="w-100">
<p>This column uses "w-100"</p>
<p>Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.</p>
</div>
<div class="col">
<p>This column uses just "col"</p>
<p>Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.</p>
</div>
<div class="col">
<p>This column uses just "col"</p>
<p>Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line. Make the breaks responsive by mixing the .w-100 with some responsive display utilities.</p>
</div>
</div>
</div>
<!--.container-->
<hr>
<div id="all-breakpoints" class="container">
<h2>All Breakpoints</h2>
<div class="row">
<div class="col">Column 1 of 4. For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes.</div>
<div class="col">Column 2 of 4.</div>
<div class="col">Column 3 of 4</div>
<div class="col">Column 4 of 4: Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.</div>
</div>
<div class="row">
<div class="col-8">Column 1 of 2. This column uses "col-8"</div>
<div class="col-4">Column 2 of 2. This column uses "col-4"</div>
</div>
</div>
<!--.container-->
<hr>
<div id="stacked-horz" class="container">
<h2>Stacked to horizontal</h2>
<section class="row">
<div class="col-md-8">This column uses "col-md-8". Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.</div>
<div class="col-md-4">This column uses "col-md-4". These columns will always stack when viewed on small devices.</div>
</section>
<section class="row">
<div class="col-sm">This column uses "col-sm". These columns will always stack when viewed on small devices.</div>
<div class="col-sm">This column uses "col-sm". These columns will always stack when viewed on small devices.</div>
<div class="col-sm">This column uses "col-sm". These columns will always stack when viewed on small devices.</div>
</section>
</div>
<!--.container-->
<hr>
<div id="mix-match" class="container">
<h2>Mix and Match Columns</h2>
<div class="row">
<div class="col col-lg-8">This column uses "col col-lg-8". Use a combination of different classes for each tier as needed.</div>
<div class="col-6 col-lg-4">This column uses "col-6 col-lg-4". Stack the columns on mobile by making one full-width and the other half-width</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on
desktop -->
<div class="row">
<div class="col-6 col-lg-4">This column uses "col-6 col-lg-4". Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop</div>
<div class="col-6 col-lg-4">This column uses "col-6 col-lg-4"</div>
<div class="col-6 col-lg-4">This column uses "col-6 col-lg-4"</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">This column uses "col-6. Columns are always 50% wide, on mobile and desktop.
</div>
<div class="col-6">This column uses "col-6. Columns are always 50% wide, on mobile and desktop.
</div>
</div>
</div>
<!--.container-->
<hr>
<div id="#vertical-alignment" class="container">
<h2>Column Alignment</h2>
<h4>Vertical alignment</h4>
<div class="row align-items-start">
<div class="col">One of three columns.</div>
<div class="col">Two of three columns. This row uses"row align-items-start" Use flexbox alignment utilities to vertically and horizontally align columns.</div>
<div class="col">Three of three columns. Notice how the text is aligned to the top of the columns.
</div>
</div>
<div class="row align-items-center">
<div class="col">One of three columns. This row uses "row align-items-center"</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns. Notice how the text is aligned to the center of the columns</div>
</div>
<div class="row align-items-end">
<div class="col">One of three columns. This row uses "row align-items-end"</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns. Notice how the text is aligned to the bottom of the columns.</div>
</div>
</div>
<hr>
<div class="container" id="align-self">
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>
<!--.container-->
<hr>
<div id="horiz-align" class="container">
<h3>Horizontal Alignment</h3>
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>
<!--.container-->
<hr>
<div id="no-gutters" class="container">
<h3>No Gutters</h3>
<div class="row no-gutters">
<div class="col-12 col-md-8 bg-info text-white">The gutters between columns in our predefined grid classes can be removed with .no-gutters. This removes the negative margins from .row and the horizontal padding from all immediate children columns. This column uses "col-12 col-md-8".</div>
<div class="col-12 col-md-4 bg-secondary text-white">Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more.This column uses "col-12 col-md-4"</div>
</div>
</div>
<!--.container-->
<hr>
<div id="column-wrap" class="container">
<h3>Column Wrapping</h3>
<div class="row">
<div class="col-9">If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. This column uses "col-9"
</div>
<div class="col-4">Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. This column uses "col-4"</div>
<div class="col-6">Subsequent columns continue along the new line. This column uses "col-6"</div>
</div>
</div>
<!--.container-->
<hr>
<div class="container" id="clearfix ">
<h3>Column Resets
<small>How to use clearfix to fix uneven columns</small></h3>
<div class="row">
<div class="col-6 col-md-3 bg-success">
<p>With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
</p>
</div>
<div class="col-6 col-md-3 bg-danger">
<p>With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
</p>
</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix d-sm-none"></div>
<div class="col-6 col-md-3 bg-info">
<p>Added the extra clearfix for only the required viewport. To do this, we created an empty div with the class of "clearfix d-sm-none-up".</p>
<p>This column uses "col-6 col-md-3"</p>
</div>
<div class="col-6 col-md-3 bg-warning">
<p>With the handful of grid tiers available, you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive
utility classes. This column uses "col-6 col-md-3"
</p>
</div>
</div>
</div>
<!--.container-->
<hr>
<div class="container" id="offsets">
<h2>Column Offsets</h2>
<div class="row">
<div class="col-md-5 col-lg-6 bg-info">In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. This column uses "col-md-5 col-lg-6"</div>
<div class="col-md-5 offset-sm-2 col-lg-6 offset-md-0 bg-warning">Resize your screen to see this in action. This column uses "col-md-5 offset-sm-2 col-lg-6 offset-md-0"</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-5 col-xl-6 bg-success">This column uses "col col-md-6 col-lg-5 col-xl-6"</div>
<div class="col-md-6 col-lg-5 offset-md-2 col-xl-6 offset-lg-0 bg-primary">This column uses "col-md-6 col-lg-5 offset-md-2 col-xl-6 offset-lg-0"</div>
</div>
<div class="row">
<div class="col-lg-4 bg-secondary">This column uses "col-lg-4"</div>
<div class="col-lg-4 offset-md-4 bg-light">Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-lg-4 over four columns. This column uses "col-lg-4 offset-md-4"</div>
</div>
<div class="row">
<div class="col-lg-3 offset-md-3 bg-primary">This column uses "col-lg-3 offset-md-3"</div>
<div class="col-lg-3 offset-md-3 bg-secondary">This column uses "col-lg-3 offset-md-3" Resize your screen to see it in action.</div>
</div>
<div class="row">
<div class="col-lg-6 offset-md-3 bg-warning">This column uses "col-lg-6 offset-md-3"</div>
</div>
</div>
<!--.container-->
<hr>
<div class="container" id="reordering">
<h2>Reordering</h2>
<div class="row">
<div class="col flex-unordered">First, but unordered. Use flexbox utilities for controlling the visual order of your content. This column uses "col flex-unordered". The background-color is lightskyblue.</div>
<div class="col flex-last">Second, but last. This column uses "col flex-last". The background-color is darkcyan.</div>
<div class="col flex-first">Third, but first. This column uses "col flex-first". The background-color is lightsteelblue.</div>
</div>
</div>
<hr>
<div class="container" id="nesting">
<h2>Nesting</h2>
<div class="row">
<div class="col-md-9 bg-warning">Level 1: This column uses "col-md-9". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column.
<div class="row">
<div class="col-8 col-md-6 bg-info">Level 2: This is part of a nested row. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns) This column uses "col-8 col-md-6"</div>
<div class="col-4 col-md-6 bg-success">Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6"</div>
</div>This is part of level 1.</div>
</div>
</div>
<!--.container-->
<div class="container" id="more-nesting">
<h2>More Nesting</h2>
<div class="row">
<div class="col-md-12 bg-danger">
<p>Level 1: This column uses "col-md-12". To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. The background color is "bg-danger" </p>
<div class="row">
<div class="col-8 col-md-3 bg-info">Level 2: This is part of a nested row. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns) This column uses "col-8 col-md-3" and the background color is "bg-info"</div>
<div class="col-4 col-md-6 bg-success">Level 2: This is also part of a nested row. Notice that it is inheriting the background color from level 1. This is the default behavior unless you specify a background-color. This column uses "col-4 col-md-6" and the "border:thin
solid grey;" is specified as an inline style.</div>
<div class="col-4 col-md-3 bg-light">Level 2: This is also part of a nested row. It is not required that you use all 12 columns for nested items. This column uses "col-4 col-md-6" the background-color is using "bg-light".</div>
</div>
<p>This is still part of level 1.</p>
</div>
</div>
</div>
<!--.container-->
<hr>
<!--.container-->
<hr>
<!-- ########################## IMAGES ############################ -->
<div class="container" id="resp-img">
<h1 class="text-center">Images</h1>
<h2>Responsive Images (img-fluid)</h2>
<p> <strong>Responsive images</strong> in Bootstrap are made responsive with <strong>img-fluid</strong>. The attributes max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.</p>
<section class="row">
<article class="col-md-3 bg-light mx-auto d-flex justify-content-center flex-wrap">
<img src="https://source.unsplash.com/200x200/?sig=3" class="img-fluid" alt="" title="">
<p>This 200x200px image has "<strong>img-fluid</strong>" class applied. This image will scale with the parent element, col-md-3.</p>
</article>
<article class="col-md-4 mx-auto d-flex justify-content-center flex-wrap">
<img src="https://source.unsplash.com/400x300/?sig=4" class="img-fluid" alt="" title="">
<p>This 400x300px image has "<strong>img-fluid</strong>" class applied. This image will scale with the parent element, col-md-4.</p>
</article>
<article class="col-md-4">
<img src="https://source.unsplash.com/800x400/?sig=5" class="img-fluid" alt="" title="">
<p>This 800x400px image has "<strong>img-fluid</strong>" class applied. This image will scale with the parent element, col-md-2.</p>
</article>
</section>
</div>
<!--.container-->
<hr>
<div class="container" id="thumbs">
<h2>Image Thumbnails</h2>
<section class="row">
<article class="col-md-2">
<img src="https://source.unsplash.com/200x200/?sig=5" class="img-thumbnail" alt="" title="">
<p>200x200px image has "<strong>img-fluid</strong>" class and the parent element is col-md-2.</p>
</article>
<article class="col-md-4 mx-auto d-flex justify-content-center flex-wrap">
<img src="https://source.unsplash.com/200x200/?sig=6" class="img-thumbnail" alt="" title="">
<p>200x200px image has "<strong>img-fluid</strong>" class and the parent element is col-md-4. In addition to the border-radius utilities, you can use <strong>img-thumbnail</strong> to give an image a rounded 1px border appearance.</p>
</article>
<article class="col-md-4 ">
<img src="https://source.unsplash.com/400x400/?sig=7" class="img-thumbnail" alt="" title="">
<p>This 400x400px image has "<strong>img-fluid</strong>" class and the parent element is col-md-4.</p>
</article>
</section>
</div>
<!--.container-->
<hr>
<div class="container" id="align-img">
<h2>Aligning Images</h2>
<h4>Floats</h4>
<p>Align images with the helper float classes or text alignment classes. block-level images can be centered using the .mx-auto margin utility class.</p>
<section class="row">
<article class="col-md-6">
<img src="https://source.unsplash.com/260x260/?sig=5" class="img-fluid rounded float-left mr-2" alt="...">
<p>This image has "<strong>img-fluid rounded float-left</strong>" and it also has the class "mr-2" to add some space to the right of the image.</p>
</article>
<article class="col-md-6 ">
<img src="https://source.unsplash.com/260x260/?sig=6" class="rounded float-right" alt="...">
<p>This image has "<strong>rounded float-right</strong>". Resize your screen and notice how the image is not responsive and jumps out of the containing element. To make it responsive, you will also need to add the class "img-fluid".</p>
</article>
</section>
<hr>
<h4 id="center-img">Centering Images</h4>
<section class="row">
<article class="col-md-6">
<img src="https://source.unsplash.com/300x300/?sig=5" class="img-fluid rounded mx-auto d-block mt-1" alt="...">
<p>This 300x300px image is centered inside the parent element col-md-6. The classes "<strong>img-fluid rounded mx-auto d-block</strong>"</p>
</article>
<article class="col-md-6">
<div class="text-center">
<img src="https://source.unsplash.com/300x300/?sig=2" class="img-fluid rounded mt-1" alt="...">
<p>This 300x300px image is centered inside the parent element col-md-6 using "
<strong>text-center</strong>" on the containing div. The classes "
<strong>img-fluid rounded</strong>" has been applied.</p>
</div>
</article>
</section>
<h4 id="img-shapes">Image Shapes</h4>
<section class="row">
<article class="col-md-6 text-center">
<img src="https://source.unsplash.com/300x300/?sig=2" class="img-fluid rounded-circle mt-1" alt="...">
<p>This 300x300px image is centered inside the parent element "<strong>col-md-6 text-center</strong>". The classes "<strong>img-fluid rounded-circle</strong>" have been applied. </p>
</article>
<article class="col-md-6 ">
<div class="text-center">
<img src="https://source.unsplash.com/400x300/?sig=3" class="img-fluid rounded-circle mt-1" alt="...">
<p>This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "<strong>img-fluid rounded-circle</strong>" has been applied. Since the image is rectangle, it appears oval when rounded-circle
is applied.</p>
</div>
</article>
</section>
<h4>Image Shapes with Borders</h4>
<section class="row">
<article class="col-md-6">
<img src="https://source.unsplash.com/300x300/?sig=4" class="img-fluid rounded-circle mx-auto d-block mt-1 thickPurpleBorder" alt="...">
<p>This 300x300px image is centered inside the parent element "col-md-6 text-center". The classes "<strong>img-fluid rounded-circle mx-auto d-block</strong>" have been applied.</p>
</article>
<article class="col-md-6">
<div class="text-center">
<img src="https://source.unsplash.com/400x300/?sig=2" class="img-fluid rounded-circle mx-auto d-block circleImg" alt="...">
<p>This 400x300px image is centered inside the parent element "col-md-6 text-center". The classes "<strong>img-fluid rounded-circle mx-auto d-block</strong>" has been applied. Since the image is rectangle, it appears oval when
rounded-circle is applied.</p>
</div>
</article>
</section>
</div>
<!--.container-->
<hr>
<div class="container" id="figures-captions">
<h1 class="text-center">Figures</h1>
<section class="row">
<article class="col-md-4">
<figure class="figure">
<img src="https://source.unsplash.com/260x260/?sig=2" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
</article>
<article class="col-md-4">
<figure class="figure">
<img src="https://source.unsplash.com/260x260/?sig=3" class="figure-img img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-right">This caption is using text-right.</figcaption>
</figure>
</article>
<article class="col-md-4">
<figure class="figure">
<img src="https://source.unsplash.com/260x260/?sig=4" class="figure-img img-fluid img-thumbnail" alt="A generic square placeholder image with rounded corners in a figure.">
<figcaption class="figure-caption text-center">This caption is using text-center.</figcaption>
</figure>
</article>
</section>
<hr>
</div>
<!--.container-->
<!--TABLES-->
<div id="tables" class="container">
<h1 class="text-center">Tables</h1>
<h3>Bootstrap Default Tables</h3>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--.container-->
<div class="container" id="table-inverse">
<h3>Table Inverse</h3>
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--.container-->
<hr>
<div class="container" id="table-head">
<h3>Table Head Options</h3>
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-dark">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--.container-->
<hr>
<div class="container" id="striped-rows">
<h3>Striped Rows</h3>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!--.container-->
<hr>
<div class="container" id="bordered-tables">
<h3>Bordered Tables</h3>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<hr>
<table class="table table-bordered table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>