BigCommerce checkout display all steps uncollapsed in multiple rows - bigcommerce

I am trying to modify the checkout page in our store, this question may be a little incomprehensive for the masters of the BigCommerce league, I apologize for this upfront. Also, similar questions to this question have been asked before but was never answered.
BigCommerce single checkout page (express checkout & optimized single page checkout) comes in multiple collapsed steps, I am trying to un-collapse the containers and make it look like a true single page checkout in three columns instead of steps being underneath each-other.
I know bigcommerce partners are offering similar solutions, I'm trying to find out which panels to modify. I would sincerely appreciate if someone can put a light on which files to modify in order to achieve the goal.
I can provide access to the staging store if required.
This is the default checkout_express.html file.
%%Panel.HTMLHead%%
<body>
<script type="text/javascript" src="%%GLOBAL_CdnAppPath%%/javascript/express.checkout.js?%%GLOBAL_JSCacheToken%%"></script>
%%Panel.DrawerMenu%%
<div class="page">
%%Panel.Header%%
<div class="main">
<div class="inner">
%%Panel.WrapperBanner%%
<div class="Content Widest" id="LayoutColumn1">
<!-- <h1 class="TitleHeading mbm">%%LNG_SecureCheckout%%</h1> -->
<h1 class="TitleHeading mbm">Secure Checkout</h1>
<div class="fullwidth">
<div class="Block ExpressCheckout">
<script type="text/javascript" src="%%GLOBAL_TPL_PATH%%/js/formfield.js?%%GLOBAL_JSCacheToken%%"></script>
<script type="text/javascript">
lang.LoginEnterValidEmail = "%%LNG_LoginEnterValidEmail%%";
lang.LoginEnterPassword = "%%LNG_LoginEnterPassword%%";
lang.AccountEnterPassword = "%%LNG_AccountEnterPassword%%";
lang.AccountPasswordsDontMatch = "%%LNG_AccountPasswordsDontMatch%%";
lang.AccountEnterFirstName = "%%LNG_AccountEnterFirstName%%";
lang.AccountEnterLastName = "%%LNG_AccountEnterLastName%%";
lang.EnterShippingFirstName = '%%LNG_EnterShippingFirstName%%';
lang.EnterShippingLastName = '%%LNG_EnterShippingLastName%%';
lang.EnterShippingAddress = "%%LNG_EnterShippingAddress%%";
lang.EnterShippingCity = "%%LNG_EnterShippingCity%%";
lang.ChooseShippingCountry = "%%LNG_ChooseShippingCountry%%";
lang.ChooseShippingState = "%%LNG_ChooseShippingState%%";
lang.EnterShippingZip = "%%LNG_EnterShippingZip%%";
lang.ExpressCheckoutStepBillingAddress = "%%LNG_ExpressCheckoutStepBillingAddress%%";
lang.ExpressCheckoutStepBillingAccountDetails = "Working?";
// lang.ExpressCheckoutStepBillingAccountDetails = "%%LNG_ExpressCheckoutStepBillingAccountDetails%%";
lang.ExpressCheckoutLoadError = "%%LNG_ExpressCheckoutLoadError%%";
lang.ExpressCheckoutCheckingOutAsGuest = "%%LNG_ExpressCheckoutCheckingOutAsGuest%%";
lang.ExpressCheckoutCreatingAnAccount = "%%LNG_ExpressCheckoutCreatingAnAccount%%";
lang.ExpressCheckoutChooseBilling = "%%LNG_ExpressCheckoutChooseBilling%%";
lang.ExpressCheckoutChooseShipping = "%%LNG_ExpressCheckoutChooseShipping%%";
lang.ExpressCheckoutChooseShipper = "%%LNG_ExpressCheckoutChooseShipper%%";
lang.ExpressCheckoutFor = "%%LNG_ExpressCheckoutFor%%";
lang.ExpressCheckoutLoading = "%%LNG_ExpressCheckoutLoading%%";
lang.ShippingMethodCombined = "%%LNG_ShippingMethodCombined%%";
lang.EnterShippingPhone = "%%LNG_EnterShippingPhone%%"
lang.EnterCouponCode = "%%LNG_EnterCouponCode%%";
lang.BillAndShipToAddress = "%%LNG_BillAndShipToAddress%%";
lang.BillToThisAddress = "%%LNG_BillToThisAddress%%";
lang.ShipToThisAddress = "%%LNG_ShipToThisAddress%%";
lang.CheckingOutAs = "%%LNG_CheckingOutAs%%";
var CustomCheckoutFormNewAccount = %%GLOBAL_CustomCheckoutFormNewAccount%%;
var CustomCheckoutFormBillingAddress = %%GLOBAL_CustomCheckoutFormBillingAddress%%;
var CustomCheckoutFormShippingAddress = %%GLOBAL_CustomCheckoutFormShippingAddress%%;
$(document).ready(function() {
ExpressCheckout.signedIn = %%GLOBAL_ExpressCheckoutSignedIn%%;
ExpressCheckout.digitalOrder = %%GLOBAL_ExpressCheckoutDigitalOrder%%;
ExpressCheckout.init();
%%GLOBAL_GoToStep%%
});
%%GLOBAL_FormFieldRequiredJS%%
</script>
%%Discount.FreeShippingEligibility%%
<div class="ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassAccountDetails%%" id="CheckoutStepAccountDetails" style="%%GLOBAL_ExpressCheckoutHideAccountDetails%%">
<p class="ErrorMessage" style="display: %%GLOBAL_HideCheckoutError%%">
%%GLOBAL_CheckoutErrorMsg%%
</p>
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('AccountDetails');" title="Modify"></a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepAccountDetails%%: %%LNG_ExpressCheckoutStepAccountDetails%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
<div class="CreateAccount">
<form action="#" method="post" onsubmit="ExpressCheckout.GuestCheckout(); return false;">
<div id="CheckoutGuestForm" style="%%GLOBAL_HideGuestCheckoutOptions%%">
<h4>%%LNG_NotAnExistingCustomer%%</h4>
<p>%%LNG_CheckoutGuestIntro%%</p>
<div class="" style="line-height: 2;">
<dl class="mbm">
<dd><label><input name="checkout_type" id="checkout_type_guest" value="guest" type="radio" onclick="$('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAddress%%');" /> %%LNG_CheckoutAsAGuest%%</label></dd>
<dd><label><input name="checkout_type" id="checkout_type_register" value="register" checked="checked" type="radio" onclick="$('#BillingDetailsLabel').html('%%LNG_ExpressCheckoutStepBillingAccountDetails%%');" /> %%LNG_RegisterAnAccount%%</label></dd>
</dl>
<div class="Submit">
<input type="submit" id="CreateAccountButton" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</div>
</div>
</div>
<div style="%%GLOBAL_HideRegisteredCheckoutOptions%%">
<h4>%%LNG_NotAnExistingCustomer%%</h4>
<p>%%LNG_CreateAccountIntroTitle%%</p>
<div>
<ul style="margin-left: 0; line-height: 1.4; padding-left: 0;">
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro1%%</li>
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro2%%</li>
<li style="margin-left: 0; padding-left: 0;">%%LNG_CreateAccountIntro3%%</li>
</ul>
</div>
<p class="PL40 Submit">
<input type="submit" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</p>
</div>
</form>
</div>
<div class="AccountLogin">
<!-- <h4>%%LNG_AlreadyHaveAnAccount%%</h4> -->
<h4> What? </h4>
<p id="LoginIntro">%%LNG_AlreadyHaveAnAccountIntro%%</p>
<form action="#" id="LoginForm" method="post" onsubmit="ExpressCheckout.Login(); return false;">
<div class="FormContainer HorizontalFormContainer">
<p style="display: none" class="ErrorMessage" id="CheckoutLoginError">
%%GLOBAL_LoginMessage%%
</p>
<dl>
<dt>%%LNG_EmailAddress%%:</dt>
<dd><input type="text" class="Textbox Field200 InitialFocus" name="login_email" id="login_email" /></dd>
<dt>%%LNG_Password%%:</dt>
<dd><input type="password" autocomplete="off" class="Textbox Field200" name="login_pass" id="login_pass" /></dd>
<dt> </dt>
<dd>
<input id="LoginButton" type="submit" value="%%LNG_Continue%%" class="btn" /> <span class="LoadingIndicator" style="display: none"><img src="%%GLOBAL_IMG_PATH%%/loader.png" alt="" /></span>
</dd>
<dt></dt>
<dd>%%LNG_ForgotYourPassword%%</dd>
</dl>
</div>
</form>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassBillingAddress%%" id="CheckoutStepBillingAddress">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('BillingAddress');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepBillingAddress%%:
<span id="BillingDetailsLabel">%%LNG_ExpressCheckoutStepBillingAddress%%</span>
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
%%SNIPPET_BillingAddressStepContents%%
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassShippingAddress%%" id="CheckoutStepShippingAddress" style="%%GLOBAL_ExpressCheckoutHideShippingAddress%%">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('ShippingAddress');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepShippingAddress%%: %%LNG_ExpressCheckoutStepShippingAddress%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
%%SNIPPET_ShippingAddressStepContents%%
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassShippingProvider%%" id="CheckoutStepShippingProvider" style="%%GLOBAL_ExpressCheckoutHideShippingProviders%%">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('ShippingProvider');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepShippingProvider%%: %%LNG_ExpressCheckoutStepShippingMethod%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassConfirmation%%" id="CheckoutStepConfirmation">
<div class="ExpressCheckoutTitle">
<a class="ChangeLink" href="#" onclick="return ExpressCheckout.ChangeStep('Confirmation');" title="Modify">Modify</a>
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepConfirmation%%: %%LNG_ExpressCheckoutStepOrderConfirmation%%
<span class="ExpressCheckoutCompletedContent"></span>
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
<div class="clear ExpressCheckoutBlock %%GLOBAL_CollapsedStepClassPaymentDetails%%" id="CheckoutStepPaymentDetails" style="%%GLOBAL_ExpressCheckoutHidePaymentDetails%%">
<div class="ExpressCheckoutTitle">
%%LNG_ExpressCheckoutStep%% %%GLOBAL_ExpressCheckoutStepPaymentDetails%%: %%LNG_ExpressCheckoutStepPaymentDetails%%
</div>
<div class="ExpressCheckoutContent">
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
%%Panel.Footer%%
</div>
<script type="text/javascript">
$(document).ready(function() {
// live change to watch for newly created dom elements
$('#FormField_11, #FormField_21').live('change',function(){
$.uniform.restore('select.JSHidden');
});
});
$(document).ajaxComplete(function(event,request, settings) {
$('select').not('.UniApplied').uniform();
$('input[type=checkbox], input[type=radio]').not('.UniApplied').uniform();
});
$(window).load(function() {
$('select').not('.UniApplied').uniform();
});
</script>
</body>
</html>
Current Checkout Page:
Desired Checkout Page:

