Rich Snippets Breadcrumb in a Recipe - seo

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>

Related

Dependency Injection not working when I using taghelper to trigger controller

I am using tag helper to activate the controller but when I use specifically asp-controller and asp-action it doesn't help me to enable dependency injection service and
and the website crashed,
InvalidOperationException: Unable to resolve service for type 'Application.Interfaces.Repositories.ILessonService' while attempting to activate 'API.Controllers.LessonController'
but when I use href in ... then works normally
<a class="collapse-item" asp-action="Index" asp-controller="Lesson">Reading</a>
<a class="collapse-item" href="/Lesson/Index">Listening</a>
This is whole view:
<!DOCTYPE html>
<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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Dashboard</title>
<!-- Custom fonts for this template-->
<link href="~/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="~/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/Home/Index">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">SB Admin <sup>2</sup></div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a class="nav-link" href="/Home/Index">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Interface
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="true" aria-controls="collapseTwo">
<i class="fas fa-fw fa-cog"></i>
<span>Admin</span>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Người dùng</h6>
<a class="collapse-item" asp-controller="User" asp-action="Index">Quản lý người dùng</a>
<a class="collapse-item" href="cards.html">Cards</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseUtilities"
aria-expanded="true" aria-controls="collapseUtilities">
<i class="fas fa-fw fa-wrench"></i>
<span>Giáo Viên</span>
</a>
<div id="collapseUtilities" class="collapse" aria-labelledby="headingUtilities"
data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Lesson</h6>
<a class="collapse-item" asp-action="Index" asp-controller="Lesson">Reading</a>
<a class="collapse-item" href="/Lesson/Index">Listening</a>
<a class="collapse-item" href="/Teacher/Speaking">Speaking</a>
<a class="collapse-item" href="/Teacher/Writting">writting</a>
<a class="collapse-item" href="/Teacher/Test">Testing</a>
</div>
</div>
</li>
<!-- Nav Item - Utilities Collapse Menu -->
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
Addons
</div>
<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages"
aria-expanded="true" aria-controls="collapsePages">
<i class="fas fa-fw fa-folder"></i>
<span>Pages</span>
</a>
<div id="collapsePages" class="collapse" aria-labelledby="headingPages" data-parent="#accordionSidebar">
<div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">Login Screens:</h6>
<a class="collapse-item" href="login.html">Login</a>
<a class="collapse-item" href="register.html">Register</a>
<a class="collapse-item" href="forgot-password.html">Forgot Password</a>
<div class="collapse-divider"></div>
<h6 class="collapse-header">Other Pages:</h6>
<a class="collapse-item" href="404.html">404 Page</a>
<a class="collapse-item" href="blank.html">Blank Page</a>
</div>
</div>
</li>
<!-- Nav Item - Charts -->
<li class="nav-item">
<a class="nav-link" href="charts.html">
<i class="fas fa-fw fa-chart-area"></i>
<span>Charts</span>
</a>
</li>
<!-- Nav Item - Tables -->
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-table"></i>
<span>Tables</span>
</a>
</li>
<!-- Divider -->
<hr class="sidebar-divider d-none d-md-block">
<!-- Sidebar Toggler (Sidebar) -->
<div class="text-center d-none d-md-inline">
<button class="rounded-circle border-0" id="sidebarToggle"></button>
</div>
<!-- Sidebar Message -->
<div class="sidebar-card">
<img class="sidebar-card-illustration mb-2" src="~/img/undraw_rocket.svg" alt="">
<p class="text-center mb-2"><strong>SB Admin Pro</strong> is packed with premium features, components, and more!</p>
<a class="btn btn-success btn-sm" href="https://startbootstrap.com/theme/sb-admin-pro">Upgrade to Pro!</a>
</div>
</ul>
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Nav Item - Search Dropdown (Visible Only XS) -->
<li class="nav-item dropdown no-arrow d-sm-none">
<a class="nav-link dropdown-toggle" href="#" id="searchDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-search fa-fw"></i>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
aria-labelledby="searchDropdown">
<form class="form-inline mr-auto w-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small"
placeholder="Search for..." aria-label="Search"
aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
</div>
</li>
<!-- Nav Item - Alerts -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<!-- Counter - Alerts -->
<span class="badge badge-danger badge-counter">3+</span>
</a>
<!-- Dropdown - Alerts -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="alertsDropdown">
<h6 class="dropdown-header">
Alerts Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-primary">
<i class="fas fa-file-alt text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 12, 2019</div>
<span class="font-weight-bold">A new monthly report is ready to download!</span>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-success">
<i class="fas fa-donate text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 7, 2019</div>
$290.29 has been deposited into your account!
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="mr-3">
<div class="icon-circle bg-warning">
<i class="fas fa-exclamation-triangle text-white"></i>
</div>
</div>
<div>
<div class="small text-gray-500">December 2, 2019</div>
Spending Alert: We've noticed unusually high spending for your account.
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Show All Alerts</a>
</div>
</li>
<!-- Nav Item - Messages -->
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<!-- Counter - Messages -->
<span class="badge badge-danger badge-counter">7</span>
</a>
<!-- Dropdown - Messages -->
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">
Message Center
</h6>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_1.svg"
alt="">
<div class="status-indicator bg-success"></div>
</div>
<div class="font-weight-bold">
<div class="text-truncate">
Hi there! I am wondering if you can help me with a
problem I've been having.
</div>
<div class="small text-gray-500">Emily Fowler · 58m</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_2.svg"
alt="">
<div class="status-indicator"></div>
</div>
<div>
<div class="text-truncate">
I have the photos that you ordered last month, how
would you like them sent to you?
</div>
<div class="small text-gray-500">Jae Chun · 1d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="~/img/undraw_profile_3.svg"
alt="">
<div class="status-indicator bg-warning"></div>
</div>
<div>
<div class="text-truncate">
Last month's report looks great, I am very happy with
the progress so far, keep up the good work!
</div>
<div class="small text-gray-500">Morgan Alvarez · 2d</div>
</div>
</a>
<a class="dropdown-item d-flex align-items-center" href="#">
<div class="dropdown-list-image mr-3">
<img class="rounded-circle" src="https://source.unsplash.com/Mv9hjnEUHR4/60x60"
alt="">
<div class="status-indicator bg-success"></div>
</div>
<div>
<div class="text-truncate">
Am I a good boy? The reason I ask is because someone
told me that people say this to all dogs, even if they aren't good...
</div>
<div class="small text-gray-500">Chicken the Dog · 2w</div>
</div>
</a>
<a class="dropdown-item text-center small text-gray-500" href="#">Read More Messages</a>
</div>
</li>
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Welcome</span>
<img class="img-profile rounded-circle"
src="~/img/undraw_profile.svg">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="/Profile/Index">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
#User.Identity.Name
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<form asp-controller="User" asp-action="Logout" method="post">
<button type="submit" class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</button>
</form>
#* <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
</a> *#
</div>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
#RenderBody()
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2020</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="~/vendor/jquery/jquery.min.js"></script>
<script src="~/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="~/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="~/js/sb-admin-2.min.js"></script>
<!-- Page level plugins -->
<script src="~/vendor/chart.js/Chart.min.js"></script>
<!-- Page level custom scripts -->
<script src="~/js/demo/chart-area-demo.js"></script>
<script src="~/js/demo/chart-pie-demo.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
#RenderSection("scripts", required: false)
</body>
</html>
Here is the controller:
public class LessonController : ControllerBase
{
private readonly ILessonService _lessonService;
public LessonController(ILessonService lessonService)
{
_lessonService = lessonService;
}
// GET: /<controller>/
[HttpGet]
public async Task<IActionResult> Index([FromQuery] GetLessonsRequest request)
{
var lessons = await _lessonService.GetGuidelinesPaging(request);
return Ok(lessons);
}
}
Startup.cs:
public void ConfigureServices(IServiceCollection services)
{
services.AddDbContext<ToeicOnlineContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("MvcToeicContext")));
services.AddApplicationLayer();
services.AddAutoMapper(typeof(Startup));
services.AddControllers().AddFluentValidation();
//DI
services.AddIdentity<User, Role>()
.AddEntityFrameworkStores<ToeicOnlineContext>()
.AddDefaultTokenProviders();;
services.AddScoped<IUserClaimsPrincipalFactory<User>, UserClaimsPrincipalFactory<User, Role>>();
services.AddTransient<UserManager<User>, UserManager<User>>();
services.AddTransient<SignInManager<User>, SignInManager<User>>();
services.AddTransient<RoleManager<Role>, RoleManager<Role>>();
services.AddTransient<ILevelRepositoryAsync, LevelRepositoryAsync>();
services.AddTransient<IClassRepositoryAsync, ClassRepositoryAsync>();
services.AddTransient<ILessonService, LessonService>();
services.AddTransient<ICategoryRepositoryAsync, CategoryRepositoryAsync>();
services.AddTransient(typeof(IGenericRepositoryAsync<>), typeof(GenericRepositoryAsync<>));
services.AddTransient<IUserService, UserService>();
services.AddTransient<IRoleService, RoleService>();
services.AddSwaggerExtension(Configuration);
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseSwagger();
app.UseSwaggerUI(c => c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1"));
}
app.UseHttpsRedirection();
app.UseAuthentication();
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllers();
});
}
Update
It works normally with swagger, but when I use another project to call API the error like above occurs.

