how to use the grid feature of Bootrap-4? - html

I am new to the web designing and trying to learn bootstrap. I want to create a product page for that I tried to use the predefined template from - https://www.bootdey.com/snippets/view/shop-product-detail#css
When I used the given code it is not showing as photos and description is devided in two parts. Both are in vertical pattern.
I want it to look like this :
I want to devide the images and information in two columns and wrap the whole product details in white box.
here is the code:
<div class="container bootdey">
<div class="col-md-12">
<section class="panel">
<div class="panel-body">
<div class="col-md-6">
<div class="pro-img-details">
<img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
</div>
<div class="pro-img-list">
<a href="#">
<img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
</a>
</div>
</div>
<div class="col-md-6">
<h4 class="pro-d-title">
<a href="#" class="">
Leopard Shirt Dress
</a>
</h4>
<p>
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
</p>
<div class="product_meta">
<span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
<span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
</div>
<div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span> <span class="pro-price"> $300.00</span></div>
<div class="form-group">
<label>Quantity</label>
<input type="quantiy" placeholder="1" class="form-control quantity">
</div>
<p>
<button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</p>
</div>
</div>
</section>
</div>
</div>
Please help. Thank you.


Use d-flex class in the parent div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<div class="container bootdey">
<div class="col-md-12">
<section class="panel">
<div class="panel-body d-flex border border-5 p-2">
<div class="col-md-6">
<div class="pro-img-details">
<img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
</div>
<div class="pro-img-list">
<a href="#">
<img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
</a>
<a href="#">
<img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
</a>
</div>
</div>
<div class="col-md-6 p-3">
<h4 class="pro-d-title">
<a href="#" class="">
Leopard Shirt Dress
</a>
</h4>
<p>
Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
</p>
<div class="product_meta">
<span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
<span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
</div>
<div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span> <span class="pro-price"> $300.00</span></div>
<div class="form-group">
<label>Quantity</label>
<input type="quantiy" placeholder="1" class="form-control quantity">
</div>
<p>
<button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
</p>
</div>
</div>
</section>
</div>
</div>
</body>
</html>

Related

Block content at the top of a hero-body with Bulma

I have a page with a fullheight hero element and I want to "stick" the content that is in <div class="hero-body"> on the top of its container beacuse as now it centers automatically and I don't want that (it's a dashboard...).
How I can do?
Thanks in advance.
This is like what I want:
This is currently my code:
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet"/>
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body">
<div class="container">
<div class="columns is-centered">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>

Add the following classes like below:
<div class="hero-body is-align-items-stretch"> <!-- the important class is here -->
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
....
</div>
<!-- the below one (is-align-self-center) is not mandatory if you don't want to center the banner -->
<div class="column is-7 is-align-self-center">
....
</div>
Full code
<link href="https://cdn.jsdelivr.net/npm/bulma#0.9.1/css/bulma.min.css" rel="stylesheet" />
<section class="hero is-fullheight-with-navbar">
<!-- Hero head: will stick at the top -->
<div class="hero-head">
<div class="container">
<div class="columns is-centered">
<div class="column is-four-fifths">
<nav class="navbar is-spaced" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ url_for('home') }}">
<img src="{{ url_for('static', filename='images/logo-m.png') }}" alt="logo">
<span class="has-text-grey-dark"> by Artemis™</span>
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item has-text-grey" href="{{ url_for('home') }}">Home</a>
<div class="navbar-item">
<a class="button is-primary is-rounded" href="{{ url_for('auth.login') }}">
<strong>Login</strong>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<!-- Hero content: will be in the middle -->
<div class="hero-body is-align-items-stretch">
<div class="container is-flex">
<div class="columns is-centered is-flex-grow-1">
<div class="column is-narrow">
<aside class="menu">
<p class="menu-label">Servizi Arc</p>
<ul class="menu-list">
<li>
<i class="fas fa-project-diagram"></i> Actions™
<ul style="{{ 'display: block;' if 'actions' in request.path else 'display: none;' }}">
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<a><i class="fas fa-shield-alt"></i> Security™ <span class="tag is-primary is-rounded">In arrivo</span></a>
</ul>
</aside>
</div>
<div class="column is-7 is-align-self-center">
<div class="box">
<h1 class="title has-text-weight-light">
Hello, <span class="has-text-weight-bold">username</span>.
</h1>
<p class="subtitle is-5 has-text-grey">Seleziona un servizio per continuare...</p>
</div>
</div>
</div>
</div>
</div>
<!-- Hero footer: will stick at the bottom -->
<div class="hero-foot">
<footer style="border-top: 1px solid hsl(0, 0%, 93%); padding-top: 1.7rem;">
<div class="container">
<div class="columns is-vcentered is-centered has-text-centered-mobile">
<div class="column is-narrow">
<img src="{{ url_for('static', filename='images/logo-s.png') }}" alt="logo">
</div>
<div class="column is-3">
<h5 class="title is-5 has-text-grey-light has-text-weight-normal is-italic">
Arc ha come obiettivo il creare un'ecosistema semplice ma potente per aiutarti a gestire tutte le tue operazioni.
</h5>
</div>
<div class="column is-4 is-narrow">
© 2020 RGBCraft & Artemis™.
<br>
<i>Tutti i diritti riservati.</i>
</div>
<div class="column is-narrow">
Sitemap
<ul>
<li><a class="has-text-grey" href="{{ url_for('home') }}">Home</a></li>
<li><a class="has-text-grey" href="{{ url_for('auth.login') }}">Login</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</section>

