I'm using Bootstrap to create a personal website/blog. I am sort of new to this framework, and to web-development in general, so I'd appreciate some pointers. I'd like any new page I add to have the same layout: side navigation menu taking up 3 columns, and the contents taking up the remaining 9. In small format, I'll have them each taking up the full 12 columns. I'd like to make this template because if I decide to change my site layout one day, I don't want to have to go through each individual file to do so. So is there any way to create a template, and import it into each page?
I Googled it, but can't seem to find anything about it. To me, it seems like a very obvious feature to have, so I figured I'd find something, but I haven't been able to.
Here's my page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Intro</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../main.css">
<link rel="stylesheet" type="text/css" href="template.css">
</head>
<body>
<!-- Top navbar -->
<nav class="navbar navbar-expand-md">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#main-navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-navigation">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Main body of page -->
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-lg-3 col-md-3 col-sm-12" id="sideBar">
<h4 class="feature-title">Table of Contents</h4>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse1">Introduction</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse2">Fundamentals</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" href="#collapse3">Software</a></h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Page Contents -->
<div class="col-lg-9 col-md-9 col-sm-12" id="main">
<h3 class="feature-title">Introduction</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque interdum quam odio, quis placerat ante luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis.</p>
</div>
</div>
</div>
<!--- Script Source Files -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="../main.js"></script>
<script src="template.js"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
</body>
I'd like the navbar, and sidebar to stay the same in all my pages. It's just the page contents (id="main") that is going to vary in the body. Also, I'd like the page title (in he header) to change as well. Is there some way to make that variable? Another reason I'd prefer to do it this way is that the table of contents is going to change as I add more pages, so I don't want to have to go through each file to change the table of contents each time I make a new page.
I appreciate the help. Thanks
Edit: Here's the CSS for template.css
#main {
transition: margin-left .5s;
padding: 20px;
}
#sideBar {
background: black;
padding: 20px;
}
.list-group-item {
background: black;
}
.list-group-item:hover {
color: green;
}
FYI: As per my suggestions, you should use some good scripting/programming languages like Ruby On Rails, Django or PHP to achieve the functionality of having one template rendering all the other page contents dynamically. So, you just need to change at your main template and will reflect on all the pages. It's a best practice.
Well, I am still giving you the solution as you are in the learning phase and you can achieve this using JQuery :) A good idea for just learning purpose.
[ Not For Production Purpose - Just a solution for your problem ]
Please find the solution for your problem here on github repo. I have combined your code and created a sample project for you to work with:
It's having one template called template.html and other different content specific pages for (id="main") index.html, about.html and contact.html rendering it's own content by following template.html template.
Please have a look at this github repo: https://github.com/ashishprajapati/template-for-basic-html
git clone [email protected]:ashishprajapati/template-for-basic-html.git
To start the html server, please follow these steps
npm install http-server -g
Please use this command with in the same directory where cloned project is present
http-server