{"id":9271,"date":"2015-12-17T16:11:49","date_gmt":"2015-12-17T14:11:49","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=9271"},"modified":"2018-01-08T13:25:00","modified_gmt":"2018-01-08T11:25:00","slug":"bootstrap-panel-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/","title":{"rendered":"Bootstrap Panel Example"},"content":{"rendered":"

The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in bootstrap is a bordered box with some padding around its content.<\/p>\n

So, why do you need it? It’s always necessary to find ways to organize information inside a webpage. It helps maintain user interaction and enhance experience, as well as gives your page a systematic look.<\/p>\n

Panels are another simple and clean way of showing content. Panels may have headers and footers, and also include tables or list groups. For more creativity, contextual panels can be used.
\n 
\n 
\n[ulp id=’57DHuNTHJ2qczaGz’]<\/p>\n

1. Project Setup<\/h2>\n

The following requirements need to be met in order to continue adding panels with Bootstrap.<\/p>\n

1.1 Project Folder Setup<\/h3>\n

Create a new HTML file, which will be your main one, and make sure you have the following folder structure after downloading Boostrap.<\/p>\n

\"panel-1\"<\/a><\/p>\n

1.2 Main HTML Setup<\/h3>\n

Bootstrap already provides a base HTML, which contains links and references to all its’ libraries, including a CDN version of jQuery. Your main HTML file should have the following basic syntax inside:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <title>Bootstrap Panel Example<\/title>\r\n\r\n    <!-- Bootstrap -->\r\n    <link href=\"css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n  <\/head>\r\n  <body>\r\n\r\n    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->\r\n    <script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script>\r\n    <!-- Include all compiled plugins (below), or include individual files as needed -->\r\n    <script src=\"js\/bootstrap.min.js\"><\/script>\r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n
2. Default Example<\/h2>\n
Panels are created with the .panel<\/code> class, and content inside the panel has a .panel-body<\/code> class. By default, all the .panel<\/code> does is apply some basic border and padding to contain some content:<\/p>\n
\r\n<div class=\"panel panel-default\">\r\n    <div class=\"panel-body\">\r\n        Basic panel example\r\n    <\/div>\r\n<\/div>\r\n<\/pre>\n
The result in the browser would be:
\n\"panel-2\"<\/a><\/p>\n
3. Cases and Examples<\/h3>\n
The following sections introduces a series of examples of how you can customize and use the panel in Bootstrap.<\/p>\n
3.1 Panel with Heading<\/h3>\n
Easily add a heading container to your panel with .panel-heading<\/code>. You may also include any h1-h6 with a .panel-title<\/code> class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading<\/code>.<\/p>\n
For proper link coloring, be sure to place links in headings within .panel-title<\/code>.<\/p>\n
\r\n<div class=\"panel panel-default\">\r\n  <div class=\"panel-heading\">Panel Heading Without Title<\/div>\r\n  <div class=\"panel-body\">\r\n    Panel Content Goes Here\r\n  <\/div>\r\n<\/div>\r\n\r\n<div class=\"panel panel-default\">\r\n  <div class=\"panel-heading\">\r\n    <h3 class=\"panel-title\">Panel Title<\/h3>\r\n  <\/div>\r\n  <div class=\"panel-body\">\r\n    Panel Content Goes Here\r\n  <\/div>\r\n<\/div>\r\n<\/pre>\n
The result would be:
\n\"panel-3\"<\/a><\/p>\n
3.2 Panel with Footer<\/h3>\n
Wrap buttons or secondary text in .panel-footer<\/code>. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.<\/p>\n
\r\n<div class=\"panel panel-default\">\r\n  <div class=\"panel-body\">\r\n    Panel Content\r\n  <\/div>\r\n  <div class=\"panel-footer\">Panel Footer<\/div>\r\n<\/div>\r\n<\/pre>\n
The result would be:
\n\"panel-4\"<\/a><\/p>\n
3.3 Contextual Alternatives<\/h3>\n
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.<\/p>\n
\r\n<div class=\"panel panel-primary\">...<\/div>\r\n<div class=\"panel panel-success\">...<\/div>\r\n<div class=\"panel panel-info\">...<\/div>\r\n<div class=\"panel panel-warning\">...<\/div>\r\n<div class=\"panel panel-danger\">...<\/div>\r\n<\/pre>\n
The contextual classes would result in the following:
\n\"panel-5\"<\/a><\/p>\n
3.4 Panels with Tables<\/h3>\n
Add any non-bordered .table<\/code> within a panel for a seamless design. If there is a .panel-body<\/code>, we add an extra border to the top of the table for separation.<\/p>\n
\r\n<div class=\"panel panel-default\">\r\n  <!-- Default panel contents -->\r\n  <div class=\"panel-heading\">Panel heading<\/div>\r\n  <div class=\"panel-body\">\r\n    <p>...<\/p>\r\n  <\/div>\r\n\r\n  <!-- Table -->\r\n  <table class=\"table\">\r\n    ...\r\n  <\/table>\r\n<\/div>\r\n<\/pre>\n
The panel with a table in it would look like this:
\n\"panel-6\"<\/a><\/p>\n
3.5 Panels with List Groups<\/h3>\n
In addition to tables, Bootstrap also<\/p>\n
\r\n<div class=\"panel panel-default\">\r\n  <!-- Default panel contents -->\r\n  <div class=\"panel-heading\">Panel heading<\/div>\r\n  <div class=\"panel-body\">\r\n    <p>...<\/p>\r\n  <\/div>\r\n\r\n  <!-- List group -->\r\n  <ul class=\"list-group\">\r\n    <li class=\"list-group-item\">Cras justo odio<\/li>\r\n    <li class=\"list-group-item\">Dapibus ac facilisis in<\/li>\r\n    <li class=\"list-group-item\">Morbi leo risus<\/li>\r\n    <li class=\"list-group-item\">Porta ac consectetur ac<\/li>\r\n    <li class=\"list-group-item\">Vestibulum at eros<\/li>\r\n  <\/ul>\r\n<\/div>\r\n<\/pre>\n
The panel with list group would look like so:
\n\"panel-7\"<\/a><\/p>\n
4. Conclusion<\/h2>\n
To conclude, panels in Bootstrap are just another tool pre-styled and in harmony with other elements of this framework. It helps you show information in a clean and elegant way, so you don’t have to worry about organizing content. Contextual classes add extra design to the panels. All modifications are as easy as 1,2,3 meaning that you just have to add classes to div<\/code> elements.<\/p>\n
5. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: Bootstrap Panel<\/strong><\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in bootstrap is a bordered box with some padding around its content. So, why do you need it? It’s always necessary to find ways to organize information …<\/p>\n","protected":false},"author":75,"featured_media":8515,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"class_list":["post-9271","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap"],"yoast_head":"\nBootstrap Panel Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in\" \/>\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-panel-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap Panel Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-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:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-17T14:11:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T11:25: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=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\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:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"Bootstrap Panel Example\",\"datePublished\":\"2015-12-17T14:11:49+00:00\",\"dateModified\":\"2018-01-08T11:25:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/\"},\"wordCount\":521,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-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-panel-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/\",\"name\":\"Bootstrap Panel Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg\",\"datePublished\":\"2015-12-17T14:11:49+00:00\",\"dateModified\":\"2018-01-08T11:25:00+00:00\",\"description\":\"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-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-panel-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 Panel 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\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap Panel Example - Web Code Geeks - 2026","description":"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in","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-panel-example\/","og_locale":"en_US","og_type":"article","og_title":"Bootstrap Panel Example - Web Code Geeks - 2026","og_description":"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in","og_url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-12-17T14:11:49+00:00","article_modified_time":"2018-01-08T11:25: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":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"Bootstrap Panel Example","datePublished":"2015-12-17T14:11:49+00:00","dateModified":"2018-01-08T11:25:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/"},"wordCount":521,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-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-panel-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/","name":"Bootstrap Panel Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/11\/bootstrap-logo.jpg","datePublished":"2015-12-17T14:11:49+00:00","dateModified":"2018-01-08T11:25:00+00:00","description":"The aim of this example is to create and use Bootstrap panels. While not always necessary, sometimes you need to put your DOM in a box. A panel in","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/bootstrap\/bootstrap-panel-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-panel-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 Panel 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\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9271","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\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=9271"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/9271\/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=9271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=9271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=9271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}