Related

ASP.NET Core 5.0 MVC : DirectoryNotFoundException While trying to download the file

I am trying to get a file name from database, attach a proper path to it and get it downloaded on my system. Unfortunately I get a DirectoryNotFoundException.
The button I click Is : "Download Id Proof"
An unhandled exception occurred while processing the request.
DirectoryNotFoundException: Could not find a part of the path 'D:\images\Apply\POfId\10157d06-bf72-4ea1-b316-b22ac5feae20.jpg'.
System.IO.FileStream.ValidateFileHandle(SafeFileHandle fileHandle)
Here is my view markup:
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<h1>Details</h1>
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.SchType</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
Here this is the code for the controller method:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> DownloadFile(string id)
{
string DirPath = _webHostEnvironment.WebRootPath;
var objdata = _db.Apply.Where(i => i.PofId == id).FirstOrDefault();
string FileName = objdata.PofId;
var FilePath = Path.Combine(DirPath,WC.ImagePath[1], FileName);
var memory = new MemoryStream();
using (var stream = new FileStream(FilePath,FileMode.Open))
{
await stream.CopyToAsync(memory);
}
memory.Position = 0;
var contentType = "APPLICATION/octet-stream";
return File(memory, contentType, FileName);
}
You can see the error in detail in this screenshot
You can also see that the image and the path actually exist in this screenshot

