BootStrap Jumbotron ширина

Question

У меня есть ширина начальной загрузки jumbotron, которая покрывает всю страницу.Я хочу реализовать стиль, который не охватывает всю страницу.Могу ли я применить какой-либо атрибут, который можно настроить по ширине?

/* style -- this is the stylesheet */

.jumbotron {
    font-size: 17px;
    cursor: pointer;
    width: 5px;
}

Answer 1

.jumbotron-test {
    font-size: 17px;
    cursor: pointer;
    width: 50%;
    text-align:Center;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="jumbotron jumbotron-test">
  <h1>Jumbotron</h1>
  <p>Testing Jumbo tron</p> 
</div>

Answer 2

.mycustom-jumbotron {
  border:10px solid #003366;
  width: 300px;
  margin: 0 auto
}

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<div class="jumbotron mycustom-jumbotron text-center">
  <h1>Bootstrap</h1>
  <p>Bootstrap Web Design</p> 
</div>