I found that there is a LessonContrller in your ToeicOnlineAdminApp and a same name controller in the api project, which cause this problem. The anchor with tag helper generates the url as api/lesson that targets the api controller. and the anchor with href="/Lesson/Index" targets that controller in your current project.

Bootstrapv4.0.0-beta - Carousel Controls not working

I cannot get the Carousel Controls to work in Bootstrap v4.0.0-beta. Kind of strange as the Indicators work properly.
Anybody with the same problem? Bellow is the code for the Carousel implementation.
Any help would be highly appreciated.
Thanks!
<div id="my-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#my-carousel" data-slide-to="0" class="active"></li>
<li data-target="#my-carousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
<div class="carousel-item">
<div class="view hm-black-light">
<!-- CONTENT -->
<div class="full-bg-img"></div>
</div>
<div class="carousel-caption overlay">
<div class="flex-center animated fadeIn">
<!-- DETAIL -->
</div>
</div>
</div>
</div>
<!--Controls-->
<a class="carousel-control-prev" href="#my-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#my-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I had the same problem here. All I did is to copy these plugins from the Bootstrap's Website. Controls are working properly now.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Bootstrap tab content won't open after clicking tab link

Code looks fine in my opinion, I basically used the example code from the docs. jQuery is also referenced before bootstrap.js as well. What could be the issue here? When I click on any other tab that's not active, it still only displays the first tabs content.
<section id="how-it-works">
<div class="container">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab" aria-controls="tab1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li>
<a href="#tab2" data-toggle="tab" aria-controls="tab2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li>
<a href="#tab3" data-toggle="tab" aria-controls="tab3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li>
<a href="#tab4" data-toggle="tab" aria-controls="tab4" role="tab" title="That's It!">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="#tab1" role="tabpanel">
<h3>Step 1</h3>
<p>This is step 1</p>
</div>
<div class="tab-pane" id="#tab2" role="tabpanel">
<h3>Step 2</h3>
<p>This is step 2</p>
</div>
<div class="tab-pane" id="#tab3" role="tabpanel">
<h3>Step 3</h3>
<p>This is step 3</p>
</div>
<div class="tab-pane" id="#tab4" role="tabpanel">
<h3>Step 4</h3>
<p>That's It!</p>
</div>
</div>
</div>
</div>
</section>

