this code i'm using in not a mobile responsive - twitter-bootstrap-3

This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
This is what i am using bootstrap 3.3.1 this code is not mobile friendly kindly look into. when i open in mobile all content gets small instead of convert into grids.please tell me what do to make it mobile responsive..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- ====================================================
header section -->
<header class="top-header" >
<div class="container">
<div class="row">
<div class="col-xs-5 header-logo">
<br>
<img src="img/logo.png" alt="" class="img-responsive logo">
</div>
<div class="col-md-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a class="menu active" href="http://www.mysite" >Home</a></li>
<li><a class="menu" href="#products">our products </a></li>
<li><a class="menu" href="#contact"> contact us</a></li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header> <!-- end of header area -->
<section class="slider" id="home">
<div class="container-fluid">
<div class="row">
<div id="carouselHacked" class="carousel slide carousel-fade" data-ride="carousel">
<div class="header-backup"></div>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
<div class="item">
<img src="img/-slider.png" alt="">
<div class="carousel-caption">
<<h1></h1>
<p></p>
<button>button</button>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carouselHacked" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carouselHacked" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
<br />
<div class="container" id="products">
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/women-care.jpg" style="width: 140px; height: 140px;">
<h2>Women Care</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/man-power.jpg" style="width: 140px; height: 140px;">
<h2>Man Power</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
<div class="row">
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-xs-4">
<img class="img-responsive" src="img/" style="width: 140px; height: 140px;">
<h2>Product Name</h2>
<p>product description</p>
<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
</div><!-- /.col-md-4 -->
</div>
</div>
<!-- map section -->
<section class="api-map" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 map" id="map"></div>
</div>
</div>
</section><!-- end of map section -->
<!-- contact section starts here -->
<section class="contact">
<div class="container">
<div class="row">
<div class="contact-caption clearfix">
<div class="contact-Product Name text-center">
<h2>contact us</h2>
</div>
<div class="col-md-5 contact-info text-left">
<h3>contact information</h3>
<div class="info-detail">
<ul><li><i class="fa fa-calendar"></i><span>Monday - Sunday:</span> 24X7</li></ul>
<ul><li><i class="fa fa-map-marker"></i><span>Address:</span></li></ul>
<ul><li><i class="fa fa-phone"></i><span>Telephone:</span> </li></ul>
<ul><li><i class="fa fa-envelope"></i><span>Email:</span> info#mysite</li></ul>
</div>
</div>
<div class="col-md-6 col-md-offset-1 contact-form">
<h3>leave us a message</h3>
<form class="form">
<input class="name" type="text" placeholder="Name">
<input class="email" type="email" placeholder="Email">
<input class="phone" type="text" placeholder="Phone No:">
<textarea class="message" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
<input class="submit-btn" type="submit" value="SUBMIT">
</form>
</div>
</div>
</div>
</div>
</section><!-- end of contact section -->
<!-- footer starts here -->
<footer class="footer clearfix">
<div class="container">
<div class="row">
<div class="col-xs-6 footer-para">
<p><i style="color:white;">©</i> <i style="color:white;">mysite</i> All right reserved</p>
</div>
<div class="col-xs-6 text-right">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-skype"></i>
</div>
</div>
</div>
</footer>
<!-- script tags
============================================================= -->
<script src="js/jquery-2.1.1.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/gmaps.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>

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.

Bootstrap 3 : Only one modal works

After upgrading to bootstrap 3.3.7 only one works from my modals.. the rest of them only displays backdrop..
I tried using modal examples just to check if the problem is in my modal code.. but still it only displays backdrop..
whats weird the modal works if I triggered them using this javascript.
<script>
$('.myModal').on('click',function(){
$('.modal-body').load('content.html',function(){
$('#myModal').modal({show:true});
});
});
</script>
my files
index.php
<?php
ob_start();
include('dbcon.php');
include('header.php');
?>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<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="#"></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown"> Login
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Student</li>
<li>Teacher</li>
</ul>
</li>
<li class="active"> Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<?php include ('modal_student.php'); ?>
<?php include ('modal_peer.php'); ?>
<?php include ('modal.php'); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/
jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body></html>
modal_student.php
<div class="modal fade" id="student" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">×
</button>
<strong>Log in</strong> Please fill in the details below...
</div>
</div>
<form class="form-horizontal" method="post" style="margin-left: 54px;">
<div class="form-group">
<label class="control-label" for="inputEmail">LRN</label>
<div class="controls"> <input name="lrn_number"
id="inputEmail" placeholder=" Input your 11 digit LRN" required />
</div>
</div>
<div class="form-group">
<div class="controls">
<button type="submit" name="login" class="btn btn-info"><i
class="icon-signin icon-large"></i> Sign in</button>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i>close</button>
</div>
</div>
Modal.php
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<p><div class="alert alert-danger">Are you Sure you want logout?</p>
</div>
<hr>
<div class="modal-footer">
<button class="btn btn-inverse" data-dismiss="modal" aria-hidden="true"><i
class="icon-remove icon-large"></i> No</button>
<a href="logout.php" class="btn btn-primary"><i class="icon-ok icon-large">
</i> Yes</a>
</div>
</div>

I'm guessing you've taken a look at this?
https://getbootstrap.com/docs/3.3/javascript/#modals.
Also in your tags make sure that bootstrap.js comes before bootstrap.css

Navigating multiple carousel items with bootstrap 3

How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next = next.next();
if (next.length>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>

There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ

Need correct bootstrap classes for Paypal

I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks

demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>

Bootstrap carousel sliding too far

I am building my first site with bootstrap. it is going pretty good so far.
The only problem I haven't been able to fix is:
The bootstrap carousel is sliding to far. I have 3 items in carousel each has 5 pictures.
If I press the back button repeatedly (doesn't mather how many times), the carousel cycles trough the 3 items no problem.
but if I press the next button repeatedlly, after the third times it does not reset to 0.
What could be causing this?
<div class="row">
<div class="col-sm-12 thumb_box">
<div class="thumbs">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row thumb_row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>

I found the problem.
If you are having this problem check your div elements.
Something was wrong in my hierarchy of divs.