{"id":18468,"date":"2017-09-13T16:21:13","date_gmt":"2017-09-13T13:21:13","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=18468"},"modified":"2018-01-08T12:59:26","modified_gmt":"2018-01-08T10:59:26","slug":"bootstrap-jumbotron-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/","title":{"rendered":"Bootstrap Jumbotron Example"},"content":{"rendered":"<p>In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user&#8217;s attention to specific information. We will see how we can create one and the various options for styling it. We will also explore the responsive behavior of the Jumbotron on different size viewports.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;57DHuNTHJ2qczaGz&#8217;]<\/p>\n<h2>1. Tools and Technologies<\/h2>\n<p>To build the example application for this example, I have used the following toolset. Some of them are required whilst others could be replaced by tools of your own choice.<\/p>\n<ol>\n<li><a href=\"http:\/\/getbootstrap.com\/getting-started\/#download\" target=\"_blank\" rel=\"noopener\">Bootstrap v3.3.7<\/a><\/li>\n<li><a href=\"https:\/\/blog.jquery.com\/2016\/05\/20\/jquery-1-12-4-and-2-2-4-released\/\" target=\"_blank\" rel=\"noopener\">JQuery v1.12.4<\/a><\/li>\n<li><a href=\"https:\/\/nodejs.org\/en\/download\/\" target=\"_blank\" rel=\"noopener\">Nodejs v6.3.0<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/express\" target=\"_blank\" rel=\"noopener\">Express<\/a><\/li>\n<li><a href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\" rel=\"noopener\">Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n<p>Bootstrap is a front-end framework for designing responsive websites. We also include JQuery since Bootstrap needs it. The JQuery library makes writing JavaScript a breeze. Node.js in essence is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser.<\/p>\n<h2>2. Project Layout<\/h2>\n<p>The project structure of our example application is as follows:<\/p>\n<figure id=\"attachment_18600\" aria-describedby=\"caption-attachment-18600\" style=\"width: 357px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronProjectLayout.jpg\"><img decoding=\"async\" class=\"size-full wp-image-18600\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronProjectLayout.jpg\" alt=\"\" width=\"357\" height=\"461\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronProjectLayout.jpg 357w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronProjectLayout-232x300.jpg 232w\" sizes=\"(max-width: 357px) 100vw, 357px\" \/><\/a><figcaption id=\"caption-attachment-18600\" class=\"wp-caption-text\">Project Layout<\/figcaption><\/figure>\n<p><strong><em>css<\/em><\/strong><br \/>\nThe css folder holds the Bootstrap css files taken from the Bootstrap download.<br \/>\n<strong><em>fonts<\/em><\/strong><br \/>\nThe fonts that came with the Bootstrap download are placed in this folder.<br \/>\n<strong><em>js<\/em><\/strong><br \/>\nAll Bootstrap JavaScript files and the ones we create reside in this folder.<br \/>\n<strong><em>index.js<\/em><\/strong><br \/>\nThis file is placed in the root of our project and contains code for a bare minimum web server for our use.<br \/>\n<strong><em>index.html<\/em><\/strong><br \/>\nThe index.html file contains all the HTML markup. I have used the template provided in the <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/getting-started\/#template\" target=\"_blank\" rel=\"noopener\">Getting Started<\/a> section of the <a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/\" target=\"_blank\" rel=\"noopener\">Bootstrap website<\/a> as a start.<\/p>\n<h2>3. HTML Markup<\/h2>\n<p>In this section we will setup and write the HTML markup for our example in the <code>index.html<\/code> page. There are a couple of ways to use the <code>Jumbotron<\/code> component in a web page. We can occupy the entire width of the viewport by placing it outside of all containers. Or we can have the <code>Jumbotron<\/code> enveloped in a container which would offset it from the edges and give it round borders. Let us look at Html for both and the resultant output in each case.<\/p>\n<h3>3.1. Jumbotron outside of container<\/h3>\n<p>To achieve this we need the following Html markup:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush: html;\">...\r\n    &lt;div class=\"jumbotron\"&gt;\r\n        &lt;div class=\"container\"&gt;\r\n            &lt;h1&gt;WCG -- Bootstrap Jumbotron Tutorial&lt;\/h1&gt;\r\n            &lt;p&gt;This is a tutorial for Bootstrap Jumbotron Component from Web Code Geeks&lt;\/p&gt;\r\n            &lt;button class=\"btn btn-info\"&gt;Details&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n...\r\n<\/pre>\n<p>This should give us a layout with the Jumbotron occupying the entire width of the viewport and without rounded borders like in the below screenshot.<\/p>\n<figure id=\"attachment_18622\" aria-describedby=\"caption-attachment-18622\" style=\"width: 850px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronOutsideContainer.jpg\"><img decoding=\"async\" class=\"size-full wp-image-18622\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronOutsideContainer.jpg\" alt=\"\" width=\"850\" height=\"320\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronOutsideContainer.jpg 850w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronOutsideContainer-300x113.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronOutsideContainer-768x289.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><figcaption id=\"caption-attachment-18622\" class=\"wp-caption-text\">Jumbotron outside Container<\/figcaption><\/figure>\n<h3>3.2. Jumbotron inside of container<\/h3>\n<p>To implement this we would modify the Html Markup in the previous section to look like below:<\/p>\n<p><span style=\"text-decoration: underline;\"><em>index.html<\/em><\/span><\/p>\n<pre class=\"brush: html;\">...\r\n    &lt;div class=\"container\"&gt;\r\n        &lt;div class=\"jumbotron\"&gt;\r\n            &lt;h1&gt;WCG -- Bootstrap Jumbotron Tutorial&lt;\/h1&gt;\r\n            &lt;p&gt;This is a tutorial for Bootstrap Jumbotron Component from Web Code Geeks&lt;\/p&gt;\r\n            &lt;button class=\"btn btn-info\"&gt;Details&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n...\r\n<\/pre>\n<p>This would create a Jumbotron which is placed at the center with whitespace on either side and rounded corners. The output would be as below:<\/p>\n<figure id=\"attachment_18624\" aria-describedby=\"caption-attachment-18624\" style=\"width: 850px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg\"><img decoding=\"async\" class=\"size-full wp-image-18624\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg\" alt=\"\" width=\"850\" height=\"337\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg 850w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer-300x119.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer-768x304.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><figcaption id=\"caption-attachment-18624\" class=\"wp-caption-text\">Jumbotron Inside Container<\/figcaption><\/figure>\n<h2>4. Running the Code<\/h2>\n<p>To run the code and see it in action you need to run the following commands at the root of the project:<\/p>\n<pre class=\"brush: bash;\">&gt; npm install\r\n<\/pre>\n<p>then<\/p>\n<pre class=\"brush: bash;\">&gt; node index.js\r\n<\/pre>\n<p>After running the above two commands we need to navigate to the Url <code>http:\/\/localhost:8090<\/code> to arrive at the below page:<\/p>\n<figure id=\"attachment_18624\" aria-describedby=\"caption-attachment-18624\" style=\"width: 850px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg\"><img decoding=\"async\" class=\"size-full wp-image-18624\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg\" alt=\"\" width=\"850\" height=\"337\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer.jpg 850w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer-300x119.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/JumbotronInsideContainer-768x304.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><figcaption id=\"caption-attachment-18624\" class=\"wp-caption-text\">Jumbotron Demo<\/figcaption><\/figure>\n<h2>5. Download the Source Code<\/h2>\n<p>You can download the source code for this example below:<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here : <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/09\/WCG-Bootstrap-Jumbotron-Tutorial.zip\"><strong>WCG &#8212; Bootstrap Jumbotron Tutorial<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user&#8217;s attention to specific information. We will see how we can create one and the various options for styling it. We will also explore the responsive behavior of the Jumbotron on &hellip;<\/p>\n","protected":false},"author":213,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[376],"class_list":["post-18468","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","tag-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap Jumbotron Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user&#039;s attention to\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Jumbotron Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user&#039;s attention to\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-09-13T13:21:13+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T10:59:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"Bootstrap Jumbotron Example\",\"datePublished\":\"2017-09-13T13:21:13+00:00\",\"dateModified\":\"2018-01-08T10:59:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\"},\"wordCount\":562,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"keywords\":[\"bootstrap\"],\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\",\"name\":\"Bootstrap Jumbotron Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2017-09-13T13:21:13+00:00\",\"dateModified\":\"2018-01-08T10:59:26+00:00\",\"description\":\"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user's attention to\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bootstrap\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Bootstrap Jumbotron Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Jumbotron Example - Web Code Geeks - 2026","description":"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user's attention to","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Jumbotron Example - Web Code Geeks - 2026","og_description":"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user's attention to","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-09-13T13:21:13+00:00","article_modified_time":"2018-01-08T10:59:26+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"Bootstrap Jumbotron Example","datePublished":"2017-09-13T13:21:13+00:00","dateModified":"2018-01-08T10:59:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/"},"wordCount":562,"commentCount":3,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","keywords":["bootstrap"],"articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/","name":"Bootstrap Jumbotron Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2017-09-13T13:21:13+00:00","dateModified":"2018-01-08T10:59:26+00:00","description":"In this tutorial, I will guide you through using the Jumbotron component from Bootstrap. A typical use of the Jumbotron is to draw the user's attention to","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-jumbotron-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"Bootstrap","item":"https:\/\/www.webcodegeeks.com\/category\/css\/bootstrap\/"},{"@type":"ListItem","position":4,"name":"Bootstrap Jumbotron Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18468","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=18468"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/18468\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/8515"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=18468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=18468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=18468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}