​x
 
1
<!DOCTYPE html>
2
<title>My Example</title>
3
​
4
<!-- Latest compiled and minified Bootstrap CSS -->
5
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
6
​
7
<style>
8
body {
9
padding-top: 1em;
10
}
11
</style> <div class="container-fluid">
12
13
<div class="media">
14
<img class="mr-3" src="/pix/samples/9s.jpg" alt="Sample photo">
15
<div class="media-body">
16
<h4>Media Object</h4>
17
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
18
​
19
<!-- Start Nested Media Object -->
20
<div class="media">
21
<img class="mr-3" src="/pix/samples/10s.jpg" alt="Sample photo">
22
<div class="media-body">
23
<h4>Nested Media Object</h4>
24
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
25
</div>
26
</div>
27
<!-- End Nested Media Object -->
28
​
29
</div>
30
</div>
31
32
​
33
​
34
</div>
35
36
<!-- jQuery library -->
37
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
38
​
39
<!-- Popper -->
40
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
41
​
42
<!-- Latest compiled and minified Bootstrap JavaScript -->
43
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
44
​
45
<!-- Initialize Bootstrap functionality -->
46
<script>
47
// Initialize tooltip component
48
$(function () {
49
  $('[data-toggle="tooltip"]').tooltip()
50
})
51
​
52
// Initialize popover component
53
$(function () {
54
  $('[data-toggle="popover"]').popover()
55
})
56
</script>