Try removing the # in the ID of each tab under tab content.
id="#tab4" to id="tab4"
Also, you tagged bootstrap 3 but the code you are using looks like it is from bootstrap 4.
https://v4-alpha.getbootstrap.com/components/navs/

Selenium - click the second prompt with same ID

I have a complex HTML like the below.There are at least two elements with data-automation-id='promptIcon' attribute. In Selenium IDE //*[#data-automation-id='promptIcon']/ selected the first occurrence (i.e. next to the label Category). Now I would like to click/select the second element with data-automation-id='promptIcon' attribute (next to the label Owner). How best to accomplish this?
<div class="GB-VO1SBAIJ">
<div class="GB-VO1SBNHJ" style="left: 0%;">
<div id="wd-EditPage-1$4296" class="GB-VO1SBOXH GB-VO1SBHXH GB-VO1SBJXH GB-VO1SBJN">
<div class="GB-VO1SBBYH">
<div class="GB-VO1SBJN" id="wd-PageContent-6$8263">
<div class="GB-VO1SBAJH">
<div class="GB-VO1SBIIH">
<div id="wd-Panel-6$8269" data-automation-id="panel" class="GB-VO1SBF1J GB-VO1SBJN">
<div class="gwt-Label GB-VO1SBJ1J GB-VO1SBI1J">
</div>
<div class="GB-VO1SBH1J">
<div class="GB-VO1SBAJH GB-VO1SBG1J">
<ul role="presentation" class="GB-VO1SBNHH GB-VO1SBGIH">
<li role="presentation" class="GB-VO1SBDHH GB-VO1SBJIH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$20858--uid318-formLabel">Category<span class="gwt-InlineLabel GB-VO1SBDIH"> Required</span>
</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Category</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$20858--uid318-formLabel" aria-invalid="false" tabindex="-2" id="15$20858--uid318" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJN GB-VO1SBIEL GB-VO1SBPFL GB-VO1SBNFL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="list" class="GB-VO1SBJUI GB-VO1SBOUI GB-VO1SBGFL" tabindex="-2">
<li class="GB-VO1SBNUI">
<div id="-uid331" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$2" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Common" data-automation-label="Common" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Common</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
<li class="GB-VO1SBNUI">
<div id="-uid332" role="menuitem" tabindex="-2" class="GB-VO1SBFUI GB-VO1SBMUI">
<div data-automation-id="selectedItem_2200$3" class="GB-VO1SBDVH">
<ul role="presentation" class="GB-VO1SBFUH GB-VO1SBLUH">
<li class="GB-VO1SBCVH">
<i title="Clear Value" class="GB-VO1SBCIF GB-VO1SBJ1I GB-VO1SBB1I GB-VO1SBHUH" data-automation-id="DELETE_charm" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</li>
</ul>
<div title="Absence" data-automation-label="Absence" data-automation-id="promptOption" class="gwt-Label GB-VO1SBEVH">Absence</div>
<ul class="GB-VO1SBFUH">
</ul>
</div>
</div>
</li>
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
<div aria-hidden="true" tabindex="0" style="display: none;" class="GB-VO1SBP3I" role="button" data-automation-morelinkexpanded="false" data-automation-id="wd-MoreLink">
<img alt="" draggable="false" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="gwt-Image GB-VO1SBPII GB-VO1SBB4I">
<span title="More (-3)" class="GB-VO1SBC4I">More (-3)</span>
</div>
</div>
</div>
</li>
<li role="presentation" class="GB-VO1SBDHH">
<div class="GB-VO1SBFHH">
<label data-automation-id="formLabel" id="15$26787--uid319-formLabel">Owner</label>
<div aria-hidden="true" class="GB-VO1SBGHH wd-5b94a643-7d98-473f-b3a4-be58aaf8d4f5">Owner</div>
</div>
<div class="GB-VO1SBHHH">
<div aria-labelledby="15$26787--uid319-formLabel" aria-invalid="false" tabindex="-2" id="15$26787--uid319" data-automation-id="responsiveMonikerInput" class="GB-VO1SBCFL GB-VO1SBJEL GB-VO1SBJN GB-VO1SBIEL">
<div class="GB-VO1SBHFL">
<ul data-automation-id="selectedItemList" role="menu" class="GB-VO1SBJUI GB-VO1SBGFL GB-VO1SBOUI" tabindex="-2">
</ul>
</div>
<span tabindex="0" data-automation-id="promptIcon" title="Prompt" class="GB-VO1SBBGL">
<i class="GB-VO1SBCIF GB-VO1SBCGL" data-automation-id="icon" role="presentation" data-icon-rtl-id="" data-icon-id="">
</i>
</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="GB-VO1SBIYH">
</div>
<footer class="GB-VO1SBCYH">
<div>
<div data-automation-id="toolbarSupportingWidgetsContainer" class="GB-VO1SBOOE GB-VO1SBAOE">
<div class="GB-VO1SBLNE">
<div class="GB-VO1SBMNE">
<div class="GB-VO1SBCOE">
</div>
<div class="GB-VO1SBPOE">
</div>
</div>
</div>
<div>
<div class="gwt-Label GB-VO1SBDNE">
</div>
</div>
</div>
<div class="GB-VO1SBCPE GB-VO1SBEPE">
</div>
</div>
</footer>
</div>
</div>
</div>

