We Keep Coding

Create an image slider for multiple diffrent galleries in ASP NET

I have a map where anyone can add a custom marker with info and images.
I want to create for each marker with more than 1 image, a slider.
Now each marker looks something like that:
I want that if there are multiple images for lets say for 'n' markers, I want to make all the images hidden except the first one and make a slider for each one of them.
This is the code now:
foreach (var _Data in Model)
{
<div class="popup" id="overlay-container-#_Data.Id">
<div class="overlay">
<div class="content"> #*Content <-Text->*#
<div class="close-btn" onclick="togglePopup(#_Data.Id)">×</div>
<h3><u>Category</u>: #_Data.category</h3><br />
<h5><u>Title</u>: #_Data.title</h5>
<u>Description</u>: <br /> <textarea disabled cols="50" rows="10" style="resize:none; background: none; border:hidden" class="accept-policy"> #_Data.remarks </textarea> <br />
<b>Urgence</b>: #_Data.statUrgence <br />
<br />
<div id="slideshow-container" style="height:200px; width:380px; display: flex; overflow: hidden;"> #*The Images*#
#{
string #path = #_Data.path;
string ImgPath = #path.Substring(#path.IndexOf("Files") - 1, (#path.Length - (#path.IndexOf("Files") - 1)));
string[] ImgPathArray = ImgPath.Split('\\');
string[] filePaths = Directory.GetFiles(#path); // _Data.path
foreach (var file in filePaths)
{
var temp = file;
List<string> set1 = path.Split('\\').Distinct().ToList();
List<string> set2 = temp.Split('\\').Distinct().ToList();
var diff = set2.Count() > set1.Count() ? set2.Except(set1).ToList() : set1.Except(set2).ToList();
<img style="display: block; margin-left: auto; margin-right: auto; width: auto;"
src="~/#string.Join("/", ImgPathArray).Remove(0,1)/#string.Join("", diff)" />
}
}
</div>
<br />
</div>
</div>
</div>
<script> #*Display markers*#
markers = new ol.layer.Vector({
source: new ol.source.Vector(),
style: new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 1],
src: 'https://ucarecdn.com/4b516de9-d43d-4b75-9f0f-ab0916bd85eb/marker.png' // => https://app.uploadcare.com/projects/c05bbeb5e1a61e862903/files/7110cd57-b0ee-4833-bcd1-ff0343dd01cc/?limit=100&ordering=-datetime_uploaded
})
})
});
map.addLayer(markers);
var marker = new ol.Feature(new ol.geom.Point([parseFloat(#_Data.coordLat), parseFloat(#_Data.coordLong)]));
marker.setId(#_Data.Id);
//console.log(marker.getId());
markers.getSource().addFeature(marker);
</script>
}
<style> #*Style for the marker's popuop*#
.popup .overlay {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1;
display: none;
}
.popup .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
background: #fff;
width: auto;
height: auto;
z-index: 2;
text-align: center;
padding: 20px;
box-sizing: border-box;
}
.popup .close-btn {
position: absolute;
right: 20px;
top: 20px;
width: 30px;
height: 30px;
background: #222;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 23.5px;
text-align: center;
border-radius: 50%;
}
.popup.active .overlay {
display: block;
}
.popup.active .content {
transition: all 300ms ease-in-out;
transform: translate(-50%, -50%) scale(1);
}
</style>

You can use Bootstrap Image slider (carousel).
For example, you have a list of image paths：
#{
List<string> imagePath = new List<string>() { "/images/img1.jpg", "/images/img2.jpg", "/images/img3.jpg" };
}
Then you can use carousel to load images:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false" data-pause="hover">
<div class="carousel-inner" role="listbox">
#for (var i=0;i<imagePath.Count();i++)
{
var showClass = (i == 0 ? "active":"");
var path = imagePath[i];
<div class="item #showClass">
<div class="carousel-content">
<div style="margin: 0 auto">
<p>
<img src="#path" />
</p>
</div>
</div>
</div>
}
</div>
<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>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
.carousel-content {
color: black;
display: flex;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel();
});
</script>
Result:
If you want to have a carousel effect, set data-interval="2000" (2s switch).
Is this what you want?

How can I always get the same column size? (Bootstrap)

I'm building a website but I have an issue that I can't fix. I have multiple card with information inside that are in columns and each 4 columns, they switch to another row. The problem is that the number of card can change and it's not always divisible by 4. So at the end, I can have less than 4 columns in a row. And when I have les than 4 columns in a row, the displaying is not the same that when I have 4 columns in a row. I know that it's doing that because I use col-sm bootstrap class. It's the only way that I found that is simply responsive. I also tried to use col-sm-3 but the problem is that the website is no more responsive. (See screenshots) By the ways, I use razor views so I can write C# and HTML.
What the displaying do when I use col-sm: Display col-sm
The displaying that I want: Display col-sm-3
The problem of the col-sm-3: Problem of col-sm-3
This is the code of the displaying of my card:
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 10em;
margin: auto;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
<div class="container-fluid">
<div class="headline">VOITURES COMPACTS</div>
<div class="row">
#foreach (var car in Model.cars)
{
if (counter != 0 && counter % 4 == 0)
{
#:</div>
#:<div class="row">
}
<div class="col-sm-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="#car.ImgPath" alt="Card image cap">
<div class="card-body vehicule-cardbody">
<h2 class="vehicule-name">#car.Name</h2>
</div>
</div>
</div>
counter++;
}
</div>
</div>
Don't try running the code, it will not work because it's a razor view.
Thanks

You should be able to get the layout you want using Bootstrap’s grid system.
Your image for the layout you want is larger than what Bootstrap-4 provides with the container-xl (Bootstap-5 has a container-xxl), but you can create your own xxl container (my example has the max width at 1440px, but you can change that).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
body {
background-color: #212121;
color: #fff;
}
h1 {
color: #B8BABD;
}
hr {
width: 10%;
border-top: 5px solid #392A49;
}
.container-xxl {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width:1500px) {
.container-xxl {
max-width: 1440px;
}
}
.vehicule-card {
border-radius: 10px;
border: solid 4px #2F3136;
background-color: #333333;
}
.vehicule-cardbody {
height: 5em;
}
.vehicule-name {
background-color: #392A49;
color: #B8BABD;
width: 100%;
text-align: center;
padding: 3px;
border-radius: 10px;
border: solid 4px #2F3136;
}
.vehicule-image {
border-radius: 10px;
border: solid 4px #2F3136;
}
</style>
<div class="container-xxl">
<h1 class="text-center mt-5">VOITURES COMPACTS</h1>
<hr>
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8F8F/000000.png?text=Blista" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Blista</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FFEE8F/000000.png?text=Dilettante" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Dilettante</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/B0FF8F/000000.png?text=Issi" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Issi</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/8FD2FF/000000.png?text=Panto" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Panto</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/AB8FFF/000000.png?text=Prairie" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Prairie</h2>
</div>
</div>
</div>
<div class="col mb-3">
<div class="card p-3 m-2 box-shadow vehicule-card">
<img class="card-img-top vehicule-image" src="https://via.placeholder.com/192x108/FF8FF4/000000.png?text=Rhapsody" alt="Card image cap">
<div class="card-body px-0 vehicule-cardbody">
<h2 class="vehicule-name">Rhapsody</h2>
</div>
</div>
</div>
</div>
</div>
My example code is in plain HTML, but you should be able to reverse it to work with Razor.

How can i make the size of the div standard whilst changing the elements inside it to accommodate the div?

I want to make the div a standard size of 330px. But when I do it, the elements in the div will get screwed up.
<div class="col-md-3 m-wthree" style="height:330px;">
<div class="col-m">
<a href="#" data-toggle="modal" data-target="##item.id" class="offer-img">
<img src="#item.productImage" class="img-responsive" alt="" style="width:auto;height:124px;">
<div class="offer"><p><span>Offer</span></p></div>
</a>
<div class="mid-1">
<div class="women">
<h6>#item.productName</h6>
</div>
<div class="mid-2">
<p><label>$#item.productOriginalPrice</label><em class="item_price">$#item.productCurrentPrice</em></p>
<div class="clearfix"></div>
</div>
<div class="add">
<button class="btn btn-danger my-cart-btn my-cart-b " data-id="#item.id" data-name="#item.productName" data-summary="#item.productName" data-price="#item.productCurrentPrice" data-quantity="1" data-image="#item.productImage">Add to Cart</button>
</div>
</div>
</div>
</div>
Problem
With % as height
.m-wthree {
width: 50%;
float: left;
margin-bottom: 2em;
}
.add{
text-align:center;
}
.mid-2 p{
float:left;
font-size:0.9em;
color:#B4B4B4;
}
.mid-2 p em{
font-style:normal;
}
.mid-2 p label{
text-decoration: line-through;
font-weight:400;
margin-right:6px;
}
.mid-2 {
padding: 1em 0;
}
Above is the CSS code for the custom CSS. The CSS all seem ok and does not look like it is affecting anything....

Pop window displaying same result for each window in View

I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated

On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)

