Запустить
<!doctype html> <html lang="ru"> <head> <title>Bootstrap 4 - Медиа объект</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="/examples/vendors/bootstrap-4/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- Контент страницы --> <div class="container"> <h1 class="h4 text-center my-4">Bootstrap 4 - Медиа объект</h1> <ul class="list-unstyled"> <!-- Первый медиа объект --> <li class="media mb-4"> <img class="mr-3" src="/examples/images/media-image-1.png" alt="..."> <div class="media-body"> <h5 class="mt-0 mb-1">Media heading</h5> Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam... </div> </li> <!-- Второй медиа объект --> <li class="media mb-4"> <img class="mr-3" src="/examples/images/media-image-3.png" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">Media heading</h5> Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam... </div> </li> <!-- Третий медиа объект --> <li class="media mb-4"> <img class="mr-3" src="/examples/images/media-image-5.png" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">Media heading</h5> Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam... </div> </li> <!-- Четвертый медиа объект --> <li class="media"> <img class="mr-3" src="/examples/images/media-image-4.png" alt="Generic placeholder image"> <div class="media-body"> <h5 class="mt-0 mb-1">Media heading</h5> Vitae dicta sunt, explicabo totam rem aperiam eaque ipsa. Voluptate velit esse, quam nihil impedit, quo voluptas nulla vero eos. Necessitatibus saepe eveniet, ut enim ad minima veniam, quis nostrum exercitationem ullam... </div> </li> </ul> </div> </body> </html>