Bootstrap Jumbotron

A Bootstrap jumbotron specifies a big box for getting extra attention to some special content or information. It is displayed as a grey box with rounded corners. It can also enlarge the font sizes of the text inside it.

You can put any valid HTML or other Bootstrap elements/ classes inside a jumbotron.

The class .jumbotron within the <div> element is used to create a jumbotron.

Jumbotron Inside Container

The Inside container is used in jumbotron, if you want the jumbotron to not extend to the edge of the screen.

Put the jumbotron inside the <div class=”container”>.

Example:

      <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-689ebea8f9937d180166a9a12d07bde4'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);}.well-lg{padding:24px;border-radius:6px;}.well-sm{padding:9px;border-radius:3px;}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="689ebea8f9937d180166a9a12d07bde4" data-soledad_pagespeed-delay data-href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<div class="jumbotron">
<h1>This is Jumbotron inside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<p>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="64d935c220980741f544946562be3d2f" type="PenciLazyScript"></script>   </p>

Test it Now

Jumbotron Outside Container

It is used when you want the jumbotron to extend to the screen edges.

Put the jumbotron outside the <div class="container">.

Example:

      <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-689ebea8f9937d180166a9a12d07bde4'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);}.well-lg{padding:24px;border-radius:6px;}.well-sm{padding:9px;border-radius:3px;}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="689ebea8f9937d180166a9a12d07bde4" data-soledad_pagespeed-delay data-href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="jumbotron">
<h1>This is Jumbotron outside container!</h1>
<p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p>
</div>
<div class="container">
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<p>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="64d935c220980741f544946562be3d2f" type="PenciLazyScript"></script>   </p>

Test it Now

Full-width Jumbotron

To get a jumbotron without rounded borders, you have to add the .jumbotron-fluid class and a .container or .container-fluid inside it.

Example:

 <!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body>  <div class="jumbotron jumbotron-fluid">   <div class="container">     <h1>Full-width Jumbotron</h1>           <p>Jumbotron specifies a big box for getting extra attention to some special content or information.</p> </div>  <div class="container">   <p>This is some text.</p>         <p>This is another text.</p>       </div>  </body> </html> 

Test it Now

Bootstrap Page Header

A page header is like a section divider. It adds a horizontal line under the heading.

The .page-header class is used to create a page header.

Example:

      <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1" name="viewport">   <style data-penci-cache='cached' id='soledad_pagespeed-689ebea8f9937d180166a9a12d07bde4'>html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}b,strong{font-weight:700;}h1{margin:.67em 0;font-size:2em;}img{border:0;}svg:not(:root){overflow:hidden;}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0;}input{line-height:normal;}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto;}input[type=search]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield;}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;}textarea{overflow:auto;}@media print { *,:after,:before{color:#000 !important;text-shadow:none !important;background:0 0 !important;-webkit-box-shadow:none !important;box-shadow:none !important;}a,a:visited{text-decoration:underline;}a[href]:after{content:" (" attr(href) ")";}a[href^="javascript:"]:after,a[href^="#"]:after{content:"";}img,tr{page-break-inside:avoid;}img{max-width:100% !important;}h2,h3,p{orphans:3;widows:3;}h2,h3{page-break-after:avoid;} }*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0);}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff;}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;}a{color:#337ab7;text-decoration:none;}a:focus,a:hover{color:#23527c;text-decoration:underline;}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}img{vertical-align:middle;}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee;}[role=button]{cursor:pointer;}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;}.h1,.h2,.h3,h1,h2,h3{margin-top:20px;margin-bottom:10px;}.h4,.h5,.h6,h4,h5,h6{margin-top:10px;margin-bottom:10px;}.h1,h1{font-size:36px;}.h2,h2{font-size:30px;}.h3,h3{font-size:24px;}.h4,h4{font-size:18px;}.h5,h5{font-size:14px;}p{margin:0 0 10px;}ol,ul{margin-top:0;margin-bottom:10px;}ol ol,ol ul,ul ol,ul ul{margin-bottom:0;}.container{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;}@media (min-width:768px) { .container{width:750px;} }@media (min-width:992px) { .container{width:970px;} }@media (min-width:1200px) { .container{width:1170px;} }label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700;}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}input[type=checkbox],input[type=radio]{margin:4px 0 0;margin-top:1px \9;line-height:normal;}input[type=file]{display:block;}input[type=range]{display:block;width:100%;}select[multiple],select[size]{height:auto;}input[type=file]:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}input[type=search]{-webkit-appearance:none;}fieldset[disabled] input[type=checkbox],fieldset[disabled] input[type=radio],input[type=checkbox].disabled,input[type=checkbox][disabled],input[type=radio].disabled,input[type=radio][disabled]{cursor:not-allowed;}@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@-o-keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}@keyframes progress-bar-stripes{from{background-position:40px 0;}to{background-position:0 0;}}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);}.well-lg{padding:24px;border-radius:6px;}.well-sm{padding:9px;border-radius:3px;}.btn-group-vertical>.btn-group:after,.btn-group-vertical>.btn-group:before,.btn-toolbar:after,.btn-toolbar:before,.clearfix:after,.clearfix:before,.container-fluid:after,.container-fluid:before,.container:after,.container:before,.dl-horizontal dd:after,.dl-horizontal dd:before,.form-horizontal .form-group:after,.form-horizontal .form-group:before,.modal-footer:after,.modal-footer:before,.modal-header:after,.modal-header:before,.nav:after,.nav:before,.navbar-collapse:after,.navbar-collapse:before,.navbar-header:after,.navbar-header:before,.navbar:after,.navbar:before,.pager:after,.pager:before,.panel-body:after,.panel-body:before,.row:after,.row:before{display:table;content:" ";}.btn-group-vertical>.btn-group:after,.btn-toolbar:after,.clearfix:after,.container-fluid:after,.container:after,.dl-horizontal dd:after,.form-horizontal .form-group:after,.modal-footer:after,.modal-header:after,.nav:after,.navbar-collapse:after,.navbar-header:after,.navbar:after,.pager:after,.panel-body:after,.row:after{clear:both;}@-ms-viewport{width:device-width;}</style><link rel="stylesheet" id="689ebea8f9937d180166a9a12d07bde4" data-soledad_pagespeed-delay data-href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div class="container">
<div class="page-header">
<h1>Example Page Header</h1>
</div>
<p>This is some text.</p>
<p>This is another text.</p>
</div>
<p>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" id="ea04030ef4aa6650562f41edb7ef00c9" type="PenciLazyScript"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" id="64d935c220980741f544946562be3d2f" type="PenciLazyScript"></script>    </p>

Test it Now

Next TopicBootstrap Button

Bootstrap Jumbotron

Bootstrap Jumbotron

Jumbotron Inside Container

Jumbotron Outside Container

Full-width Jumbotron

Example:

Bootstrap Page Header

Bootstrap 4 Textarea

Bootstrap Popover

You may also like