I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}

Converting from HTML to .NET MVC with Bootstrap

I am converting an web app from HTML with bootstrap to ASP.Net (C#) MVC with Bootstrap. I've moved the index file into the View, I've added to theme (dashboard.css) to the Content directory, I've added my images to the images directory, and I've updated the bundle config file.
When I run the HTML page in Firefox, I get the correct layout with 12 items in a row. When I run it with ASP.Net MVC, I only get 4 items in the row. Everything is very big compared to straight HTML. I am trying to get the 12 items in the row like HTML. This is my first ASP.Net MVC app. Any advice on where I should look next? Here is my View file:
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
<ul class="nav nav-justified">
<li><a class="navbar-brand" href="#"><img src="images/Logo-Smaller.png" alt="Jenkins"></a></li>
</ul>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</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 col-lg-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Products <span class="sr-only">(current)</span></li>
<li>Jenkins Replacement Fans</li>
<li>Manufacturer Fans</li>
<li>Motor Protection</li>
<li>Electric Motor Parts</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main col-lg-10">
<span class="anchor" id="JFans"></span>
<h3 class="page-header">Jenkins Replacement Fans</h3>
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 col-md-1 col-lrg-1 placeholder">
<img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>shrouded</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Shallow Recess</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Paddle Wheel</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shrouded.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>shrouded</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/shallow_recess.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Shallow Recess</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/paddle_wheel.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Paddle Wheel</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
<div class="col-xs-6 col-sm-3 col-md-1 col-lg-1 placeholder">
<img src="images/flat_backed.JPG" class="img-responsive" alt="Generic placeholder thumbnail">
<h4>Flat Backed</h4>
</div>
</div>
</
Here is my CSS file:
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 65px;
}
.navbar-brand {
max-height: 100%;
height: 100%;
width: auto;
margin: 0 0 0 0;
}
.navbar-brand >img {
max-height: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
width: auto;
padding-top: 0px;
float: none;
}
.navbar-nav li a {
line-height: 65px;
height: 65px;
padding-top: 0;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
background-color: #F0F0F0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
#media (min-width: 768px) {
.sidebar {
position: fixed;
top: 55px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
.table td {
text-align:left !important;
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
#media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
.anchor{
display: block;
height: 85px; /*same height as header*/
margin-top: -85px; /*same height as header*/
visibility: hidden;
}

There is no difference in HTML with bootstrap and MVC with Bootstrap so far you are using the same version of Bootstrap. I have converted many commercial HTML Bootstrap themes into MVC Bootstrap themes and it is pretty straight forward.
First of all you are missing a closing body tag. It could be an issue.
Secondly, do not use MVC Bundles at the moment. Copy all your existing HTML in views and make sure all scripts and CSS is referenced to right path. Write a simple action method that just return the view. Once you get the desired output, you are good to modify HTML with dynamic elements.
Thirdly, make sure there is no padding or margin applied to the div where you are using the following code.
col-sm-9 col-sm-offset-3
In last, use developer tools available in your browser to find out the exact output of HTML page. You can always edit the HTML and get the real time results in many modern browsers.