If you are using XPath, there is a easy way to do it:
//*[#data-automation-id='promptIcon'][2]
Explaining:
//*[#data-automation-id='promptIcon']
It is your actual xpath, will select any html tag that has a attr named "data-automation-id" with the exactly value "promptIcon".
[2]
The element node that you want to select. if you put [5], XPath will try to select the 5° result in this html, based in what note you're calling it.

How to get this Bootstrap navbar to have correct margins and align left when breaking?

I'm trying to get a Bootstrap 3 navbar collapse properly but still have two open issues:
the margins not equal:
when the navbar breaks, the icons are not left aligned with the text:
I know how I could add style fixes until I get this right, but I how do I solve this properly?
https://jsfiddle.net/edwardtanguay/v83aj4cn/3
<div class="container">
<nav class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar-collapse">
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-cog"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-plus"></span>
</a>
<a class="navbar-brand navbar-brand-centered" href="#">
<span class="glyphicon glyphicon-minus"></span>
</a>
<p class="navbar-text">Company Name</p>
<p class="navbar-text">CUSTOMER PORTAL</p>
<p class="navbar-text navbar-right">Contact Name</p>
<p class="navbar-text navbar-right">2016-04-14</p>
</div>
</div>
</div>
</nav>
</div>

There you go friend!
SOLUTION JDSFILE
Regards!