Basically what you are trying to achieve , pushing contents from bottom to top is by not displaying the top content
rather than setting the visibility of top portion to invisible
Try this out ,( in your class="hero-head")
<div class="hero-head display is-hidden-mobile">
Please refer this documentation for more clarification

Cut the text length as the screen gets smaller

I want the text length to shrink when the screen gets smaller
<div class="dress-card hvr-bob">
<div class="dress-card-head">
<img class="dress-card-img-top" src="img/rdr2.jpg" alt="">
</div>
<div class="dress-card-body">
<h2 class="dress-card-title">Red Dead Redemption 2</h2>
<p class="dress-card-para">Social Club Key</p>
<p class="dress-card-para"><span class="dress-card-price">200TL  </span>
<!--<span class="dress-card-crossed">300TL</span><span class="dress-card-off"> İndirim!</span>--></p>
<div class="row">
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner bag-button"><i class="fas fa-shopping-cart"></i> Satın Al</div>
</a>
</div>
<div class="col-md-6 card-button">
<a style="text-decoration: none;" href="">
<div class="card-button-inner wish-button"><i class="fas fa-shopping-basket"></i> Sepete Ekle</div>
</a>
</div>
</div>
</div>
</div>
</div>
help

Add font-size:8vw; to your CSS. You can add it to p or specific for a class or id.
You can change the 8 to any number you want.
I hope thats what you searching :)

Background Image not Displaying Correctly in Div Using CSS

I have a site in which the header image is not displaying correctly in mobile. I'm using bootstrap 4, so the site should be responsive. But when I load my site in mobile browser the header image repeats. I remove the no-repeate in css, but then the image covers half of the div, the other half is blank. The header works just fine in laptop, and desktop. is just mobile I'm having problem displaying.
here's the site JV Computers
HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- PAGE settings -->
<link rel="icon" href="https://templates.pingendo.com/assets/Pingendo_favicon.ico">
<title>JV Computer Service</title>
<meta name="description" content="JV Computer Service main page">
<meta name="keywords" content="Desktop Support, Computer Repair, Virus Removal, Data Recovery, Server Administration, Printer Repair, Network Installation, Wireless, Website Development">
<meta name="author" content="JV Computer Servic"e>
<!-- CSS dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="wireframe.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container"> <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar13">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar13"> <a class="navbar-brand d-none d-md-block" href="#">
<img class="head-logo" src="../../work/graphics/logo.png" width="30" height="30" class="d-inline-block align-top" alt="" >
<b><span class="title"> JV Computer Service</span> (305) 680 4659</b>
</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#about">About</a> </li>
<li class="nav-item"> <a class="nav-link" href="support.html">Support</a> </li>
<li class="nav-item"> <a class="nav-link" href="index.html#contact">Contact</a> </li>
</ul>
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="https://twitter.com/geoVT25" target="_blank">
<i class="fa fa-twitter fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/pctechtips25" target="_blank">
<i class="fa fa-facebook fa-fw"></i>
</a> </li>
<li class="nav-item"> <a class="nav-link" href="https://www.youtube.com/channel/UCOH7oeWBE2pgcFPFmj7lCqw" target="_blank">
<i class="fa fa-fw fa-youtube"></i>
</a> </li>
</ul>
</div>
</div>
</nav>
<div class="text-center py-5 head-section" >
<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-md-9">
<h1><strong>Simplified IT Solutions</strong></h1>
<h2 class="bg-warning">Technology solutions for small business and homes</h2>
learn more
get support
</div>
</div>
</div>
</div>
<div class="py-4 bg-light" id="services">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Services</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="lead text-center">Bellow you can see a brief description of our services and price. These fall into three main category: Desktop Support, System Maintanance, and Network Installation. If you would like to know more details, go to the Service page.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 p-3">
<div class="card box-shadow rounded border border-secondary" >
<img class="card-img-top" src="assets/styleguide/thinkstockphotos-479282847.jpg">
<div class="card-body">
<h3 class="text-center">Desktop Support</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 contenteditable="true">60 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1506399309177-3b43e99fead2.jpg">
<div class="card-body">
<h3 class="text-center">System Administration</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5 style="">100 $ 1hr</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4 p-3">
<div class="card box-shadow border border-secondary rounded">
<img class="card-img-top" src="assets/styleguide/photo-1544197150-b99a580bb7a8.jpg">
<div class="card-body">
<h3 class="text-center">Network Installation</h3>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<div class="d-flex justify-content-between align-items-center">
<a class="btn btn-primary" href="#">learn more</a>
<h5>150 $ 1hr</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="mb-3">About Us</h1>
<p>JV Computer Service is a small Computer Repair and IT Solution company. It's own and operated by its owner who has over 20 years experience in the computer and IT field. He acquired most of his experience working for the school district and managing and supporting multiple schools with over 500 computers. During that time he was responsible for providing user support, and system administration​.<br>He was responsible for the management and completion of several projects. One project, involved the installation of more than 100 computers in a new student building. This project included physical installation of PC's, cabling, and rolling out the operating system and different application. </p>
</div>
</div>
</div>
</div>
<div class="py-5 bg-dark" id="contact">
<div class="container">
<div class="row">
<div class="mx-auto text-center col-lg-8">
<h1 class="mb-3">Contact Us</h1>
<p class="lead mb-4">If you experiencing any computer issues, lets us assist you. Fill the form bellow with a description and phone</p>
</div>
</div>
<div class="row">
<div class="p-0 order-2 order-md-1 col-lg-6"> <iframe width="100%" height="350" src="https://maps.google.com/maps?hl=en&q=New%20York&ie=UTF8&t=&z=14&iwloc=B&output=embed" scrolling="no" frameborder="0"></iframe> </div>
<div class="px-4 order-1 order-md-2 col-lg-6">
<h2 class="mb-4">Create a ticket</h2>
<form>
<div class="form-group"> <input type="text" class="form-control" id="form44" placeholder="Name"> </div>
<div class="form-group"> <input type="email" class="form-control" id="form45" placeholder="Email"> </div>
<div class="form-group"> <textarea class="form-control" id="form46" rows="3" placeholder="Your message"></textarea> </div> <button type="submit" class="btn btn-primary">Send</button>
</form>
</div>
</div>
</div>
</div>
<footer class="py-5 bg-secondary text-dark">
<div class="container">
<p class="float-right text-dark">
Back to top
</p>
<p>JV Computer Service website was designed with Pingendo and Bootstrap<br>All rights reserved JV Computer Service LLT</p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS code
.head-logo {
background-image: url(assets/styleguide/logo.png);
background-position: top left;
background-size: 100%;
background-repeat: repeat;"
}
.title {
color:#f9b751;
}
.head-section {
background-image: url(assets/styleguide/jonathan-SwVkmowt7qA-unsplash.jpg);
background-position: left top;
background-size: 100%;
background-repeat: repeat;
}
.card {
border-style: solid;
}
.card-img-top {
background-position: top left;
background-size: 100%;
background-repeat: no-repeat;
}

