How to prevent overrding in Jinja2 engine for different sections? - html

I am very new to Flask and I have read related questions but I still don't understand how to fix this problem so any help would be greatly appreciated. Please don't duplicate this question.
I have the following file:
index.html
{% extends "bootstrap/base.html" %}
{% block styles %}
<!-- Bootstrap core CSS -->
<link href="/static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Custom styles for this template -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/agency.css">
<link rel="stylesheet" type="text/css" href="/static/css/agency.min.css">
{% endblock %}
{% block navbar %}
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">RFJI Protein Database</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{{ url_for('upload')}}">Upload File</a>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#">Protein Database</a>
</li>
</li>
</li>
</li>
<div class="wrap">
<div class="search">
<div class="col-lg-11 text-center">
<input type="text" class="searchTerm" placeholder="What are you looking for?">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</ul>
{% endblock %}
{% block content %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
</div>
</div>
</nav>
<header class="masthead">
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Welcome to the RFJI Protein Database!</div>
<div class="intro-heading text-uppercase">It's Nice To Meet You</div>
<style>
font-family: Arial;
</style>
{% endblock %}
{% block body %}
<!-- Services -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Features</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<img src="/static/img/kinase.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinases</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/inhibitor.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Search Kinase Inhibitors</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-4">
<img src="/static/img/upload.png" alt="Girl in a onci" style="width:80px;height:90px;">
</span>
<h4 class="service-heading">Import your own dataset</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
{% endblock %}
The problem is that the Jinja2 engine only displays the Services section but ignores everything else. How can I fix this please?. I have added a image on how I want the website to look like it.
How I want the website to look like
Many Thanks,
Moshi


At a glance, the whole template is a mess.
This should be deleted completely, as it doesn't belong in the middle of the template:
<style>
font-family: Arial;
</style>
There are multiple <body> tags. In the correct syntax there should be only 1 <body> tag, which should probably be part of the base.html template. Towards the end of this file, the corresponding </body> tag should also be present.
Some of the <div> tags are not closed properly.
You really need to go back and rearrange this tempate so that each Jinja2 {% block something %} {% endblock %} section contains a complete set of tags (for example a full bootstrap div container block which is closed properly before the endblock statement.
Template inheritance is described fully in the Jinja2 docs. I assume you've cut and pasted sections of this template from somewhere else which isn't a problem provided you make sure that important components of the source bootstrap template aren't split up in the wrong places.

Related

How to vertically center content using Bootstrap v5.2

I'm trying to replicate this website vertical centering for my own website but I keep seen my content up to the top of the view port.
Expected result:
My code:
The snippet:
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Thank you for your time.

It's not vertically centered because you haven't set the height to the parent (i.e., row).
See the snippet below.
.row {
height: 100vh;
border: 1px solid red;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>Cover template for Bootstrap, by #mdo.</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
EDIT
To reply #Jitender... Yes, but the OP didn't include header and footer into the code. Therefore, my original answer solves the problem. However, if OP wants to have a header and footer, then the snippet below is the solution.
<!doctype html>
<html lang="en" class="h-100">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body class="d-flex h-100 text-center text-bg-dark">
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="mb-auto">Header</header>
<main>
<div class="row align-items-center">
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture">
</div>
<div class="col align-self-center">
<h1 class="text-center">Hola, soy <span class="text-primary">Jorge.</span></h1>
<p class="text-center text-muted">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam perferendis libero itaque accusantium fugiat aperiam, illo natus voluptate!</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
</main>
<footer class="mt-auto">Footer</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

The answer given above by Cerves is partially correct... If you are planning to replicate the view in the link provided... You can add a few stlyling like provided below
Like we should add the height to the whole body and have an overflow-y:hidden... this will not show scroll and limit you page view to the screen height... The container containing the content here "row" will be set to max-height of 100vh(height:100vh)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JorgeEscobar.XYZ</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" />
</head>
<body style="height: 100vh; overflow-y: hidden">
<div class="container py-auto">
<header class="mb-auto"></header>
<div class="row align-items-center" style="height: 100vh; overflow-y: hidden" >
<div class="col-sm-4 align-self-center">
<img src="https://via.placeholder.com/200" class="img-fluid border border-primary rounded-circle mx-auto d-block" alt="Jorge Escobar's portrait picture" />
</div>
<div class="col align-self-center">
<h1 class="text-center">
Hola, soy <span class="text-primary">Jorge.</span>
</h1>
<p class="text-center text-muted">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam
perferendis libero itaque accusantium fugiat aperiam, illo natus
voluptate!
</p>
<div class="d-grid gap-2 col-6 mx-auto">
<a class="btn btn-primary text-center" href="https://drive.google.com/file/d/1CpPR5h1ZhHF2ftQGKEgcYfer5TAuAj33/view?usp=sharing" role="button" target="_blank" rel="noopener noreferrer">đŸ“„Curriculum Vitae</a>
</div>
</div>
</div>
<footer class="mt-auto text-white-50">
<p>
Cover template for
Bootstrap,
by #mdo.
</p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>

how to css link influence only to a "div" card?

I have a project and use more than 1 template I have problems with 2 css links from 2 different templates, I want the css link from templates to only affect a single html card without affecting the rest in file .cshtml . Please give me a solution.
I have the layout.cshtml file as follows and the css link in my 2nd templates in the last line
<head>
<title>POU Education Category Bootstrap Responsive website Template | Home :: w3layouts</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="POU Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- Custom Theme files -->
<link href="~/home/css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!-- shop css -->
<link href="~/home/css/shop.css" type="text/css" rel="stylesheet" media="all">
<link href="~/home/css/style.css" type="text/css" rel="stylesheet" media="all">
<!-- font-awesome icons -->
<link href="~/home/css/font-awesome.css" rel="stylesheet">
<!-- //Custom Theme files -->
<!-- online-fonts -->
<!-- logo -->
<link href="//fonts.googleapis.com/css?family=Fredericka+the+Great" rel="stylesheet">
<!-- titles -->
<link href="//fonts.googleapis.com/css?family=Merriweather+Sans:300,300i,400,400i,700,700i,800,800i" rel="stylesheet">
<!-- body -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<!-- //online-fonts -->
<link href="//fonts.googleapis.com/css2?family=Hind:wght#300;400;500;600&display=swap" rel="stylesheet">
<link href="//fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap" rel="stylesheet">
<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">
</head>
This is an index.cshtml file code that uses the layout above
<!--end post-->
<div class="w3l-homeblock2 py-5">
<div class="container py-lg-5 py-md-4">
<!-- block -->
<div class="row">
<div class="col-lg-12">
<h3 class="section-title-left mb-4"> Editor's Pick </h3>
<div class="row">
<div class="col-lg-6 col-md-6 item">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image1.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Beauty</span>
<a href="#blog-single.html" class="blog-desc">The 3 Eyeshadow palettes I own & How to
downsize your stash
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a1.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Isabella ava </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 mt-md-0 mt-sm-5 mt-4">
<div class="card">
<div class="card-header p-0 position-relative">
<a href="#blog-single.html">
<img class="card-img-bottom d-block radius-image-full"
src="assets/images/image2.jpg" alt="Card image cap">
</a>
</div>
<div class="card-body blog-details">
<span class="label-blue">Fashion</span>
<a href="#blog-single.html" class="blog-desc">2 New outfit formulas to add to your
Capsule Wardrobe
</a>
<p>Lorem ipsum dolor sit amet consectetur ipsum adipisicing elit. Quis
vitae sit.</p>
<div class="author align-items-center mt-3 mb-1">
<img src="assets/images/a2.jpg" alt="" class="img-fluid rounded-circle" />
<ul class="blog-meta">
<li>
Charlotte mia </a>
</li>
<li class="meta-item blog-lesson">
<span class="meta-value"> July 13, 2020 </span>. <span
class="meta-value ml-2"><span class="fa fa-clock-o"></span> 1 min</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like to take the path css at the bottom of the layout.cshtml file (<link href="~/css/style-starter.css" type="text/css" rel="stylesheet">) only affects the card // in the first line (//) but other card components will not be usable in the index file.cshtml

What I understand is that you got 2-cards in 2-separate-html-files, now you want some global-css to be applied on one, but not in the other html-file or some card contained there.
Solution-1:
Add an extra class like .special-card and use this class in 1st-file to add CSS to the card selectively, based on this class. Now, when you don't have attach this class in the 2nd card, CSS will NOT be automatically applied there.
Solution-2:
In card, where you don't want the CSS to be applied, use Inline-CSS adding styles in the html-element directly to override CSS coming from global-CSS file.
Solution-3:
Keep the CSS that you want to partially apply in some separate test.css file, and attach it to only the card (externally), where you want to apply this. Just don't just attach this external .CSS file in your 2nd html file, so it won't take affect.

Anchor tags are breaking carousel slider - Bootstrap 4

Hoping someone can help me here.
Messing around with Bootstrap 4 carousel, and I've found that if the content of the slide has an anchor tag in there somewhere, the carousel simply will not go to that slide. I would like to keep the design of having a button to link to other parts of the site on the slide, but i don't know how to implement it if the carousel won't slide to it.
I did extensive troubleshooting, and it's definitely the a tag causing this, as the same code minus the anchor tag around the button works perfectly fine.
Thanks for the help.
Code is as follows:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a href="https://www.thewhiskyambassador.com/courses-training/"><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>

I change the code,
obviously you can add anchor tag in bootstarp slider i just remove button and add class in anchor tag and then done.
You miss to close anchor tag.
never use a button as a child of anchor tag
Code is as follows:
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pics/soWhiskyGlass2Cropped.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
<div class="carousel-item">
<img src="pics/soWhisky1Cropped.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="pics/soWhiskyBottlesCropped.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
Find out more
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>

<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<title>SW Events - Tasting Menus</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container" id="tastingCar">
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="So Whisky Tasting" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button>
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Gin Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Gin Tastings</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero ullam distinctio, eaque provident qui temporibus totam odit consequuntur deleniti facere soluta eum explicabo laboriosam ab sit accusamus reiciendis doloremque unde!</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/park.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Private Tastings</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit perspiciatis molestiae, minima, omnis esse quas nostrum aperiam vel recusandae magni ea eum magnam quae, voluptatibus earum deserunt sint. Omnis, nobis.</p>
</div>
</div>
<div class="carousel-item text-left ">
<img src="https://raw.githubusercontent.com/LeshikJanz/libraries/master/Related%20images/Bootstrap%20example/bridge.jpg" class="rounded" alt="Private Tastings" width="950" height="550">
<div class="carousel-caption text-left">
<h3>Whisky Tastings</h3>
<p class="card-text menuText"><i>SW Events'</i> finely catered whisky tastings will leave you satisfied in the knowledge of a broadened pallete. <br>
Tastings are constructed around style, distillary and global location in order to explore the subtle differences whiskies can hold.</p>
<div class="menuBook align-items-center">
<!-- Anchor tag won't allow carousel to slide -->
<a><button type="button" class="btn btn-secondary text-right" style="color:white;font-size:16px;">Find out more</button></a>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" 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.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tastingTitle").fadeIn(750, function() {
$("#tastingCar").fadeIn(1000, function() {
$("#weddingSub").fadeIn(1250);
});
});
});
var myFunc = $(document).ready(function(){
$("#bookWedding").click(function () {
$("#chateauLogo").fadeOut(500);
$("#weddingSub").fadeOut(500);
$("#inAssoc").fadeOut(500);
$("#bookWedding").fadeOut(500, function () {
$("#weddingForm").fadeIn(500);
});
});
});
$(function () {
$( "#datepicker" ).datepicker();
} );
$('.carousel').carousel({
interval: false
});
</script>
</div>
</body>
try this

