Recently I've lost my star review on Google SERP. I know that reasons may be differents and various, but I would to be sure that I didn't made mistakes on code:
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Could Google have released an update?
The code snippet you provided in the main post: in isolation is not valid according to Google SDTT.
The review has no reviewed item specified
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<b><span itemprop="ratingValue">5</span> on
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
This is fixed by adding in itemprop="itemreviewed"
<div itemprop="aggregateRating" itemscope="" itemtype="http://schema.org/AggregateRating" style="text-align:right;">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<b><span itemprop="ratingValue">5</span> of
<span itemprop="bestRating">5</span> based on <span itemprop="reviewCount">857</span> reviews</b>
</div>
Instances of AggregateRating may appear as values for the following properties
Brand
CreativeWork
Event
Offer
Organization
Place
Product
Service
Source - http://schema.org/AggregateRating
Your full snippet in the comments (which I have simplified) is using the Organization schema http://schema.org/Organization and a different vocabulary for Review aggregate
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div class="review">
<div itemprop="review" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<img itemprop="rating" src="#" alt="173 recensioni" />
<span itemprop="count">173 recensioni</span>
</div>
</div>
</body>
</html>
Which has multiple errors.
The valid way would be:
Using data-vocabulary.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<h3 itemprop="itemreviewed">Mario Bros service</h3>
<p>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<em itemprop="average">5</em> out of <em itemprop="best"> 5 </em>
</span>
<b>based on</b>
<!-- How many people rated this item? -->
<em itemprop="votes">173</em> ratings.
</p>
<p>
<!-- How many people reviewed this item? -->
<em itemprop="count">45 </em> user reviews.
</p>
</div>
</div>
</body>
</html>
Using schema.org
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">24</em> user ratings.
</div>
</div>
</body>
</html>
You also mentioned in comments that they are products:
products such as curtains, roll-up, etc
This is Google's example from the Products data type:
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="dell-30in-lcd.jpg" />
<span itemprop="name">Dell UltraSharp 30" LCD Monitor</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">87</span>
out of <span itemprop="bestRating">100</span>
based on <span itemprop="ratingCount">24</span> user ratings
</div>
</div>
Modified for your criteria would be:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
</div>
</div>
</body>
</html>
Enchanced further:
<html itemscope itemtype="http://schema.org/Organization">
<body>
<div>
<h1 itemprop="name">Mario Bros</h1>
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="brand">Acme brand</span>
<img itemprop="image" src="curtains.jpg" />
<span itemprop="name">Acme brand Curtains</span>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<em itemprop="ratingValue">5</em> out of <em itemprop="bestRating">5</em> based on <em itemprop="ratingCount">173</em> reviews.
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<!--price is 1000, a number, with locale-specific thousands separator and decimal mark, and the € character is marked up with the machine-readable code "EUR" -->
<span itemprop="priceCurrency" content="EUR">€</span>
<span itemprop="price" content="1000.00">1,000.00</span>
<link itemprop="availability" href="http://schema.org/InStock" />
<span>In stock</span>
</div>
</div>
</div>
</body>
</html>
Related
Following this guide from Google. I am adding Microdata to my website's breadcrumbs.
When testing my own code, I am getting the error that the field "id" is missing, while it is not from what I can see and understand. Am I missing something here or is it a bug in the test tool of Google?
You can test yourself at https://search.google.com/test/rich-results/result with below code.
<html>
<head>
<title>Microdata test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<nav aria-label="breadcrumb" class="breadcrumb top">
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost/hikes-and-walks" href="http://localhost/hikes-and-walks" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Home</span></a> <meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost/hikes-and-walks/hikes/bulgaria" href="http://localhost/hikes-and-walks/hikes/bulgaria" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Bulgaria</span></a> <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item active" aria-current="page">
<span itemprop="name">Aleko hut to Zheleznitsa village</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
</div>
</div>
</div>
</body>
</html>
It is giving the error "Missing field 'id'":
It's probably due to some internal validations that are hard to grasp. It looks like itemid requires a specific URL structure. In this case either relative or absolute URL (protocol+root+tld) work, i.e.changing "http://localhost" to "http://localhost.site" passes the test. Relative URLs also work.
So, change itemid URL to:
absolute URL:
itemid="http://localhost.site/hikes-and-walks"
or relative URL:
itemid="/hikes-and-walks"
Also, these (valid) examples won't work:
urn:isbn:9780307476463
file:///ada/Analytical%20Engine/README.md
ftp://file
Here's the working code:
<html>
<head>
<title>Microdata test</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<nav aria-label="breadcrumb" class="breadcrumb top">
<ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost.site/hikes-and-walks" href="http://localhost/hikes-and-walks" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Home</span></a> <meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item">
<a itemid="http://localhost.site/hikes-and-walks/hikes/bulgaria" href="http://localhost/hikes-and-walks/hikes/bulgaria" itemprop="item" itemscope itemtype="https://schema.org/WebPage"><span itemprop="name">Bulgaria</span></a> <meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="breadcrumb-item active" aria-current="page">
<span itemprop="name">Aleko hut to Zheleznitsa village</span>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>
</div>
</div>
</div>
</body>
</html>
I have a layout with three rows. I would like the first row to have one column that spans all 12 columns at the xs size. At larger sizes I would like two columns, one 9 columns wide and one 3 columns wide. I have attempted this by adding the second column and making it hidden at xs and visible and 3 wide at sm.
However, doing so breaks the layout of my second row at larger screen sizes for some reason. I'm not sure why.
Code working before adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Page w/o Sidebar</li>
<li>Menu Item 3</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
Code broken after adding hidden column:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="../styles/StyleSheet1.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="hidden-xs col-sm-3 visible-sm ">
</div>
</div>
<div class="row-fluid">
<div class="col-xs-6 col-sm-3 col-sm-push-9">
<div id="side-bar">
This is the side bar
<ul class="list-group">
<li class="list-group-item active">item a</li>
<li class="list-group-item">item b</li>
<li class="list-group-item">item c</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div id="content">
<h2>This is the main content</h2>
</div>
</div>
</div>
<div class="row-fluid">
<div class="col-xs-12">
<div id="footer">
This is the footer
</div>
</div>
</div>
</div>
</body>
</html>
I seem to have figured out the solution. I'm setting the column that I want hidden as visible on small, medium, and large, and setting it to 3 columns on small screens or larger.
I also added a div between the rows with the clearfix class.
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="col-xs-12 col-sm-9">
<div id="header">
<h1>This will be the page header</h1>
<ul class="nav nav-tabs">
<li class="active">Home
</li>
<li>Page w/o Sidebar
</li>
<li>Menu Item 3
</li>
</ul>
</div>
</div>
<div class="visible-sm visible-md visible-lg col-sm-3">
<div id="logo">
<p>This is the hidden area</p>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row-fluid">
<!-- rest of the code from before -->
I'm updating Rich snippets on a recipe page and when testing the results in the Google Structured Data testing tool (https://developers.google.com/structured-data/testing-tool/). I get some errors due to the fact that the breadcrumb is in the scope of the recipe.
Is this a blocking error ?
What could be the resolution ? Some extra markup around the breadcrumb part ?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body class="" itemscope itemtype="http://schema.org/Recipe">
<h1><span itemprop="name">Baked Cheesy Dippers with Nacho Cheese Cheddar</span></h1>
<div class="extraPropeties">
<span itemprop="description">A fun way to serve chicken dippers and keep kids interested</span>
<span itemprop="recipeYield">4 Persons</span>
<span itemprop="nutrition" itemscope itemtype="http://schema.org/NutritionInformation">
<span itemprop="calories">11</span>
<span itemprop="fatContent">31</span>
<span itemprop="proteinContent">41</span>
<span itemprop="carbohydrateContent">51</span>
<span itemprop="fiberContent">61</span>
<span itemprop="cholesterolContent">71</span>
</span>
</div>
<div class="part2">
<div class="shortInfo">
<div class="shortInfoTile">
<div class="key">Preparation time</div>
<div class="value">
<span datetime="PT10M" itemprop="prepTime">10</span><span class="unit">'</span>
</div>
</div>
<div class="shortInfoTile">
<div class="key">Cooking time</div>
<div class="value">
<span datetime="PT20M" itemprop="cookTime">20</span><span class="unit">'</span>
</div>
</div>
<div class="shortInfoTile">
<div class="key">Nr of servings</div>
<div class="value">
<span>4</span>
</div>
</div>
</div>
</div>
<div class="breadcrumb">
<div class="wrapper">
<div class="typoMinusR">
<span class="word" id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemref='bc_1'>
<span class="first"></span>
<a href="/" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span class="last"></span>
</span>
<span class="word" id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child' itemref='bc_2'>
<span class="first"></span>
<a href="/recipes" itemprop="url">
<span itemprop="title">Recipes</span>
</a>
<span class="last"></span>
</span>
<span class="word" id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="first"></span>
<a href="/recipes/baked-cheesy-dippers-with-nachos-beans-cheddar" itemprop="url">
<span itemprop="title">Baked-Cheesy-Dippers-with-Nacho-Bean-Cheddar</span>
</a>
<span class="last"></span>
</span>
</div>
</div>
</div>
</body>
</html>
</html>
Nesting the http://data-vocabulary.org/Breadcrumb item in the http://schema.org/Recipe item is not a problem. Microdata does not care about the HTML5 nesting, unless a property is used (itemprop).
The problem in your case is that your 2nd and 3rd breadcrumb items (which have the child property) are not nested in the http://data-vocabulary.org/Breadcrumb item, but in the http://schema.org/Recipe item. This way they get associated with the recipe, which is of course not correct.
So the solution would be to nest the breadcrumb items, instead of using itemref.
<div class="breadcrumb">
<div class="wrapper">
<div class="typoMinusR">
<span id='bc_0' itemscope itemtype='http://data-vocabulary.org/Breadcrumb'>
<span class="word">
<a href="/" itemprop="url">
<span itemprop="title">Home</span>
</a>
<span class="last"></span>
</span>
<span id='bc_1' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range" itemprop="url">
<span itemprop="title">Our Range</span>
</a>
<span class="last"></span>
</span>
<span id='bc_2' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range/fish2" itemprop="url">
<span itemprop="title">Fish</span>
</a>
<span class="last"></span>
</span>
<span id='bc_3' itemscope itemtype='http://data-vocabulary.org/Breadcrumb' itemprop='child'>
<span class="word">
<span class="first"></span>
<a href="/range/fish2/inspirations" itemprop="url">
<span itemprop="title">Inspirations</span>
</a>
<span class="last"></span>
</span>
</span>
</span>
</span>
<span class="word currentitem">
<span class="first"></span>
<span class="label">Inspirations Fish Chargrills - Sun Ripened Tomato and Oregano</span>
<span class="last"></span>
</span>
</span>
</div>
</div>
</div>
I am getting "Warning: Incomplete microdata with schema.org." when validating my Prestashop 1.6 project with the Google Structured Data Testing Tool.
I include all required field for Products (https://support.google.com/webmasters/answer/146750?hl=en).
My code:
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">{$product->name}</span>
<span itemprop="description">{$product->description}</span>
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" />
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="EUR" />
<br />
<span itemprop="price">{$product->getPrice(true, $smarty.const.NULL, 2)}</span></span>
</div>
And URL to Google Testing Tools: http://www.google.com/webmasters/tools/richsnippets?q=http%3A%2F%2Fwww.decoracionna.es%2F
What do I need add to everything works properly?
Edit:
I posted the piece of html code of one product
<li class="ajax_block_product col-xs-12 col-sm-4 col-md-3 last-item-of-mobile-line">
<div class="product-container" itemscope="" itemtype="http://schema.org/Product">
<div class="left-block">
<div class="product-image-container">
<a class="product_img_link" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Jarrón de Vidrio Francés - Botella Grande" itemprop="url">
<img class="replace-2x img-responsive" src="http://www.decoracionna.es/1721-home_default/jarron-de-vidrio-frances-botella-grande.jpg" alt="Jarrón de Vidrio Francés - Botella Grande" title="Jarrón de Vidrio Francés - Botella Grande" width="250" height="250" itemprop="image">
</a>
<div class="content_price" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<span itemprop="price" class="price product-price"> 23,98 € </span>
<meta itemprop="priceCurrency" content="0">
</div>
<span class="new-box"></span>
</div>
</div>
<div class="right-block">
<h5 itemprop="name">
<a class="product-name" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Jarrón de Vidrio Francés - Botella Grande" itemprop="url"> Jarrón de Vidrio Francés - Botella Grande </a>
</h5>
<p class="product-desc" itemprop="description"> Gastos de envío por Pedido: 8.80€</p>
<div itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="content_price">
<span itemprop="price" class="price product-price"> 23,98 € </span>
<meta itemprop="priceCurrency" content="0">
</div>
<div class="button-container">
<a class="button ajax_add_to_cart_button btn btn-default" href="http://www.decoracionna.es/carro-de-la-compra?add=1&id_product=350367&" rel="nofollow" title="Añadir al carrito" data-id-product="350367">
<span>Añadir al carrito</span>
</a>
<a itemprop="url" class="button lnk_view btn btn-default" href="http://www.decoracionna.es/350367-jarron-de-vidrio-frances-botella-grande.html" title="Ver">
<span>Más</span>
</a>
</div>
<div class="product-flags"></div>
<span itemprop="offers" itemscope="" itemtype="http://schema.org/Offer" class="availability">
<span class="available-now">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</span>
</span>
</div>
</div>
</li>"
Thanks for reply.
Your usage of Microdata and Schema.org is not wrong. The Google Structured Data Testing Tool is just "complaining" that you did not specify all properties Google Search needs for displaying one of their Rich Snippets.
It seems that the culprit is the last Offer:
<span itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</span>
If you remove this or if you add, for example, a price property, Google’s SDTT doesn’t warn anymore.
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<link itemprop="availability" href="http://schema.org/InStock">En stock
<span itemprop="price">10</span>
</span>
If I understand your code correctly, it seems that this Offer is about the same offer as the previous Offer (where you specify price/priceCurrency). If that’s the case, you should merge them into one item.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">23,98</span> € <!-- I removed the currency symbol from the price property, and added the currency to the priceCurrency property -->
<meta itemprop="priceCurrency" content="EUR">
<link itemprop="availability" href="http://schema.org/InStock">En stock
</div>
I'm experiencing something strange, while trying out bootstrap with django. I copied the dashboard-example from the bootstrap-page (dashboard-example) into my django-project to play around a little bit. When I try to use the collapse navbar for smaller screen-sizes, the navbar is appearing, when I click the toggle-button. But if I click the toggle-button again, the navbar is not disappearing. I copied the example from bootstrap one-to-one. Why is the toggle-button not working as expected? Here is the generated html-code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Dashboard Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/dashboardtest.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="/static/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview <span class="sr-only">(current)</span></li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/sky" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img data-src="holder.js/200x200/auto/vine" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
</div>
<h2 class="sub-header">Section title</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
please put bootstrap CDN in that file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>