Руководство Bootstrap Jumbotron

1- Bootstrap Jumbotron

Jumbotron это компонент интерфейса в  Bootstrap, он используется для создания зоны отображения самого важного содержания страницы. Помогает привлечь внимание пользователя.

<div class="jumbotron">
   <h1>Bootstrap Tutorials</h1>
   <p>
      Bootstrap is a free, open-source and is the most popular HTML, CSS,
      and jаvascript framework developed by twitter for creating
      responsive web applications.
   </p>
   <p>
      <a class="btn btn-lg btn-primary" href="#">
      Get started
      </a>
   </p>
</div>

Смотрите полный пример:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Bootstrap Jumbotron</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
   </head>
   <body>
      <div class="container">
         <h4>o7planning</h4>
 
         <div class="jumbotron">
            <h1>Bootstrap Tutorials</h1>
            <p>
               Bootstrap is a free, open-source and is the most popular HTML, CSS,
               and jаvascript framework developed by twitter for creating
               responsive web applications.
            </p>
            <p>
               <a class="btn btn-lg btn-primary" href="#">
               Get started
               </a>
            </p>
         </div>
 
      </div>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>