How do I display an image with style and background-image in ejs template
This is working:
But this is not working:
this is my full code
<div class="row d-flex">
<% upcoming_events.forEach(event=> { %>
<div class="col-lg-4 ftco-animate">
<div class="blog-entry">
<a href="blog-single.html" class="block-20" style="background-image: url('<%=event.eventImage %>' )">
</a>
<div class="text d-block">
<div class="meta">
<p>
<span class="fa fa-calendar mr-2"></span>Sept. 06, 2020
<span class="fa fa-user mr-2"></span>Admin
<span class="fa fa-comment mr-2"></span> 3
</p>
</div>
<h3 class="heading">Best for any industrial & business solution</h3>
<p>Read more</p>
</div>
</div>
</div>
<%}) ;%>
</div>
Note, when I inspect it on the browser it shows the AWS image URL correctly but the image does not show.
Related
so basically im doing this in angular and using bootstrap
I want the name and description on the left and img on the right but it isn't working , pls help
code link is below
here
<div class="row">
<div class="col-xs-12">
<button class='btn btn-success'>New bug</button>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix"
style="background:grey ; color:red;"
*ngFor="let bug of bugs">
<div class="pull-left">
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span> </div>
<div class="pull-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg"
alt="{{bug.name}}"
class="img-responsive"
style="max-height: 100px;">
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
I'm guessing you want the text to wrap around the image. If that is the case then only put the float class on the image, and reorder the image to above the text.
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item clearfix" style="background: grey; color: red" *ngFor="let bug of bugs">
<div class="float-right">
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
If you want the text and image to be in 2 columns I would suggest using flexbox
<div class="container">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-success">New bug</button>
</div>
</div>
<hr />
<div class="row">
<div class="col-xs-12">
<a href="#" class="list-group-item d-flex justify-content-between" style="background: grey; color: red" *ngFor="let bug of bugs">
<div>
<h4 class="list-group-item-headin">name</h4>
<p class="list-group-item-text">description</p>
<span class="list-group-item-text">type</span>
<span class="list-group-item-text">status</span>
<span class="list-group-item-text">priority</span>
</div>
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Dead-Bug_43215-480x360_%285000576310%29.jpg" alt="{{bug.name}}" class="img-responsive" style="max-height: 100px" />
</div>
</a>
<app-bugs-item></app-bugs-item>
</div>
</div>
</div>
I want to add the wordpress post loop with posts from category-name feature to it, for alternative column. Here is the image sample of what i am trying to achieve, and below the image is the html i have built to work it, thanks.
here is the image sample
here is my code
<div class="row featured">
<div class="grid-box grid-box-1 item-featured">
<a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/video-post/">
<div class="caption">
<div class="cat"><span>News</span></div>
<div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015
<i class="fa fa-video-camera"></i> Video
</div>
<h2 class="title">Video Post with Featured Image</h2> </div>
<div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div>
</a>
</div>
<div class="grid-box grid-box-2 item-featured">
<a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-more-tag/">
<div class="caption">
<div class="cat"><span>Lifestyle</span></div>
<div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015
<i class="fa fa-video-camera"></i> Video
</div>
<h2 class="title">Post With More Tag</h2>
</div>
<div class="vm-featured"> <img src="/asstes/image1.jpg"/> </div>
</a>
</div>
<div class="grid-box grid-box-3 item-featured">
<a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/vimeo-video-post/">
<div class="caption">
<div class="cat"><span>What's New</span></div>
<div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015
</div>
<h2 class="title">Vimeo Video Post</h2>
</div>
<div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div>
</a>
</div>
<div class="grid-box grid-box-4 item-featured">
<a href="http://www.marchettidesign.net/fullby/demo-biggrid/2015/01/26/post-with-image-and-text/">
<div class="caption">
<div class="cat"><span>News</span></div>
<div class="date-feat"><i class="fa fa-clock-o"></i> 26 Jan , 2015
</div>
<h2 class="title">Post with Image and text</h2>
</div>
<div class="quad wp-post-image"> <img src="/asstes/image1.jpg"/> </div>
</a>
</div>
I'm working on a project using Bootstrap 4. I have a row that consists of three columns. My code looks like this:
<div class="row">
<div class="col-md-4 center-block">
<div>
<i class="glyphicon glyphicon-time center-text"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-star center-text"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 center-block">
<i class="glyphicon glyphicon-heart center-text"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I need to center the content within each column. However, all of the content is left-aligned and I do not know why. As the code shows, I'm using the center-block and center-text classes. Yet, they do not seem to be working. What am I doing wrong?
You need to use text-center instead of center-block.
There is no default Bootstrap class such as center-text and the class needs to be used for the parent container, not along with any child element.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4 text-center">
<div>
<i class="glyphicon glyphicon-time"></i><br />
<h3>On Time</h3>
<h4>Just for you</h4>
</div>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-star"></i><br />
<h3>Excellent Service</h3>
<h4>When you need it</h4>
</div>
<div class="col-md-4 text-center">
<i class="glyphicon glyphicon-heart"></i><br />
<h3>We want to be your favorite</h3>
<h4>Why not?</h4>
</div>
</div>
I am displaying a list of search results. I am using col-md-4 from bootstrap to display 3 results per row - a bit like 3 cards. However when it moves to the next row it starts from the right and then the next item shows up only on the next one left... basically jumping a column.
Following code to be repeated as many time as needed. End goal is to display results like a grid.
<div class="outer-listings-container row-space-8">
<div class="row row-condensed listings-container">
<!-- PART TO REPEAT -->
<div class="col-md-4 row-space-1" data-id="36">
<div class="result">
<div class="panel-image listing-img">
<div id="36" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<a class="center-block" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#"> </div>
</a>
</div>
<div class="item">
<a class="" href="#">
<div class="center-block">
<img class="img-responsive center-block" src="#">
</div>
</a>
</div>
</div>
<div>
<a class="left carousel-control height-test" id="36" href="#36" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div>
<a class="right carousel-control height-test" id="36" href="#36" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="panel-overlay-bottom-left panel-overlay-label panel-overlay-listing-label">
<div>
<sup class="h6">€</sup>
<span class="h3">456</span>
<sup class="h6">EUR</sup>
<span class="h6">/session of 2 hours</span>
</div>
</div>
</div>
<div class="panel-body panel-body-result">
<h4>
<div class="row">
<div class="col-xs-2">
<img src="#" class="avatar-sm" alt="Banana"> </div>
<div class="col-xs-10">
Banana R
<br>
<small>Banana R</small>
</div>
</div>
</h4>
<span class="stars2"><span style="width: 0px;"></span></span>
<span><b class="review_score">0</b> (0 reviews)</span>
<p>blabla</p>
<p>more blabla </p>
</div>
</div>
</div>
<!-- END REPEAT -->
</div>
</div>
Problem can be seen on the following page: https://gokyma.com/search?location=Paris%2C+France&country=FR&city=Paris&state=IDF&stype=5&selected_date=&selected_time=&_token=ZHXfiseRlAgE3fLY0f1ywr7qYzj9eFxGkSZ2SFIS
Well, your jsfiddle code is not really representative of the issue, but I guess one solution could be adding <div class="row"></div> for each series of 3 col-md-4 that you have in each line. So, the snippet would look something like this;
<row> <col-md-4> <col-md-4> <col-md-4> </row>
Remember, a row can't contain more than 12 columns.... that's another thing to take into consideration...
Is there any way to keep a CSS only modal from jumping to the top of the page?
<a href="#modal-1" />MODAL LINK</a>
<div id="modal-1" class="modal">
<div class="modal-content">
<div class="header">
<i class="fa fa-times-circle fa-2x"/>XX</i>
</div>
<div class="copy">
<p>CONTENT GOES HERE</p>
</div>
<div class="cf footer">
</div>
</div>
<div class="overlay"></div>
</div>
Use href="javascript:void(0)" instead of href="#"