How to display Blog Post Snippets on blog time-line and home page etc

I recently purchased a responsive website template and I am pretty confused as to how my blog posts would automatically show blog post snippets(intro) on my blog timeline and homepage. I am using Umbraco cms (6.1.5) and this is my blog post html code:
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="isie ie8 oldie no-js"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="isie ie9 no-js"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="<umbraco:Item field="postMetaDescription" runat="server" />">
<!-- Title -->
<title><umbraco:Item field="postTitle" runat="server" /></title>
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700' rel='stylesheet' type='text/css'>
<!-- Stylesheets -->
<link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/>
<link rel='stylesheet' id='prettyphoto-css-css' href='js/prettyphoto/css/prettyPhoto.css' type='text/css' media='all'/>
<link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/>
<link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/>
<link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/>
<!-- jQuery -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("hgroup");
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="scripts/icomoon.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/jquery.placeholder.js"></script>
<script src="scripts/script_ie.js"></script>
<![endif]-->
</head>
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<div id="marine-content-wrapper">
<header id="header" class="style6">
<div id="upper-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="item left hidden-separator">
<ul id="menu-shop-header" class="menu">
</ul>
</div>
<div class="item right hidden-separator">
<div class="shopping-cart-dropdown">
<div class="cart-menu-item ">
<div class="sc-header">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Header -->
<div id="main-header">
<div class="container">
<div class="row">
<!-- Logo -->
<div class="col-lg-4 col-md-4 col-sm-4 logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
<div id="main-nav-button">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-sm-8 align-right">
<!-- Text List -->
<ul class="text-list">
<li>Call Us: +1 800 450 17 08</li>
</ul>
<!-- Social Media -->
<ul class="social-media">
<li><a target="_blank" href="http://facebook.com"><i class="icon-facebook"></i></a>
</li>
<li><a target="_blank" href="http://twiiter.com/google"><i class="icon-twitter"></i></a>
</li>
<li><a target="_blank" href="http://google.com"><i class="icon-google"></i></a>
</li>
<li><a target="_blank" href="http://linkedin.com"><i class="icon-linkedin"></i></a>
</li>
<li><a target="_blank" href="http://instagram.com"><i class="icon-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Main Header -->
<!-- Lower Header -->
<div id="lower-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="lower-logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
</div>
<!-- Main Navigation -->
<ul id="main-nav">
<ul class='mainMenu'>
<li><a href='http://www.redflyseo.co.za' title='Home'>HOME</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/seo' title='SEO'>SEO</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'>SOCIAL MEDIA</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'>CONTENT MARKETING</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'>DIGITAL AUDITS</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'>SME BUSINESS PACKAGE</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/blog' title='BLOG'>BLOG</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'>CONTACT US</a></li>
</ul>
<!-- /Main Navigation -->
</div>
</div>
</div>
<!-- /Lower Header -->
<script type="text/javascript">
//<![CDATA[
(function() {
var shr = document.createElement('script');
shr.setAttribute('data-cfasync', 'false');
shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
shr.type = 'text/javascript'; shr.async = 'true';
shr.onload = shr.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
try { Shareaholic.init(site_id); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(shr, s);
})();
//]]>
</script>
</header>
<!-- /Header -->
<!-- Marine Content Inner -->
<div id="marine-content-inner">
<!-- Main Content -->
<section id="main-content">
<!-- Container -->
<div class="container">
<!-- Container -->
<div class="container">
<div class="page-heading style3 wrapper border-bottom ">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1><umbraco:Item field="blogPostTitle" runat="server" /></h1>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<p class="breadcrumbs" xmlns:v=""><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://www.redflyseo.co.za">Home</a></span><span class="delimiter">|</span> <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="#">Blog</a></span><span class="delimiter">|</span> <span class="current"><umbraco:Item field="pageName" runat="server" /></span></p>
</div>
</div>
</div>
<div class="row">
<section class="main-content col-lg-9 col-md-8 col-sm-8 small-padding">
<div class="row">
<div id="post-items">
<!-- Post Item -->
<div class="post blog-post blog-post-classic col-lg-12 col-md-12 col-sm-12 margin-top20">
<div class="blog-post-list">
<div class="blog-post-meta">
<span class="post-date">
<span class="post-day"><umbraco:Item field="day" runat="server" /></span><br/>
<umbraco:Item field="monthYear" runat="server" /> </span>
<span class="post-format">
<span class="photo-icon"></span>
</span>
<img alt='' src='<umbraco:Item field="authorPhoto" runat="server" />' class='avatar'/>
<span class="author"><umbraco:Item field="writerName" runat="server" /></span>
</div>
<div class="blog-post-content">
<!-- Post Image -->
<div class="post-thumbnail">
<img src="<umbraco:Item field="blogPhoto" runat="server" />" alt=""/>
<div class="post-hover">
</div>
</div>
<!-- /Post Image -->
<!-- Post Content -->
<div class="post-content">
<ul class="post-meta">
<li>no comments</li>
</ul>
<ul class="social-icons style2 social-media">
<li><a target="_blank" href="#">
<i class="icon-facebook-squared"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="icon-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-google"></i>
</a>
</li>
<li>
<a target="_blank" href="#" >
<i class="icon-pinterest"></i>
</a>
</li>
<li>
<a href="#">
<i class="icon-linkedin"></i>
</a>
</li>
</ul>
<p><umbraco:Item field="content" runat="server" /></p>
</div>
<!-- /Post Content -->
</div>
</div>
<div class="post-author margin-bottom35">
<img alt="" src="img/avatar.png" class="avatar">
<h3>About Jack</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium adipisci architecto aspernatur consequuntur debitis distinctio dolorem, doloremque eius error eum eveniet facere harum impedit incidunt labore magnam modi necessitatibus non optio perspiciatis quas saepe similique tempore temporibus totam unde velit! Animi architecto culpa dolor expedita id illum impedit praesentium quae? Alias amet, exercitationem iure natus obcaecati ratione! Accusantium assumenda, dignissimos eveniet incidunt nesciunt perspiciatis similique. Alias aperiam architecto, autem ea error harum modi nemo nobis obcaecati quas. Accusamus atque aut consequatur consequuntur cumque debitis dolorem esse incidunt iure odio, odit, quia, repellendus saepe. Deserunt id libero magnam sunt voluptatum?</p>
</div>
</div>
<!-- /Post Item -->
</div>
</div><div class="row">
<div class="col-sm-12">
<div id="comments" class="post-comments">
<div id="respond" class="comment-respond">
</form>
</div><!-- #respond -->
</div><!-- #comments -->
</div>
</div>
</section>
<aside class="sidebar col-lg-3 col-md-4 col-sm-4">
<div id="twitter-rss-2" class="widget Twitter_Counter_media">
<div class="social">
<div class="social-item">
<a href="google">
<img alt="" src="img/twitter.png">
<span><span class="bold">9401354</span><br>
Followers</span>
</a>
</div>
<div class="social-item">
<a href="#">
<img alt="" src="img/rss.png">
<span><span class="bold">Subscribe</span><br>
to RSS Feed</span>
</a>
</div>
</div>
</div>
<div id="call-to-action-widget-2" class="widget widget_call_to_action">
<h3></h3>
<div class="info-box">
<h2><umbraco:Item field="callTitle" runat="server" /></h2>
<h4><umbraco:Item field="ndHeader" runat="server" /></h4>
<umbraco:Item field="buttonText" runat="server" />
</div>
</div>
</aside>
</div>
</div>
<!-- /Container -->
</section>
<!-- /Main Content -->
</div>
<!-- /Marine Conten Inner -->
<!-- Footer -->
<footer id="footer">
<!-- Main Footer -->
<div id="main-footer" class="smallest-padding">
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="text-2" class="widget widget_text">
<div class="textwidget">
<img src="img/marine-logo-light.png" alt="logo">
<p>
Vivamus orci sem, consectetur ut vestibulum a, mper ac dui. Aenean tellus nisl, commodo eu aliquet ut, pulvinar ut sapien. Proin tate aliquam mi nec hendrerit.
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="latest-posts-3" class="widget widget_latest_posts_entries">
<h4>Latest Posts</h4>
<div class="blog-post">
<span class="post-meta">June 11, 2014 | Jack</span>
<a class="post-title" title="Single Blog Post" href="#">Single Blog Post</a>
<p>
Suspendisse ornare tincidunt massa et malesuada. Integer consequat suscipit velit
</p>
</div>
<div class="blog-post">
<span class="post-meta">June 8, 2014 | Jack</span>
<a class="post-title" title="A Simple Text Post" href="#">A Simple Text Post</a>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend
</p>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="text-4" class="widget widget_text">
<h4>Contact</h4>
<div class="textwidget">
<ul class="iconic-list">
<li>
<i class="icons icon-location-7"></i>
Phoenix Inc.<br>
PO Box 21177 <br>
Little Lonsdale St, Melbourne <br>
Victoria 8011 Australia </li>
<li>
<i class="icons icon-mobile-6"></i>
Phone: (415) 124-5678 <br>
Fax: (415) 124-5678 </li>
<li>
<i class="icons icon-mail-7"></i>
support#yourname.com </li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3">
<div id="wysija-3" class="widget widget_wysija">
</div>
</div>
<div id="social-media-2" class="widget widget_social_media">
<h4>Follow Us</h4>
<ul class="social-media">
<li class="tooltip-ontop" title="Facebook"><i class="icon-facebook"></i></li>
<li class="tooltip-ontop" title="Twitter"><i class="icon-twitter"></i></li>
<li class="tooltip-ontop" title="Google Plus"><i class="icon-google"></i></li>
<li class="tooltip-ontop" title="Linkedin"><i class="icon-linkedin"></i></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Main Footer -->
<!-- Lower Footer -->
<div id="lower-footer">
<div class="container">
<span class="copyright">© 2014 Marine. All Rights Reserved</span>
</div>
</div>
<!-- /Lower Footer -->
</footer>
<!-- /Footer -->
</div>
<!-- /Marine Content Wrapper -->
<!-- JavaScript -->
<script type='text/javascript' src='scripts/bootstrap.min.js'></script>
<script type='text/javascript' src='scripts/jquery-ui.min.js'></script>
<script type='text/javascript' src='scripts/jquery.easing.1.3.js'></script>
<script type='text/javascript' src='scripts/jquery.mousewheel.min.js'></script>
<script type='text/javascript' src='scripts/SmoothScroll.min.js'></script>
<script type='text/javascript' src='scripts/jquery.prettyPhoto.js'></script>
<script type='text/javascript' src='scripts/modernizr.js'></script>
<script type='text/javascript' src='scripts/wow.min.js'></script>
<script type='text/javascript' src='scripts/jquery.sharre.min.js'></script>
<script type='text/javascript' src='scripts/jquery.flexslider-min.js'></script>
<script type='text/javascript' src='scripts/jquery.knob.js'></script>
<script type='text/javascript' src='scripts/jquery.mixitup.min.js'></script>
<script type='text/javascript' src='scripts/masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='scripts/jquery.masonry.min.js?ver=3.1.2'></script>
<script type='text/javascript' src='scripts/jquery.fitvids.js'></script>
<script type='text/javascript' src='scripts/perfect-scrollbar-0.4.10.with-mousewheel.min.js'></script>
<script type='text/javascript' src='scripts/jquery.nouislider.min.js'></script>
<script type='text/javascript' src='scripts/jquery.validity.min.js'></script>
<script type='text/javascript' src='scripts/tweetie.min.js'></script>
<script type='text/javascript' src='scripts/script.js'></script>
</body>
</html>
and this is my blog post timeline code:
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="isie ie8 oldie no-js"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="isie ie9 no-js"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Marine Main 1">
<!-- Title -->
<title>Blog Timeline Style | Marine</title>
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.jpg" type="image/x-icon"/>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800' rel='stylesheet' type='text/css'>
<!-- Stylesheets -->
<link rel='stylesheet' id='twitter-bootstrap-css' href='css/bootstrap.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='fontello-css' href='css/fontello.css' type='text/css' media='all'/>
<link rel='stylesheet' id='prettyphoto-css-css' href='css/prettyPhoto.css' type='text/css' media='all'/>
<link rel='stylesheet' id='animation-css' href='css/animation.css' type='text/css' media='all'/>
<link rel='stylesheet' id='perfectscrollbar-css' href='css/perfect-scrollbar-0.4.10.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-validity-css' href='css/jquery.validity.css' type='text/css' media='all'/>
<link rel='stylesheet' id='jquery-ui-css' href='css/jquery-ui.min.css' type='text/css' media='all'/>
<link rel='stylesheet' id='style-css' href='css/style.css' type='text/css' media='all'/>
<link rel='stylesheet' id='mobilenav-css' href='css/mobilenav.css' type='text/css' media="screen and (max-width: 838px)"/>
<!-- jQuery -->
<script src="scripts/jquery-1.11.1.min.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("hgroup");
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/html5.js"></script>
<![endif]-->
<!--[if lt IE 7]>
<script src="scripts/icomoon.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if lt IE 9]>
<script src="scripts/jquery.placeholder.js"></script>
<script src="scripts/script_ie.js"></script>
<![endif]-->
</head>
<body class="w1170 headerstyle1">
<!-- Marine Content Wrapper -->
<div id="marine-content-wrapper">
<header id="header" class="style6">
<div id="upper-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="item left hidden-separator">
<ul id="menu-shop-header" class="menu">
</ul>
</div>
<div class="item right hidden-separator">
<div class="shopping-cart-dropdown">
<div class="cart-menu-item ">
<div class="sc-header">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Header -->
<div id="main-header">
<div class="container">
<div class="row">
<!-- Logo -->
<div class="col-lg-4 col-md-4 col-sm-4 logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
<div id="main-nav-button">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="col-sm-8 align-right">
<!-- Text List -->
<ul class="text-list">
<li>Call Us: +1 800 450 17 08</li>
</ul>
<!-- Social Media -->
<ul class="social-media">
<li><a target="_blank" href="http://facebook.com"><i class="icon-facebook"></i></a>
</li>
<li><a target="_blank" href="http://twiiter.com/google"><i class="icon-twitter"></i></a>
</li>
<li><a target="_blank" href="http://google.com"><i class="icon-google"></i></a>
</li>
<li><a target="_blank" href="http://linkedin.com"><i class="icon-linkedin"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Main Header -->
<!-- Lower Header -->
<div id="lower-header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="lower-logo">
<img class="logo" src="img/marine-logo.png" alt="Marine">
</div>
<!-- Main Navigation -->
<ul id="main-nav">
<ul class='mainMenu'>
<li><a href='http://www.redflyseo.co.za' title='Home'>HOME</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/seo' title='SEO'>SEO</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/social-media' title='SOCIAL MEDIA'>SOCIAL MEDIA</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/content-marketing' title='CONTENT MARKETING'>CONTENT MARKETING</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/digital-audits' title='DIGITAL AUDITS'>DIGITAL AUDITS</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/sme-business-package' title='SME BUSINESS PACKAGE'>SME BUSINESS PACKAGE</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/blog' title='Blog'>BLOG</a></li>
&nbsp|&nbsp
<li><a href='http://www.redflyseo.co.za/contact-us' title='Contact Us'>CONTACT US</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Lower Header -->
<script type="text/javascript">
//<![CDATA[
(function() {
var shr = document.createElement('script');
shr.setAttribute('data-cfasync', 'false');
shr.src = '//dsms0mj1bbhn4.cloudfront.net/assets/pub/shareaholic.js';
shr.type = 'text/javascript'; shr.async = 'true';
shr.onload = shr.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
var site_id = '4703ccf47ac9b99588c7a6fb9d1b4ce2';
try { Shareaholic.init(site_id); } catch (e) {}
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(shr, s);
})();
//]]>
</script>
</header>
<!-- /Header -->
<!-- Marine Content Inner -->
<div id="marine-content-inner">
<!-- Main Content -->
<section id="main-content">
<!-- Container -->
<div class="container">
<section class="full-width dark-blue-bg page-heading position-left-top size-cover" style="background-image: http://placehold.it/1903x90">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<h1><umbraco:Item field="blogName" runat="server" /></h1>
</div>
</div>
</div>
</section>
<script>
var timelinePerPage = 8;
var timelineOffset = 0;
var timelineOffsetNext = ( timelinePerPage * timelineOffset ) + timelinePerPage; // Current
// Offset of page
var currentMonth = null;
var currentYear = null;
var templateUrl = "<umbraco:Item field="path" runat="server" />";
</script>
<section class="full-width-bg normal-padding medium-gray-bg ">
<div class="timeline-container-wrap">
<div class="timeline-date-tooltip">
<span>June 2014</span>
</div>
<div class="row timeline-row">
<div class="masonry-container timeline-container">
<div class="col-lg-6 col-md-6 col-sm-6 masonry-box" data-year="2014" data-month="June">
<div class="blog-post masonry timeline">
<!-- POST FOOTER -->
<div class="post-footer">
<img alt='' src='img/avatar.png' class='avatar'/><span class="post-date">
<span class="post-day">11 june </span>
2014 </span>
<ul class="post-meta">
<li> By Jack </li>
</ul>
</div>
<!-- END POST FOOTER -->
<div class="post">
<div class="post-thumbnail">
<img src="http://placehold.it/528x214" alt="Quotes Time!"/>
<div class="post-hover">
<a class="link-icon" href="#"></a><a class="search-icon prettyPhoto" href="http://placehold.it/870x475"></a>
</div>
</div>
<div class="post-content">
<div class="post-details">
<h4 class="post-title">
<span class="post-format">
<span class="document-icon"></span></span>
Quotes Time!
</h4>
</div>
<p class="latest-from-blog_item_text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, convallis quis, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat. Proin vestibulum.
</p>
<a class="read-more big" href='blog-single.html' title="Quotes Time!">Read more</a>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- .masonry-container-wrapper -->
<div class="align-center load-more">
<a class="button big blue button-load-more" id="timeline-load-more" href="http://www.redflyseo.co.za/blog">Load More</a>
</div>
</section>
</div>
<!-- /Container -->
</section>
<!-- /Main Content -->
</div>
I would appreciate it if anyone could assist with this matter. I have been researching and been stuck for about a month with displaying blog post snippet on my blog timeline and home page. I deleted some of the footer code as I reached the limited of characters in this post.

front matter ignored on blog posts

I'm making a blog with jekyll that uses an index.html page with links to blog posts, as you see below in the first code sample. The default layout referred to in the front matter is a typical layout file with css styling by Twitter bootstrap included. However, when I click a link to a blog post in index.html, the blogpost is displaying (i.e. the url changes, the blog post content is displayed), however, the front-matter from the blogpost is being ignored, or at least it's appearing that way since none of the css styling is working on the blog post. For example, the css for the Twitter bootstrap navigation bar only shows on the home page, not the blog post.
Can you explain why this might be happening?
index.html
---
layout: default
---
{% for post in paginator.posts %}
<div class="row-fluid">
<!-- <div class="span12"> -->
<h2>{{ post.title }}</h2>
<h4>{{ post.date | date_to_long_string }}</h4>
<p>
Read Post
</p>
<!-- </div> -->
</div>
{% endfor %}
2013-10-15-lorem-ipsum-blog-post
---
title: Lorem Ipsum Dolor Sit Amet
layout: default
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse elemen\
tum leo non felis porttitor vulputate. Nulla ipsum quam, auctor ut hendreri\
t quis, tincidunt eu metus. Quisque ipsum tellus, semper a tempus quis, int\
erdum vel magna. Cras a nisl diam, in accumsan augue. Pellentesque varius n\
ibh eu diam tempor rhoncus.
_layouts/default.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ site.name }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{{ site.description }}">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".na\
v-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">{{ site.name }}</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li class="active">About</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="col-lg-9 col-sm-8">
{{ content }}
</div>
<div class="col-lg-3 col-sm-4">
{% include sidebar.html %}
</div>
</div>
</div> <!-- container -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Since your layout file is just a relative file, I would suggest you add the paths of your CSS and javascript from the root. For example
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="js/respond.min.js"></script>
should become
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script src="/js/respond.min.js"></script>