We Keep Coding

Using SSR trying to render react code, facing issues with the correct classes not getting applied

I am trying to render the react code on the server side. The code is being built and then rendered on the browser. But the classes that need to be added in the react code is being omitted. Can anyone please help me with what exactly is happening here.
This is how the code should appear but the classes are changed when the code is rendered
<div class="events-s">
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>
how the code is actually rendered :
**<div class="main-content">**
<div class="content-w">
<div class="content">
<h1 class="event-section">Events</h1>
<div class="feature-events">
<h2 class="pb-block">Featured Events</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<div class="pb-b"></div>
<h2 class="pb-block-t">Where We'll Be Next</h2>
</div>
</div>
</div>
<div class="content-w">
<div class="content">
<div class="pb-b">
<h2 class="pb-block-t">Past Events</h2>
</div>
</div>
</div>
</div>

This was solved .. i was not using the correct relative url to fetch the page
so the contents were not loaded correctly

there is bug in my working code.it does not work properly

thumbnail screenshot also attachedi have created thumbnail in my dashboard.but these thumbnails are collapsing each others and the last thumbnail in a row showing up full screen.kindly help me
<div class="container">
<h1>Trending Groups</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<img src="image/2.png">
<p class="caption">outstanding</p>
</div>
</div>
</div>
</div>

Try giving height and width to your image also dearch in google little bit and then post your questions on this that will help you.

Bootstrap not working properly with array props in VueJS

I am trying to get two divs to appear side by side when looping through props (which happen to be an array) in VueJS.
When I use a single element, it works fine. Immediately when I add the v-for tag it doesnt appear side by side anymore.
<div class="row">
<div v-for="(data,index) in data" :key="index" class="col-12">
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<p class="title">{{data.title}}</p>
<p class="description">{{data.description}}</p>
<p class="bottom">
<span class="left"><span class="tag">{{data.tag}}</span><span class="time"> | {{data.time}}</span></span>
<span class="right"><v-icon>bookmark</v-icon><v-icon>share</v-icon></span>
</p>
</div>
</div>
</div>
Above is the code i am using

Seems you're just missing the required .row for grid nesting
<div v-for="(data,index) in data" :key="index" class="col-12">
<div class="row"> <!-- 👈 this one -->
<div v-if="data.image" class="col-xs-12 col-md-3 image-div">
<img class="image" :src="data.image" alt="image">
</div>
<div class="col-xs-12 col-md-9">
<!-- etc -->
</div>
</div>
</div>

Start slideshow multiple images when click on one

I've got a html/php website and I want to load multiple images in a slideshow when I click on one. How can I do this? This is my code now:
<div class="row">
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w1.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Herent</h2>
<h4>Renovatie badkamer</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w2.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Mechelen</h2>
<h4>Plaatsen van keuken</h4>
</div>
</div>
</div>
<div class="col-md-4 no_padding">
<div class="single_image">
<img src="images/w3.jpg" alt="">
<div class="image_overlay">
View Full Project
<h2>Antwerpen</h2>
<h4>Verbouwingen</h4>
</div>
</div>
</div>
</div>
I searched for some templates and answers but I can't start with it.. It looks not that difficult...

Individual transitions on Semantic UI cards fail

I'm trying to apply transitions as explained in here, but some cards fail to do a second transition/animation. Is it CSS, Semantic UI or me? You can try adding more cards to the test.
Edit:
As #niba requested, I made a jsfiddle to show what is
happening. Look that I named cards from "Card 0" to "Card 7". Run
several times and you may see some are missing.
Here is the code:
$(document)
.ready(function() {
$('.card')
.transition('fade')
.transition('fade', function() {
console.log('finished');
});
<div class="ui cards">
<div class="green card">
<div class="image">
<img src="img/1.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/2.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
<div class="green card">
<div class="image">
<img src="img/3.jpg">
</div>
<div class="content">
<a class="header">Header</a>
<div class="meta">
<div class="ui small star rating"></div>
</div>
<div class="description">Description</div>
</div>
</div>
</div>