{"id":13770,"date":"2016-07-06T16:15:49","date_gmt":"2016-07-06T13:15:49","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=13770"},"modified":"2018-01-08T13:18:00","modified_gmt":"2018-01-08T11:18:00","slug":"bootstrap-gallery-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/","title":{"rendered":"Bootstrap gallery example"},"content":{"rendered":"<p>The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this example I\u2019m going to show you how you can use a bootstrap template to those pages.<br \/>\n&nbsp;<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. Get a template<\/h2>\n<p>In this example we are going to use <a href=\"http:\/\/www.bootstrapzero.com\/bootstrap-template\/hydrogen-bootstrap-template\">hydrogen template<\/a>.\u00a0This template has an images grid. Each image has a description below it. You can see the full-size image and navigate across all the gallery on a modal window. Below we see how this looks like:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen.jpg\"><img decoding=\"async\" class=\"wp-image-13834 size-full aligncenter\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen.jpg\" alt=\"hydrogen\" width=\"800\" height=\"530\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen.jpg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen-300x199.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen-768x509.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h2>2. Items structure<\/h2>\n<p>Each element on the gallery is defined inside a <code>div<\/code> with <code>class=\"item\".<\/code>\u00a0It has two divs inside which correspond to image and description. The structure is the following:<\/p>\n<pre class=\"brush:html\">&lt;div class=\"item\"&gt;\r\n  &lt;div class=\"animate-box\"&gt;\r\n     &lt;a href=\"\" class=\"image-popup fh5co-board-img\" title=\"\"&gt;\r\n     &lt;img src=\"\" alt=\"\"&gt;&lt;\/a&gt;\r\n  &lt;\/div&gt; \r\n  &lt;div class=\"fh5co-desc\"&gt; \r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<h2>3. Set an Item<\/h2>\n<h3>3.1 Image<\/h3>\n<p>The image is set twice:<\/p>\n<ul>\n<li>The <code>img src<\/code>\u00a0 indicates what image will be shown on the gallery<\/li>\n<li>The <code>a href <\/code>indicates the full-size image which will be displayed when the user clicks on the gallery&#8217;s image.<\/li>\n<\/ul>\n<p>I added the same image on both of them. You don&#8217;t need to worry about the image&#8217;s size on the gallery view because it&#8217;s resized automatically.<\/p>\n<h3>3.2 Title and subtitle<\/h3>\n<p>The <code>title<\/code> is displayed when the user puts the cursor on the image and in a footer is displayed when the image is shown on a modal window. I set it and added a paragraph with title and description; my final structure looks like this:<\/p>\n<pre class=\"brush:html\">&lt;div class=\"item\"&gt;\r\n  &lt;div class=\"animate-box\"&gt;\r\n    &lt;a href=\"images\/sanJuan.jpg\" class=\"image-popup fh5co-board-img\" title=\"Title...\"&gt;\r\n    &lt;img src=\"images\/sanJuan.jpg\" &gt;&lt;\/a&gt;\r\n  &lt;\/div&gt;\r\n  &lt;div class=\"fh5co-desc\"&gt;\r\n     &lt;p&gt;&lt;strong&gt;Title...&lt;\/strong&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0&lt;\/br&gt;Description\r\n\u00a0\u00a0\u00a0\u00a0 &lt;\/p&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p><b>Note:<\/b> In this structure, you need to set the title twice in order for the user to see it on a gallery and modal view. This structure is only a suggestion, you can experiment as you like.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/gallery.jpg\"><img decoding=\"async\" class=\"wp-image-13833 size-full aligncenter\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/gallery.jpg\" alt=\"gallery\" width=\"800\" height=\"403\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/gallery.jpg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/gallery-300x151.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/gallery-768x387.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h2>4. Full-size view<\/h2>\n<p>If you have the structure like the previous one, you don&#8217;t need to do anything. The images will be distributed on the page correctly and the modal view with the navigation will be working good.\u00a0Then enjoy the magic! ;)<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/modalHydrogen.jpg\"><img decoding=\"async\" class=\"aligncenter wp-image-13836 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/modalHydrogen.jpg\" alt=\"modalHydrogen\" width=\"800\" height=\"367\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/modalHydrogen.jpg 800w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/modalHydrogen-300x138.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/modalHydrogen-768x352.jpg 768w\" sizes=\"(max-width: 800px) 100vw, 800px\" \/><\/a><\/p>\n<h2>5. Grid columns<\/h2>\n<p>You can change the number of columns to be displayed on the grid. The corresponding properties to do it are on salvattore.css file.<\/p>\n<p>I created a rule to define 5 columns on the grid. The <code>width<\/code> property is set to 20% (100% screen size divided by 5 = 20%)<\/p>\n<pre class=\"brush:css\">.size-1of5 {\r\n    width: 20%;\r\n}<\/pre>\n<p>This template uses responsive web design, which means that the number of columns will be decreasing according to the screen size. You can define how much columns will be displayed on each screen size. You need to create a group\u00a0 of rules, these rules will be applied when the condition is true.<\/p>\n<p>The example below indicates the rules to apply when the screen size is smaller than 450px.<\/p>\n<pre class=\"brush:css\">@media screen and (max-width: 450px) {s\r\n\u00a0\u00a0\u00a0 #fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 content: '1 .column.size-1of1';\r\n\u00a0\u00a0\u00a0 }\r\n}<\/pre>\n<p>You can see all the column rules on salvattore.css<\/p>\n<p><span style=\"text-decoration: undeline;\">salvattore.css<\/span><\/p>\n<pre class=\"brush:css\">\/* Base styles *\/\r\n.column {\r\n    float: left;\r\n}\r\n@media screen and (max-width: 480px) {\r\n    .column {\r\n        float: none;\r\n        position: relative;\r\n        clear: both;\r\n    }\r\n}\r\n.size-1of4 {\r\n    width: 25%;\r\n}\r\n.size-1of3 {\r\n    width: 33.333%;\r\n}\r\n.size-1of2 {\r\n    width: 50%;\r\n}\r\n\r\n.size-1of5 {\r\n    width: 20%;\r\n}\r\n\r\n\r\n#fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0 content: '5 .column.size-1of5';\r\n}\r\n\r\n\/* Configurate salvattore with media queries *\/\r\n@media screen and (max-width: 450px) {\r\n\u00a0\u00a0\u00a0 #fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 content: '1 .column.size-1of1';\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\n@media screen and (min-width: 451px) and (max-width: 700px) {\r\n\u00a0\u00a0\u00a0 #fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 content: '3 .column.size-1of3';\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\n@media screen and (min-width: 701px) and (max-width: 850px) {\r\n\u00a0\u00a0\u00a0 #fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 content: '4 .column.size-1of4';\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n\r\n@media screen and (min-width: 851px) {\r\n\u00a0\u00a0\u00a0 #fh5co-board[data-columns]::before {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 content: '5 .column.size-1of5';\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n<\/pre>\n<p>With these rules the gallery will show 1, 3, 4 or 5 columns, depending on the screen size. The results resemble the following:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/columns.jpg\"><img decoding=\"async\" class=\"wp-image-13832 size-full aligncenter\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/columns.jpg\" alt=\"columns\" width=\"850\" height=\"205\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/columns.jpg 850w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/columns-300x72.jpg 300w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/columns-768x185.jpg 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><\/p>\n<h2>6. Download<\/h2>\n<p>This was a Bootstrap gallery example.<\/p>\n<div class=\"download\">You can download the full example from here:\u00a0<strong><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/07\/hydrogen.zip\">Hydrogen Gallery example<\/a>.<\/strong><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this example I\u2019m going to show you how you can use a bootstrap template to those pages. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [ulp id=&#8217;57DHuNTHJ2qczaGz&#8217;] 1. Get &hellip;<\/p>\n","protected":false},"author":167,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-13770","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap gallery example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this\" \/>\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-gallery-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap gallery example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-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=\"2016-07-06T13:15:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:18:00+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=\"Nallely Novella\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ANallelyCN\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nallely Novella\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 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-gallery-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/\"},\"author\":{\"name\":\"Nallely Novella\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4a243281bf0f3a607738c8dc61ba1925\"},\"headline\":\"Bootstrap gallery example\",\"datePublished\":\"2016-07-06T13:15:49+00:00\",\"dateModified\":\"2018-01-08T11:18:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/\"},\"wordCount\":492,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"articleSection\":[\"Bootstrap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/\",\"name\":\"Bootstrap gallery example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2016-07-06T13:15:49+00:00\",\"dateModified\":\"2018-01-08T11:18:00+00:00\",\"description\":\"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-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-gallery-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 gallery 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\/4a243281bf0f3a607738c8dc61ba1925\",\"name\":\"Nallely Novella\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c41314f2fb2f1f1a9e8d079a1a6ce7d324dd8d33028c686858c7d8786cb4c732?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c41314f2fb2f1f1a9e8d079a1a6ce7d324dd8d33028c686858c7d8786cb4c732?s=96&d=mm&r=g\",\"caption\":\"Nallely Novella\"},\"description\":\"Nallely is an Engineer in Information and Communication Technologies from TESCo university in Mexico, she has developed different projects on Java, Html, CSS, JavaScript, PHP and Android technologies. Nallely is a certified Java SE and Android developer. She is interested in User Experience, Smart Cities and Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\/\",\"https:\/\/x.com\/ANallelyCN\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/nallely-novella\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap gallery example - Web Code Geeks - 2026","description":"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this","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-gallery-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap gallery example - Web Code Geeks - 2026","og_description":"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-07-06T13:15:49+00:00","article_modified_time":"2018-01-08T11:18:00+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":"Nallely Novella","twitter_card":"summary_large_image","twitter_creator":"@ANallelyCN","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Nallely Novella","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/"},"author":{"name":"Nallely Novella","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4a243281bf0f3a607738c8dc61ba1925"},"headline":"Bootstrap gallery example","datePublished":"2016-07-06T13:15:49+00:00","dateModified":"2018-01-08T11:18:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/"},"wordCount":492,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","articleSection":["Bootstrap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/","name":"Bootstrap gallery example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2016-07-06T13:15:49+00:00","dateModified":"2018-01-08T11:18:00+00:00","description":"The majority of\u00a0the web sites have a page where they display a great amount of\u00a0images. These pages are the well known gallery or portfolio pages. In this","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-gallery-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-gallery-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 gallery 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\/4a243281bf0f3a607738c8dc61ba1925","name":"Nallely Novella","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c41314f2fb2f1f1a9e8d079a1a6ce7d324dd8d33028c686858c7d8786cb4c732?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c41314f2fb2f1f1a9e8d079a1a6ce7d324dd8d33028c686858c7d8786cb4c732?s=96&d=mm&r=g","caption":"Nallely Novella"},"description":"Nallely is an Engineer in Information and Communication Technologies from TESCo university in Mexico, she has developed different projects on Java, Html, CSS, JavaScript, PHP and Android technologies. Nallely is a certified Java SE and Android developer. She is interested in User Experience, Smart Cities and Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com\/","https:\/\/x.com\/ANallelyCN"],"url":"https:\/\/www.webcodegeeks.com\/author\/nallely-novella\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13770","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\/167"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=13770"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/13770\/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=13770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=13770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=13770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}