Working with Bootstrap Jumbotron

BootstrapWeb DevelopmentCSS Framework

<p style="">Jumbotron component can optionally increase the size of headings and add a lot of margin for landing page content.</p><p>To use it follow the below given steps &minus;</p><ul class="list"><li>Create a container &lt;div&gt; with the class of .jumbotron.</li><li>In addition to a larger &lt;h1&gt;, the font-weight is reduced to 200</li></ul><p>Let us see an example &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/2BMxhO" rel="nofollow" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;title&gt;Bootstrap Example&lt;/title&gt; &nbsp; &nbsp; &nbsp; &lt;link href = &quot;/bootstrap/css/bootstrap.min.css&quot; rel = &quot;stylesheet&quot;&gt; &nbsp; &nbsp; &nbsp; &lt;script src = &quot;/scripts/jquery.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp; &nbsp; &lt;script src = &quot;/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;container&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;div class = &quot;jumbotron&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Welcome to first page!&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt;Example for jumbotron.&lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;a class = &quot;btn btn-primary btn-lg&quot; role = &quot;button&quot;&gt;Button&lt;/a&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/p&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>
raja
Updated on 12-Jun-2020 21:30:59

Advertisements