this should do it: background-size: cover;

Foreach loop for image slide show does not work

I am trying to parse some data and images from controller to show on view. I implemented a foreach loop to show some images in slideshow. But whenever I run the code only the first image appears inside the body, and other images and information goes below the footer. I am not getting what mistake I made in this code.
My code is-
<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
} }
</div>
</body>
</html>
My view is looking like this.

Hope it will solve your issue.
<div class="col-lg-10">
<h2>#ViewBag.Title</h2>
<ol class="breadcrumb">
<li class="active">
Back
</li>
</ol>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Search</title>
</head>
<body>
<div>
#foreach (var item in ViewBag.Cities) {
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>#item.Name</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
</div>
</div>
<div class="ibox-content">
<p>#item.Shorttext</p>
</div>
</div>
</div>
}
foreach (var image in item.Images) {
<div class="col-lg-5">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Animation without caption</h5>
</div>
<div class="ibox-content">
<div class="carousel slide" id="carousel1">
<div class="carousel-inner">
<div class="item active">
<img alt="image" class="img-responsive" src="#image" style="height:400px;width:600px">
</div>
</div>
<a data-slide="prev" href="#carousel1" class="left carousel-control">
<span class="icon-prev"></span>
</a>
<a data-slide="next" href="#carousel1" class="right carousel-control">
<span class="icon-next"></span>
</a>
</div>
</div>
</div>
</div>
}
</div>
</body>
</html>

remove element on last element of JSON object

How would you conditionally remove the last <"hr> from the input of this JSON object..upon retrieving the last object inside of it?
<div class="row" ng-repeat="post in posts">
<div class="col-lg-9 col-lg-offset-2">
<!-- blog entry -->
<h1>{{post.title}} </h1>
<p><span class="glyphicon glyphicon-time"></span>{{post.time_Date}} </p>
<img ng-src="{{post.imageUrl}}" width="400" height="350">
<br>
<br>
<br>
<p>{{post.blog_Post}} </p>
<a class="btn btn-default btn-sm" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
<hr>
</div>
</div>

<div class="row" ng-repeat="post in posts">
<div class="col-lg-9 col-lg-offset-2">
<!-- blog entry -->
<h1>{{post.title}} </h1>
<p><span class="glyphicon glyphicon-time"></span>{{post.time_Date}} </p>
<img ng-src="{{post.imageUrl}}" width="400" height="350">
<br>
<br>
<br>
<p>{{post.blog_Post}} </p>
<a class="btn btn-default btn-sm" href="#">Read More <span class="glyphicon glyphicon-chevron-right"></span></a>
**<hr ng-hide="$index==posts.length">**
</div>
</div>
Something like this should work