{"id":1618,"date":"2016-05-15T16:36:21","date_gmt":"2016-05-15T16:36:21","guid":{"rendered":"http:\/\/box.jharaphula.com\/?p=1618"},"modified":"2022-09-04T08:11:57","modified_gmt":"2022-09-04T13:41:57","slug":"bootstrap-grid-system-tutorial-examples","status":"publish","type":"post","link":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/","title":{"rendered":"Responsive Bootstrap grid system Tutorial with Examples"},"content":{"rendered":"<p>Digital graphic design, a grid is a structure (<em>most usually two-dimensional<\/em>) made up of a series of intersecting straight (horizontal, vertical) lines used to structure the web content. This is widely used to design layout and content structure in print design also. In web design, it is a very effective method to create a consistent layout rapidly and effectively using <a href=\"https:\/\/jharaphula.com\/category\/programming-solutions\/html5-examples\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML<\/a> and <a href=\"https:\/\/jharaphula.com\/category\/programming-solutions\/css-code-tutorials\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>. In this session let us discuss more about BootStrap grid system.<\/p>\n<h3>Introduction to Bootstrap Grid<\/h3>\n<p>Bootstrap 3&#8217;s grid system is used to help generate responsive grid layouts in less time and lower maintenance cost. Grid system allow to make responsive website, and the columns will re-arrange the all layouts depending on the screen size. Every column will arrange the all data when this page execute on the screen size. A big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.<\/p>\n<p>Bootstrap&#8217;s grid system allows up to 12 columns across the page. You can use all grid as per your need.<\/p>\n<p>Read below pints:<\/p>\n<ul>\n<li>If you want to create 12 columns so you need to add separate 12 columns<\/li>\n<li>If you want to make 3 columns, so you need to use 4 grid column class.<\/li>\n<li>If you want to make 2 columns, so you need to use 6 grid column class.<\/li>\n<li>If you want to create full column layout so you can use 12 grid column class- it will allow to make full width of container.<\/li>\n<\/ul>\n<h3>Grid Classes<\/h3>\n<p>Bootstrap grid system providing a four classes as per respective of screen sizes &amp; device.<\/p>\n<ul>\n<li>xs (for phones)<\/li>\n<li>sm (for tablets)<\/li>\n<li>md (for desktops)<\/li>\n<li>lg (for larger desktops)<\/li>\n<\/ul>\n<table>\n<tr>\n<th>Column Name<\/th>\n<th>Devices<\/th>\n<th>Screen Sizes<\/th>\n<\/tr>\n<tr>\n<td>.col-xs-$<\/td>\n<td>Extra Small<\/td>\n<td>Phones Less than 768px<\/td>\n<\/tr>\n<tr>\n<td>.col-xs-$<\/td>\n<td>Small Devices<\/td>\n<td>Tablet 768px and Up<\/td>\n<\/tr>\n<tr>\n<td>.col-xs-$<\/td>\n<td>Small Devices<\/td>\n<td>Desktop 992px and Up<\/td>\n<\/tr>\n<tr>\n<td>.col-xs-$<\/td>\n<td>Small Devices<\/td>\n<td>Large Desktop 1200px and Up<\/td>\n<\/tr>\n<\/table>\n<p>The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc.<\/p>\n<h3>BootStrap Grid System Rules<\/h3>\n<p>Following are points for basic rules:<\/p>\n<ul>\n<li>Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.<\/li>\n<li>Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows<\/li>\n<li>Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.<\/li>\n<li>Use rows to create horizontal groups of columns.<\/li>\n<li>Content should be placed within columns, and only columns may be immediate children of rows.<\/li>\n<li>Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4<\/li>\n<\/ul>\n<p>Basic structure of bootstrap grid system:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div class=&quot;container&quot;&gt;\r\n&lt;div class=&quot;row&quot;&gt;\r\n&lt;div class=&quot;col-*-*&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;row&quot;&gt;\r\n&lt;div class=&quot;col-*-*&quot;&gt;&lt;\/div&gt;\r\n&lt;div class=&quot;col-*-*&quot;&gt;&lt;\/div&gt;\r\n&lt;div class=&quot;col-*-*&quot;&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;div class=&quot;row&quot;&gt;\r\n...\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Create a container (&lt;div class=&#8221;container&#8221;&gt;). Next, create a row (&lt;div class=&#8221;row&#8221;&gt;). Then, add the number of columns which you want to make it (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.<\/p>\n<h3>Basic Elements of Bootstrap Grid System<\/h3>\n<p>Below are the basic elements used in Bootstrap 3 Grid System:<\/p>\n<p><strong>Container<\/strong><\/p>\n<p>This is the containing element for inner grid elements. Its major properties are:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">Padding-right : 15px;\r\nPadding-left : 15px;\r\nMargin-left : auto;\r\nMargin-right : auto;<\/pre>\n<p>Along with it there are following media queries that apply:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">For min-width : 1200px; then  width : 1170px;\r\nFor min-width : 992px;  then  width : 970px;\r\nFor min-width : 768px; then  width : 750px;<\/pre>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div class=&quot;container&quot;&gt;&lt;\/div&gt;<\/pre>\n<p><strong>Container-fluid<\/strong><\/p>\n<p>This is also the containing element for inner grid elements but without media queries. Its major properties are:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">Padding-right : 15px;\r\nPadding-left : 15px;\r\nMargin-left : auto;\r\nMargin-right : auto;<\/pre>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div class=&quot;container-fluid&quot;&gt;&lt;\/div&gt;<\/pre>\n<p><strong>Row<\/strong><\/p>\n<p>This element represents the horizontal row in a grid system. Its major properties are:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">margin-right : -15px;\r\nmargin-left : -15px;\r\ndisplay : block;<\/pre>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div class=&quot;row&quot;&gt;&lt;\/div&gt;<\/pre>\n<p><strong>Column<\/strong><\/p>\n<p>This element represents the horizontal row in a grid system. Its major properties are:<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">padding-right : 15px;\r\npadding-left : 15px;\r\nwidth : 100%;\r\nmin-height : 1px;<\/pre>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">&lt;div class=&quot;col-xs-12&quot;&gt;&lt;\/div&gt;<\/pre>\n<h3>Columns in details<\/h3>\n<p>In Bootstrap 3, four types of screen resolution are provided. These ranges are:<\/p>\n<p><strong>lg<\/strong> \u2013 for large \u2013 This represent large desktop screen resolutions in range of 1200px and above.<\/p>\n<p><strong>md<\/strong> \u2013 for medium \u2013 This represent desktop\/laptop screens with screen resolution in range of 992px to 1200px<\/p>\n<p><strong>sm<\/strong> \u2013 for small \u2013 This represent tablet screens with resolution in range of 768px to 992px.<\/p>\n<p><strong>xs<\/strong> \u2013 for extra small \u2013 This represent mobile screens with resolution less than 768px.<\/p>\n<p>Each screen is divided into 12 columns by default. When forming grid, layouts for each range of screen resolution should be kept in consideration and provided in the code.<\/p>\n<h3>Columns Classes with Example<\/h3>\n<p><strong>&lt;div class=&#8221;col-lg-12&#8243;&gt;<\/strong> &#8211; to create a column covering entire  width of containing element ,for large  resolution screen<\/p>\n<p><strong>&lt;div class=&#8221;col-md-4&#8243;&gt;<\/strong> &#8211; to create a column covering 4 out of 12 columns of containing element width, for medium  resolution screen<\/p>\n<p><strong>&lt;div class=&#8221;col-sm-3&#8243;&gt;<\/strong> &#8211; to create a column covering 3 out of 12 columns of containing element width, for small  resolution screen<\/p>\n<p><strong>&lt;div class=&#8221;col-xs-6&#8243;&gt;<\/strong> &#8211; to create a column covering 6 out of 12 columns of containing element width, for extra small  resolution screen<\/p>\n<p><strong>&lt;div class=&#8221;col-xs-12 col-sm-8 col-md-9 col-lg-6&#8243;&gt;<\/strong> &#8211; col-xs-12 col-sm-9 col-md-8 col-lg-6 &#8211; covers 100% in extra small screen, 75% in small, 66% in medium and 50% in large resolution screen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Digital graphic design, a grid is a structure (most usually two-dimensional) made up of a series of intersecting straight (horizontal, vertical) lines used to structure&#8230;<\/p>\n","protected":false},"author":3,"featured_media":1864,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[38463,39825,37168,36412,38488,36816],"class_list":["post-1618","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-solutions","tag-bootstrap-grid-system","tag-grid-system-tutorial","tag-how-to-draw-grid","tag-javascript-framework","tag-responsive-design","tag-tutorial-with-example"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Responsive Bootstrap grid system Tutorial with Examples<\/title>\n<meta name=\"description\" content=\"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Bootstrap grid system Tutorial with Examples\" \/>\n<meta property=\"og:description\" content=\"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"OneStop Shop\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/tajinweb\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-15T16:36:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T13:41:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"478\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nibedita Panda\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nibedita Panda\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\"},\"author\":{\"name\":\"Nibedita Panda\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\"},\"headline\":\"Responsive Bootstrap grid system Tutorial with Examples\",\"datePublished\":\"2016-05-15T16:36:21+00:00\",\"dateModified\":\"2022-09-04T13:41:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\"},\"wordCount\":1022,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg\",\"keywords\":[\"BootStrap Grid System\",\"Grid System Tutorial\",\"How to Draw Grid?\",\"JavaScript Framework\",\"Responsive Design\",\"Tutorial with Example\"],\"articleSection\":[\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\",\"url\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\",\"name\":\"Responsive Bootstrap grid system Tutorial with Examples\",\"isPartOf\":{\"@id\":\"https:\/\/jharaphula.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg\",\"datePublished\":\"2016-05-15T16:36:21+00:00\",\"dateModified\":\"2022-09-04T13:41:57+00:00\",\"description\":\"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.\",\"breadcrumb\":{\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg\",\"width\":750,\"height\":478,\"caption\":\"Responsive Bootstrap grid system Tutorial with Examples\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jharaphula.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Bootstrap grid system Tutorial with Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jharaphula.com\/#website\",\"url\":\"https:\/\/jharaphula.com\/\",\"name\":\"OneStop Shop\",\"description\":\"Blog for SEO Guest Posting, Digital Marketing or Home Remedies\",\"publisher\":{\"@id\":\"https:\/\/jharaphula.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jharaphula.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jharaphula.com\/#organization\",\"name\":\"OneStop Shop\",\"url\":\"https:\/\/jharaphula.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"contentUrl\":\"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg\",\"width\":409,\"height\":91,\"caption\":\"OneStop Shop\"},\"image\":{\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/tajinweb\",\"https:\/\/x.com\/guestpostingopp\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3\",\"name\":\"Nibedita Panda\",\"description\":\"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.\",\"sameAs\":[\"https:\/\/jharaphula.com\"],\"url\":\"https:\/\/jharaphula.com\/author\/nibeditap\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Bootstrap grid system Tutorial with Examples","description":"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.","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:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/","og_locale":"en_US","og_type":"article","og_title":"Responsive Bootstrap grid system Tutorial with Examples","og_description":"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.","og_url":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/","og_site_name":"OneStop Shop","article_publisher":"https:\/\/www.facebook.com\/tajinweb","article_published_time":"2016-05-15T16:36:21+00:00","article_modified_time":"2022-09-04T13:41:57+00:00","og_image":[{"width":750,"height":478,"url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg","type":"image\/jpeg"}],"author":"Nibedita Panda","twitter_misc":{"Written by":"Nibedita Panda","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#article","isPartOf":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/"},"author":{"name":"Nibedita Panda","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3"},"headline":"Responsive Bootstrap grid system Tutorial with Examples","datePublished":"2016-05-15T16:36:21+00:00","dateModified":"2022-09-04T13:41:57+00:00","mainEntityOfPage":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/"},"wordCount":1022,"commentCount":0,"publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"image":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg","keywords":["BootStrap Grid System","Grid System Tutorial","How to Draw Grid?","JavaScript Framework","Responsive Design","Tutorial with Example"],"articleSection":["Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/","url":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/","name":"Responsive Bootstrap grid system Tutorial with Examples","isPartOf":{"@id":"https:\/\/jharaphula.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage"},"image":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg","datePublished":"2016-05-15T16:36:21+00:00","dateModified":"2022-09-04T13:41:57+00:00","description":"To design responsive mobile first fluid layout BootStrap provides grid system. To implement BootStrap grid system read our tutorial.","breadcrumb":{"@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#primaryimage","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2016\/05\/responsive-design.jpg","width":750,"height":478,"caption":"Responsive Bootstrap grid system Tutorial with Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/jharaphula.com\/bootstrap-grid-system-tutorial-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jharaphula.com\/"},{"@type":"ListItem","position":2,"name":"Responsive Bootstrap grid system Tutorial with Examples"}]},{"@type":"WebSite","@id":"https:\/\/jharaphula.com\/#website","url":"https:\/\/jharaphula.com\/","name":"OneStop Shop","description":"Blog for SEO Guest Posting, Digital Marketing or Home Remedies","publisher":{"@id":"https:\/\/jharaphula.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jharaphula.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jharaphula.com\/#organization","name":"OneStop Shop","url":"https:\/\/jharaphula.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/","url":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","contentUrl":"https:\/\/jharaphula.com\/wp-content\/uploads\/2023\/10\/logo.jpg","width":409,"height":91,"caption":"OneStop Shop"},"image":{"@id":"https:\/\/jharaphula.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/tajinweb","https:\/\/x.com\/guestpostingopp"]},{"@type":"Person","@id":"https:\/\/jharaphula.com\/#\/schema\/person\/129213d91cdcccd8f9396797c56e7dc3","name":"Nibedita Panda","description":"Mrs. Nibedita is a housewife. She is passionate about to write various information's depending upon the growing market trend. In our unit she takes care of many major releases. Her contribution is most valued for us.","sameAs":["https:\/\/jharaphula.com"],"url":"https:\/\/jharaphula.com\/author\/nibeditap\/"}]}},"_links":{"self":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1618","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/comments?post=1618"}],"version-history":[{"count":0,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/posts\/1618\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media\/1864"}],"wp:attachment":[{"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/media?parent=1618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/categories?post=1618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jharaphula.com\/wp-json\/wp\/v2\/tags?post=1618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}