How can you make dynamically generated buttons in Vue.js 3 not executing the same function

I'm creating an application where input flexibility is of paramount. My application generates contents dynamically (input, textarea, buttons). this picture shows the bottom section separated from the top with a borderline was generated dynamically
What I want to do is, when I click the grey plus button, it should generate an additional director's name, and director's address fields for a PARTICULAR SECTION (separated by a grey line). Unfortunately, my application keeps adding (and removing) director's name, and director's address fields for all sections instead of the section where the grey button (or red button is clicked) see here. Can that be achieved in Vue.js PLEASE? I.m using the 'add_new_director_field()' function in my Vue.js code to add the aforementioned fields. Thanks in Advance good people. See my code below:
<script>
import NavBar from './VettingReportMenu.vue';
import BreadCrumb from './BCRPreviousDirectors.vue';
import SideLinkPreviousDirectors from './SideLinkPreviousDirectors.vue';
export default {
data() {
return{
header_1: "Previous Directors",
count: 0,
disabled: true,
checked: false,
isActive: true,
inputs: [{
director: "",
}],
sec: []
}
},
components:{
NavBar, BreadCrumb, SideLinkPreviousDirectors
},
setup(){
let myClass = "LeftLine";
let counts = 1;
return myClass, counts;
},
methods:{
add_new_director_field(){
this.inputs.push(this.inputs.length+1);
},
remove_director_field(index){
this.inputs.splice(index, 1)
},
add_new_section(){
this.count++;
this.isActive = false;
this.sec.push({
director: ''
});
},
remove_section(index){
this.count--;
if(this.count == 0)
this.isActive = true;
this.sec.splice(index, 1)
},
trythis: function() {
alert(this.counts);
},
}
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
<template>
<div class="row">
<div class="col-sm-12">
<NavBar />
<BreadCrumb />
<br />
</div>
</div>
<!-- This is the main div splitting the page into two (2) -->
<div class="row">
<div class = "col-sm-1"><!-- Left Space Section-->
</div>
<div class = "col-sm-8"><!-- Main Content Section -->
<h2 style="border-bottom: 1px solid #DDDDDD">{{header_1}}</h2>
<br />
<div class="row">
<div class="col-sm-3">
</div>
<div class="col-sm-6">
<div class="chiller_cb form-check-inline align-items-center">
<input id="addDirectorsHistory" type="checkbox" name="prev_dir_checkbox" value="Add Previous Directors" v-model="checked">
<label for="addDirectorsHistory"><strong>Check this box to fill this part, or click 'Save and Continue' to skip.</strong></label>
<span></span>
</div>
</div>
<div class="col-sm-3">
</div>
</div>
<br />
<!-- Here starts the section containing the previous directors -->
<div v-if="checked"> <!-- Wrapper -->
<!-- Buttons for Adding and Removing Previous Director's Section -->
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button #click.self="add_new_section()" class="btn shadow-sm btn-secondary btn-block rounded-2" id="add_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="input-group">
<button :disabled="isActive" #click="remove_section(count)" class="btn shadow-sm btn-danger btn-block rounded-2" id="remove_pds" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
Previous Director's Section
</button>
</div>
</div>
</div>
<div class="col-sm-2">
</div>
</div>
<!-- Buttons for Adding and Removing Previous Director's Section -->
<br />
<div v-for="(secs,k) in sec" :key="k" style="border-bottom:1px solid #b7b7b7">
<br />
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Heading for Previous Directors' Entry:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-heading" style="color: #8FBC8F"></i>
</span>
</div>
<input placeholder="Heading for Previous Directors Entry" class="form-control" :name="'prev_dir_heading_' + k" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Appointed By Resolution Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" placeholder="e.g. 2018" name="resolution_date" required >
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Presented for Filing Dated:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="far fa-calendar-alt" style="color: #8FBC8F"></i>
</span>
</div>
<input type="date" class="form-control" name="filing_date" required >
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The listing of Directors -->
<div :id="'c'+k+d" v-for="(input,d) in inputs" :key="k+d">
<div class="row" >
<div class="col-sm-1">
<strong>{{d+1}}.</strong>
</div>
<div class="col-sm-11">
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Name:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-user-tie" style="color: #8FBC8F"></i>
</span>
</div>
<input v-model="input[d]" class="form-control" placeholder="e.g. Hassan Dele Ekene" :name="'current_director_' + k + '_' + d" required >
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :v-model="'remove_btn' + k + '' + d" #click="remove_director_field(k + d)" type="button" v-show="d || ( !d && inputs.length > 1)" class="btn shadow-sm btn-danger btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Remove Address Field">
<i class="fas fa-minus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<button :id="'add_btn' + k + '' + d" :v-model="'add_btn' + k + '' + d" v-show="d == inputs.length-1" #click="add_new_director_field()" type="button" class="btn shadow-sm btn-secondary btn-block rounded-2" data-toggle="tooltip" data-placement="top" title="Add New Address Field">
<i class="fas fa-plus-square" style="horizontal-align: left;"></i>
</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 align-middle">
<strong>Director's Address:</strong><b class="text-danger">*</b>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fas fa-map-marked-alt" style="color: #8FBC8F; margin-top: -30px"></i>
</span>
</div>
<textarea class="form-control _textarea" :name="'dir_addr_' + k + '_' + d"
maxlength="1000" placeholder="Director's Address" rows="2" required></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
</div>
</div>
<!-- End of listing -->
<!-- Here ends the section containing the current directors -->
<br />
<div class="row">
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="fas fa-angle-double-left" style="horizontal-align: left;"></i>
Back to Share Capital
</button>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
</div>
<div class="col-sm-3">
<div class="col-sm-12">
<div class="form-group">
<div class="input-group">
<button type="submit" class="btn shadow-sm btn-success btn-block rounded-0" id="btn_submit">
<i class="far fa-save"></i>
Save and Continue
<i class="fas fa-angle-double-right" style="horizontal-align: right;"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-sm-3" ><!-- SideLink Section-->
<div class="row myClass">
<SideLinkPreviousDirectors />
</div>
</div>
</div>
<br />
<br />
</template>

You have no pointer in your add_new_director_field method in what section inputs should be added. It's very hard to understand from your code whats happening at all. I'd recommend to start from designing a data structure at first, then go to markup. Very quick and simplified draft how can it be:
const inputsGroup = [
{
type: 'text',
value: 'Name',
},
{
type: 'text',
value: 'Address',
},
]
data() {
return {
sections: [
{
inputs: [inputsGroup]
},
]
}
}
...
addSection() {
this.sections.push({ inputs: defaultInputs })
}
removeSection(index) {
this.sections.splice(index, 1)
}
addInputs(sectionIndex) {
this.sections[sectionIndex].inputs.push(inputsGroup)
}
deleteInputs(index, sectionIndex) {
this.sections[sectionIndex].inputs.splice(index, 1)
}
<template>
<button
#click="addSection"
>
Add section
</button>
<div v-for=(section, sectionIndex) in sections>
<div v-for="(inputGroup, inputGroupIndex) in section.inputs">
<input
v-for="input in inputGroup"
:value="input.value"
:type="input.type"
>
<button
#click="deleteInputs(inputGroupIndex, sectionIndex)"
>
Delete inputs
</button>
</div>
<button
#click="addInputs(sectionIndex)"
>
Add inputs
</button>
<button
#click="deleteSection(sectionIndex)"
>
Delete section
</button>
</div>
</template>

How to use Form in FOREACH with ASP.NET

The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
The problem is when I use the form inside ModalDialog and put Modal in a loop. If I have several records.
When I select each record, only the first record information is sent. Please check and help
When I select each record, only the first record information is sent. Please check and help
#{ var count = 0;}
#foreach (var item in Model.ProjectViewModels)
{
<tr>
#if (item.PersonState == 1)
{
<td style="width:35px; color:black;">
<span class="badge badge-success" style="width:50px; border-radius:15px;">
فعال
</span>
</td>
}
else
{
<td style="width:35px; color:black;">
<span class="badge badge-danger" style="width:50px; border-radius:15px;">
غیرفعال
</span>
</td>
}
<td>#item.PersonName #item.Family</td>
<td>#item.PersonCode</td>
<td>#item.projectName</td>
<td style="width:300px">
#if (item.PersonState == 1)
{
<div class="text-center row d-flex justify-content-between">
<div style="margin-top:3px">
<a class="fa fa-edit" style="font-size:28px;color:darkblue" asp-controller="Home" asp-action="updatePerson" asp-route-id="#item.PersonID"></a>
</div>
<form asp-controller="Home" asp-action="RemovePerson" asp-route-id="#item.PersonID" method="post">
<a value="submit" class="fa fa-trash-o ajax_delete1 " style="font-size: 27px; color: red; cursor: pointer;"> </a>
</form>
<div>
<a class="btn btn-sm btn-outline-primary" asp-controller="Home" asp-action="detailsPerson" asp-route-id="#item.PersonID">جزئیات</a>
<a class="btn btn-sm btn-outline-secondary" asp-controller="Report" asp-action="SingelGhrardad" asp-route-id="#item.PersonID">قرارداد</a>
<a class="btn btn-sm btn-outline-danger" data-toggle="modal" data-target="#myModal#(count)">ترک کار</a>
<!-- The Modal -->
<div class="modal fade" id="myModal#(count)">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
<form asp-controller="Home" asp-action="PersonTarkKar" asp-route-id="#item.PersonID" asp-route-PersonNewState="0" method="post">
<div class="row">
<div class="col-md-5 col-xs-12">
<label>تاریخ ترک کار</label>
<div class="input-group" style="padding-left:9px; padding-right:9px;">
<div class="input-group-addon"
style="border:1px solid gray; padding:6px">
<span> <i class="right fa fa-calendar"></i></span>
</div>
<input id="calender1" name="calender1" type="text" required autocomplete="off" class="form-control" />
</div>
</div>
</div>
<button class="btn btn-dark mt-5" type="submit">ثبت تاریخ</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
#{count++;}
</div>
</div>
}
#section Scripts{
<script>
$('#calender1').MdPersianDateTimePicker({
targetTextSelector: '#calender1',
});
</script>
}

When I select each record, only the first record information is sent. Please check and help
That is because your modal ids are always the same.
You need change your view like below:
#{ var i = 0; }
#foreach (var item in Model.ProjectViewModels)
{
<tr>
//...
<td style="width:300px">
#if (item.PersonState == 1)
{ //change here......
<a class="btn btn-sm btn-outline-danger"
data-toggle="modal" data-target="#myModal_#i">ترک کار</a>
<!-- The Modal -->
//change here...........
<div class="modal fade" id="myModal_#i">
<div class="modal-dialog ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">ثبت تاریخ ترک کار پرسنل</h4>
</div>
<!-- Modal body -->
<div class="modal-body">
//...
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">بستن</button>
</div>
</div>
</div>
</div>
}
</td>
</tr>
i++; //add this.......
}
Update:
You need loop the js like below:
#section Scripts
{
<link href="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />
<script src="/lib/md.bootstrappersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.js"></script>
<script>
for (j = 0; j < #Model.ProjectViewModels.Count(); j++)
{
$('#calender_'+j).MdPersianDateTimePicker({
targetTextSelector: '#calender_'+ j,
});
}
</script>
}
Change:
<input id="calender" name="calender1" type="text" required autocomplete="off" class="form-control" />
To:
<input id="calender_#i" name="calender1" type="text" required autocomplete="off" class="form-control" />

Stale element exception under shadow dom

I'm facing a problem with a stale element under the shadow DOM, scenario below:
hover to the video and the dock is shown and vice versa
HTML Dom changes from not hovering to hovering and vice versa:
The below html is for not hovering.
<div class="base overlay hidden" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
After hovered, the change is:
<div class="base overlay" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
The code to get the Element after mouse hover as below:
public static WebElement getElementFromShadow(String jsPath) {
WebElement element = null
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor jse = ((driver) as JavascriptExecutor)
int attempts = 0;
while (attempts < 5) {
try {
element = ((jse.executeScript('return ' + jsPath)) as WebElement)
if (element != null) {
break;
}
else {
WebDriverWait wait = new WebDriverWait(driver, 10, 100);
element = wait.until(ExpectedConditions.elementToBeClickable(((jse.executeScript('return ' + jsPath)) as WebElement)))
}
} catch (Exception e) {
e.printStackTrace()
}
attempts++
Thread.sleep(2000)
}
return element
}
but when run it, I got org.openqa.selenium.StaleElementReferenceException: stale element reference: stale element not found
(Session info: chrome=91.0.4472.124)
PS: the above code works fine with the normal shadow element(No DOM is changed).
Could anyone know any idea/solution to solve the issue, thank you in advance!

Boostrap 3 - thumbnail images alignment problem

how to align them in a row with equal height.
<div id="about-page-contain">
<div class="">
<div class="row equal">
<div class="wwd">
<div class="col-md-12">
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/plots">
<img src="/public/uploadfiles/images/be71f72e-b2e6-4dab-8dd4-8bc4d48365b8.jpg" alt="PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="/public/uploadfiles/images/ff74dcc3-71b4-4d35-b53b-77c6c36a0947.jpg" alt="FLATS" style="">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/farm-land">
<img src="/public/uploadfiles/images/06fdde52-b169-45eb-a96a-ec1dd07f15e5.jpg" alt="FARM LAND" style="">
<div class="caption" style="text-align:center;">
<p>FARM LAND</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-sites">
<img src="/public/uploadfiles/images/45d18935-9220-41ed-8f58-4aa3a16be8a8.jpg" alt="DEVELOPMENT SITES" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT SITES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-lands-for-plots">
<img src="/public/uploadfiles/images/d85c0a59-2d35-4f24-830b-8cfe606f8caf.png" alt="DEVELOPMENT LANDS FOR PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT LANDS FOR PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-houses">
<img src="/public/uploadfiles/images/5d265aad-31ef-4285-94a3-3aaeb0111e7a.jpg" alt="INDEPENDENT HOUSES" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT HOUSES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/outrate-lands-for-appt-&-plots">
<img src="/public/uploadfiles/images/8d3cfcec-5415-422c-8426-665271216009.jpg" alt="OUTRATE LANDS FOR APPT & PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>OUTRATE LANDS FOR APPT & PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/commercial-properties">
<img src="/public/uploadfiles/images/707cc088-4383-4423-8172-2fb2d9efa46d.jpg" alt="COMMERCIAL PROPERTIES" style="">
<div class="caption" style="text-align:center;">
<p>COMMERCIAL PROPERTIES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-villas-in-prime-locations">
<img src="/public/uploadfiles/images/c2a9b09c-94bd-43ee-92ae-db4c587dd8eb.jpg" alt="INDEPENDENT VILLAS IN PRIME LOCATIONS" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT VILLAS IN PRIME LOCATIONS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/construction-contract">
<img src="/public/uploadfiles/images/5f253c56-7f4d-4e61-9359-f5b2f7748443.jpg" alt="CONSTRUCTION CONTRACT" style="">
<div class="caption" style="text-align:center;">
<p>CONSTRUCTION CONTRACT</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

There are a few issues here:
You have a class of wwd that we cannot see. Is that applying some styles of some sort?
Each image has a blank style="" class. Why is that there?
If I remove the link to the bootstrap styles I do not see any difference in applied styles.
the image sizes of your images can affect the layout and there are no actual links to the image so it makes it difficult to reproduce. Include the full links in your example to make it easier to reproduce.
I created a codepen with a fake image but I don't see the issue you are seeing.
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt="DEVELOPMENT SITES" style="" width="100px">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
How about this example?
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
</div>