Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
570 lines (526 loc) · 28.6 KB
/
Copy pathindex.html
File metadata and controls
570 lines (526 loc) · 28.6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--
col- < 576px
col-sm >= 576px
col-md >= 768px
col-lg >= 992px
col-xl >= 1200px
-->
<div class="container">
<header class="row">
<div class="col col-auto">
<h1 class="border border-primary">Nombre del sitio</h1>
</div>
</header>
<section class="row banner">
<div class="col">
<h2>Titulo banner</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</section>
<!-- vertical: ai align-items start, end, center-->
<section class="row servicios align-items-md-end align-items-lg-center">
<div class="servicio col-sm-6 col-md-4 col-lg-3">
<h3>Titulo servicio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam dicta, dolorem doloremque earum eos facere libero numquam odio odit pariatur, perferendis quam quod reprehenderit. Non, ratione, sint! Deserunt iste itaque laboriosam modi officia quaerat tempora voluptatem. Accusamus ad adipisci animi architecto aut beatae consequuntur distinctio esse explicabo facilis fugiat id ipsam laboriosam libero magni natus neque nesciunt, nisi nobis obcaecati odit officia placeat repudiandae rerum veniam voluptas voluptatibus. Ad, cumque sunt! Accusantium dolor dolores expedita, in mollitia nobis praesentium quos reiciendis repellendus ullam. Ab accusantium commodi culpa delectus expedita harum illo minus molestias nostrum obcaecati odit qui, quidem sed sequi!</p></div>
<div class="servicio col-sm-6 col-md-4 col-lg-3 align-self-start">
<h3>Titulo servicio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae cum hic magnam velit. Consectetur ex facere hic perferendis soluta voluptatum.</p></div>
<div class="servicio col-sm-6 col-md-4 col-lg-3">
<h3>Titulo servicio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquam consequatur deserunt dignissimos dolor est id, illo inventore labore laborum nemo nobis praesentium quaerat quasi recusandae unde voluptates? Adipisci asperiores blanditiis explicabo fugiat laborum libero necessitatibus perferendis saepe sit voluptatum. Accusantium aspernatur culpa debitis eligendi possimus quisquam, tempore veniam voluptatem!</p></div>
<div class="servicio col-sm-6 col-md-12 col-lg-3">
<h3>Titulo servicio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam.</p></div>
</section>
<!-- horizontal: jc justify-content between, around, center-->
<!-- offset: o1...-->
<!-- order (default group 0): or1...-->
<!-- border, border-end ...-->
<!-- border-end-0 ...-->
<!-- border-primary ...-->
<!-- rounded, rounded-top, rounded-start, end, bottom, circle ...-->
<!-- rounded-0 to erase default round-->
<section class="row servicios justify-content-between">
<div class="servicio col-sm-6 col-md-4 col-lg-3 border-right">
<h3>1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="servicio col-sm-6 col-md-4 col-lg-3 border">
<h3>2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
<div class="servicio col-sm-6 col-md-4 col-lg-3 border-bottom">
<h3>3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, ipsam. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></div>
</section>
<section class="row">
<div class="col-md col-lg-9 sobre-nosotros">
<div class="row">
<div class="col-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, officiis!</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, velit?</div>
<div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus, sed!</div>
</div>
</div>
<aside class="col-md col-lg-3">
<ul>
<li class="row">
<div class="col-6">Lorem ipsum dolor sit amet.</div>
<div class="col-6">Lorem ipsum dolor sit amet.</div>
</li>
</ul>
</aside>
</section>
<!--float-start, -end para hijos // clearfix para padre que ocupe el espacio de los hijos-->
<div class="container">
<div class="row">
<div class="col">
<div class="padre clearfix">
<div class="hijo float-md-end float-lg-start">Izquierda</div>
<div class="hijo float-end">Derecha</div>
</div>
</div>
</div>
</div>
<!--text-primary, secondary, success, danger, warning, info, light, dark, muted, white-->
<!--sirve para p, a-->
<!--bg-primary, secondary, success, danger, warning, info, light, dark, muted, white-->
<!--sirve para divs, puede usar text-primary... para los colores del texto de adentro-->
<!--
display properties
.d-{valor} para extra pequeño en adelante
.d-{breakpoint}-{valor} para sm, md, lg, xl
none
inline
inline-block
block - en todo el ancho
table
table-cell
table-row
flex
inline-flex
-->
<div class="container">
<div class="row">
<div class="col">
<h1>Display</h1>
<div>
<h3>Display none</h3>
<p class="d-none d-md-block">Solo me veo en dispositivos grandes</p>
</div>
<div>
<h3>Display block</h3>
<a href="#" class="bg-primary text-white d-md-block">Lorem ipsum.</a>
</div>
<div>
<h3>Display inline-block</h3>
<a href="#" class="bg-primary text-white d-inline-block">Lorem ipsum.</a>
<a href="#" class="bg-success text-white d-inline-block">Lorem ipsum.</a>
</div>
<div>
<h3>Display flex</h3>
<div class="d-flex">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, magni!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur blanditiis delectus impedit ipsam itaque, minus mollitia possimus repellendus soluta voluptatum.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 21:9 embed-responsive-21by9
16:9
4:3
1:1...-->
<div class="container">
<div class="row">
<div class="col">
<h1>Embed</h1>
<div class="embed-responsive embed-responsive-16by9">
<!--not working for some reason-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/hQTc5dTEfVU" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!--position-static
position-absolute
position-relative
position-fixed
position-sticky-->
<div class="container">
<div class="row">
<div class="col">
<h1>Position</h1>
<div class="position-static">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, eveniet!</div>
</div>
</div>
</div>
<!--
m - margin
p - padding
t - top
b - bottom
s - start
e - end
x - left and right
y - top and bottom
0 - for classes that eliminate margin or padding by setting it to 0
1 - .25em
2 - .5em
3 - 1em
4 - 1.5em
5 - 3em
auto
-->
<div class="container mt-5">
<div class="row">
<div class="col">
<h1>Espacios y tamaños</h1>
<p class="bg-primary text-white p-4 p-md-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam culpa deleniti eligendi esse inventore ipsa magnam sequi tempora voluptas.</p>
</div>
</div>
<div class="row">
<div class="col col-auto">Lorem ipsum dolor.</div>
<div class="col col-auto ms-auto">Lorem ipsum dolor sit.</div>
<div class="col col-auto">Lorem ipsum dolor sit.</div>
</div>
<!--
w-25...100
h-25...100
mv-100 -- max width
mh-100 -- max height
-->
<div class="row">
<div class="col">
<p class="bg-primary text-white p-md-4 mb-4 w-25">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quae.</p>
<p class="bg-primary text-white p-md-4 mb-4 w-50">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quae.</p>
<p class="bg-primary text-white p-md-4 mb-4 w-75">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quae.</p>
<p class="bg-primary text-white p-md-4 mb-4 mw-100">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quae.</p>
</div>
</div>
<div class="row">
<div class="col" style="height: 600px">
<p class="bg-primary text-white p-md-4 mb-4 d-inline-block h-25">Lorem ipsum</p>
<p class="bg-primary text-white p-md-4 mb-4 d-inline-block h-50">Lorem ipsum</p>
<p class="bg-primary text-white p-md-4 mb-4 d-inline-block h-75">Lorem ipsum</p>
<p class="bg-primary text-white p-md-4 mb-4 d-inline-block mh-100">Lorem ipsum</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1>Utilidades de Flexbox</h1>
<hr>
<div>
<h3>Display flex y display inline-flex</h3>
<!--responsive, d-sm-flex...-->
<div class="p-4 bg-primary d-flex">
Tengo display: flex;
</div>
<div class="p-4 bg-success d-inline-flex">
Tengo display: inline-flex;
</div>
</div>
<hr>
<div>
<h3>Dirección</h3>
<!--flex-row, flex-column, flex-row-reverse, flex-column-reverse-->
<!--responsive, flex-sm-row...-->
<div class="d-flex p-4 text-white flex-row flex-md-column">
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
</div>
</div>
<hr>
<div>
<h3>Justify Content</h3>
<!-- justify-content-center, end, start, between, around -->
<!-- responsive, justify-content-sm-center... -->
<div class="d-flex p-4 text-white justify-content-around">
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
</div>
</div>
<hr>
<div>
<h3>Align items y align-self</h3>
<!-- align-items-center, start, end... -->
<!-- responsive, align-items-sm-center -->
<div class="d-flex p-4 text-white align-items-center" style="height: 500px">
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2 align-self-start">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
</div>
</div>
<hr>
<div>
<h3>Wrap</h3>
<!-- default=flex-nowrap -->
<!-- flex-wrap -->
<!-- responsive, flex-md-wrap... -->
<div class="d-flex p-4 text-white flex-wrap">
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
</div>
</div>
<hr>
<div>
<h3>Order</h3>
<!-- responsive as well -->
<div class="d-flex p-4 text-white">
<p class="bg-primary mx-3 p-2 order-1">1</p>
<p class="bg-primary mx-3 p-2 order-3">2</p>
<p class="bg-primary mx-3 p-2 order-2">3</p>
</div>
</div>
<hr>
<div>
<h3>Align content</h3>
<!-- align-content-start, end, center, baseline, stretch(default) -->
<!-- responsive as well, align-content-md-start... -->
<div class="d-flex p-4 text-white flex-wrap align-content-center" style="height: 600px">
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
<p class="bg-primary mx-3 p-2">Lorem ipsum dolor.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1>Tipografía y textos</h1>
<hr>
<h1>Soy un encabezado h1 <small class="text-muted">Texto más pequeño</small></h1>
<h2>Soy un encabezado h2 <small class="text-muted">Texto más pequeño</small></h2>
<h3>Soy un encabezado h3 <small class="text-muted">Texto más pequeño</small></h3>
<h4>Soy un encabezado h4 <small class="text-muted">Texto más pequeño</small></h4>
<h5>Soy un encabezado h5 <small class="text-muted">Texto más pequeño</small></h5>
<h6>Soy un encabezado h6 <small class="text-muted">Texto más pequeño</small></h6>
<hr>
<p class="h1">Soy un párrafo con estilo de h1</p>
<p class="h2">Soy un párrafo con estilo de h2</p>
<p class="h3">Soy un párrafo con estilo de h3</p>
<p class="h4">Soy un párrafo con estilo de h4</p>
<p class="h5">Soy un párrafo con estilo de h5</p>
<p class="h6">Soy un párrafo con estilo de h6</p>
<hr>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<hr>
<p class="lead">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem, magnam?
</p>
</div>
</div>
<div class="row mt-4">
<div class="col">
<hr>
<p>Lorem <mark>ipsum</mark> dolor sit amet.</p>
<p>Lorem <del>ipsum</del> dolor <s>sit</s> amet.</p>
<p>Lorem <ins>ipsum</ins> dolor <u>sit</u> amet.</p>
<p>Lorem <small>ipsum</small> dolor sit amet.</p>
<p>Lorem ipsum <strong>dolor</strong> sit amet.</p>
<p>Lorem ipsum <em>dolor</em> sit amet.</p>
</div>
</div>
<div class="row mt-4">
<div class="col">
<hr>
<!-- text-start, end, center, justify(?) - responsive -->
<!-- text-uppercase, lowercase, capitalize -->
<p class="text-start text-md-end text-uppercase">Lorem <mark>ipsum</mark> dolor sit amet.</p>
<p class="text-end text-lowercase">Lorem <del>ipsum</del> dolor <s>sit</s> amet.</p>
<p class="text-center text-capitalize">Lorem <ins>ipsum</ins> dolor <u>sit</u> amet.</p>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam assumenda dolor eaque facere hic iusto magnam nisi odio officiis rem voluptas, voluptatibus voluptatum? Ad commodi consectetur consequatur culpa deleniti, deserunt dolorum eveniet molestiae officiis, optio tempore voluptatem voluptatibus? Ab atque commodi debitis, earum excepturi iure laboriosam laudantium magnam perspiciatis quaerat quasi quisquam sint tempore. Accusamus beatae deserunt non officiis? Doloribus eveniet explicabo harum numquam praesentium quia recusandae, rerum tempore vero. Dolore eos ex excepturi magnam quisquam! Provident, quaerat, suscipit? Ab cum debitis dignissimos doloremque eaque, et, exercitationem facilis harum illo magnam minus, natus quae quam quidem ratione sint veniam! A aliquid amet asperiores blanditiis delectus dignissimos, earum eius et exercitationem expedita harum incidunt libero maiores maxime nisi nostrum officia, optio pariatur possimus quas quo recusandae repellendus, reprehenderit similique sit suscipit vel voluptate. Architecto aspernatur consequatur excepturi fugit, modi necessitatibus odio officiis quisquam vitae. Asperiores aspernatur, consectetur debitis dignissimos earum esse eum facere iste minima neque obcaecati optio repellendus sequi sit soluta velit vitae? Atque dolor enim est in inventore, labore quia sapiente sint soluta unde? Accusantium aliquid atque consequuntur distinctio dolorem doloribus, error eum fuga illum incidunt ipsa laborum magni minima nostrum omnis quae quaerat reiciendis suscipit ullam vitae?</p>
</div>
</div>
<div class="row mt-4">
<div class="col">
<hr>
<blockquote class="blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, itaque!</p>
<footer class="blockquote-footer">Hecho por Hector</footer>
</blockquote>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<hr>
<h1>Código</h1>
<p>Lorem ipsum dolor sit amet, <code><strong></code> adipisicing elit. Asperiores assumenda blanditiis, dolores ducimus earum, esse facere incidunt nemo nisi non quia rem saepe similique sit suscipit, tempora tenetur. Accusantium blanditiis et itaque modi odit provident repudiandae rerum sapiente vero. Asperiores atque, deserunt doloremque enim natus non nostrum quaerat sequi vero.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, sint?</p>
<pre>
<div class="container">
<div class="row">
<div class="col">
</div>
</div>
</div>
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, animi: <kbd>CTRL</kbd> + <kbd>;</kbd></p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<hr>
<h1>Imágenes</h1>
<div class="row">
<div class="col col-9">
<p>Lorem ipsum dolor sit amet, <code><strong></code> adipisicing elit. Asperiores assumenda blanditiis, dolores ducimus earum, esse facere incidunt nemo nisi non quia rem saepe similique sit suscipit, tempora tenetur. Accusantium blanditiis et itaque modi odit provident repudiandae rerum sapiente vero. Asperiores atque, deserunt doloremque enim natus non nostrum quaerat sequi vero.</p>
</div>
<div class="col col-3">
<!-- img-fluid, img-thumbnail, rounded, figure -->
<img class="img-fluid rounded" src="img/bg.jpg" alt="">
</div>
</div>
<div class="row">
<div class="col col-3">
<figure class="figure">
<img class="img-fluid" src="img/bg.jpg" alt="">
<figcaption class="figure-caption">HOLO</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<hr>
<h1>Tablas</h1>
<!-- table-dark, striped, bordered, borderless, hover, sm y demas colores --- responsive?? -->
<table class="table table-dark table-hover table-responsive-sm">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>País</th>
<th>Edad</th>
<th>#</th>
<th>Nombre</th>
<th>País</th>
<th>Edad</th>
<th>#</th>
<th>Nombre</th>
<th>País</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>1</td>
<td>Paul</td>
<td>Argentina</td>
<td>21</td>
<td>1</td>
<td>Paul</td>
<td>Argentina</td>
<td>21</td>
<td>1</td>
<td>Paul</td>
<td>Argentina</td>
<td>21</td>
</tr>
<tr class="table-success">
<td>2</td>
<td>Jane</td>
<td>España</td>
<td>24</td>
<td>2</td>
<td>Jane</td>
<td>España</td>
<td>24</td>
<td>2</td>
<td>Jane</td>
<td>España</td>
<td>24</td>
</tr>
<tr>
<td class="table-light">3</td>
<td>Raúl</td>
<td>Mexico</td>
<td>28</td>
<td class="table-light">3</td>
<td>Raúl</td>
<td>Mexico</td>
<td>28</td>
<td class="table-light">3</td>
<td>Raúl</td>
<td>Mexico</td>
<td>28</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col col-6">
<hr>
<!-- dropped in v5.0 -->
<h1>Media Object</h1>
<div class="media">
<img src="img/bg2.jpg" alt="" width="64px" height="64px" class="me-3">
<div class="media-body">
<h5>Hector Suzuki</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, suscipit!</p>
<div class="media">
<img src="img/bg2.jpg" alt="" width="64px" height="64px" class="me-3">
<div class="media-body">
<h5>Hector Suzuki</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, suscipit!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="row">
<div class="col-md-6 col-xl-auto">Todos los derechos reservados.</div>
<div class="col-md-6 col-xl-auto"><a href="#">Facebook</a> | <a href="#">Twitter</a> | <a href="#">Instagram</a></div>
</footer>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>