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>
Related
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.
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 am showing my div in column. Issue is i need to center my text
MY code
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
<p class="grey font-small-2"></p>
</div>
<div class="row align-self-center">
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
ID: </a></span>
</div>
<div class="d-inline-block">
<span class="">
<span class="display-block overflow-hidden">
{{selectedPatient?.mrn}}</span>
</span>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 col-sm-6">
<ul class="no-list-style pl-0 text-center">
<li class="mb-2">
<div class="d-flex align-items-center">
<div class="d-inline-block">
<span class="text-bold-500 primary"><a><i class="ft-briefcase font-small-3"></i>
Age:</a></span>
</div>
<div class="d-inline-block">
<span class="">
<span
class="display-block overflow-hidden"> {{selectedPatient?.age}}</span>
</span>
</div>
</div>
</li>
<li class="mb-2">
</ul>
</div>
</div>
</div>
</div>
</div>
Its look like this right now
I need to center the ID and AGE Text in center of my card. They are showing on left right now i need to show them in middle to the center. I try to give the text-align center but its not come in a center
.centered {
width: 100%;
display: flex;
justify-content: center;
}
place your items within that div containg that class.
Try this one. I removed some extra html code which making no sense.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="card mb-4">
<div class="card-header">
<div class="card-title-wrap bar-info">
<div class="card-title">Personal Information</div>
</div>
</div>
<div class="card-body">
<div class="card-block">
<div class="align-self-center halfway-fab text-center">
<a class="profile-image">
<img src="assets/img/portrait/medium/avatar-m-9.jpg"
class="rounded-circle img-border gradient-summer width-100" alt="Card image">
</a>
</div>
<div class="text-center">
<span class="font-medium-2 text-uppercase">{{selectedPatient?.patientName}}</span>
</div>
<div class="row align-self-center justify-content-center">
<div class="p-2 ">
<span class="text-primary font-weight-bold">ID:</span>
<span>{{selectedPatient?.mrn}}</span>
</div>
<div class="p-2 ">
<span class="text-primary font-weight-bold">Age:</span>
<span>{{selectedPatient?.age}}</span>
</div>
</div>
</div>
</div>
</div>
I've been experimenting with some of the sample code in the documentation, and in particular laying out three cards in a row.
When I cut'n paste the code into my component page I'm not getting the expected outcome.
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
<div class="branding">
<a href="" class="nav-link">
<img alt="" src="assets/logo2.png" height="60">
<span class="title">Good day</span>
</a>
</div>
<div class="header-actions"></div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown>
<button class="nav-text" clrDropdownTrigger aria-label="open user profile">
john.doe#vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</header>
<div class="content-container">
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
</div>
</div>
I was expecting three equally sized cards across the web page. Instead I get...
Do I need to install Bootstrap for this to work?
TIA
You are almost there, you are missing one important element in your page structure. The Cards are good, but you need to add <div class="content-area"> just inside of your <div class="content-container"> element.
<div class="content-container">
<div class="content-area"> <!-- THIS IS MISSING -->
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</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...