Bootstrap news template
Here is a basic Bootstrap news template:
HTML Structure
<!-- Header -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">News</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</header>
<!-- Main Content -->
<main>
<div class="container">
<div class="row">
<div class="col-md-8">
<!-- News Articles -->
<h1>Latest News</h1>
<ul class="list-group">
<li class="list-group-item">
<h2>Article 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</li>
<li class="list-group-item">
<h2>Article 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</li>
<li class="list-group-item">
<h2>Article 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
</li>
</ul>
</div>
<div class="col-md-4">
<!-- Sidebar -->
<h2>Categories</h2>
<ul class="list-group">
<li class="list-group-item">
<a rel="nofollow" target="_blank" href="#">Politics</a>
</li>
<li class="list-group-item">
<a rel="nofollow" target="_blank" href="#">Sports</a>
</li>
<li class="list-group-item">
<a rel="nofollow" target="_blank" href="#">Entertainment</a>
</li>
</ul>
<h2>Recent Comments</h2>
<ul class="list-group">
<li class="list-group-item">
<a rel="nofollow" target="_blank" href="#">John Doe</a>
</li>
<li class="list-group-item">
<a rel="nofollow" target="_blank" href="#">Jane Smith</a>
</li>
</ul>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer>
<div class="container">
<p>© 2023 News</p>
</div>
</footer>
CSS (using Bootstrap)
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
nav {
background-color: #333;
padding: 1rem;
}
nav a {
color: #fff;
text-decoration: none;
}
nav a:hover {
color: #ccc;
}
main {
padding: 2rem;
}
.list-group {
list-style: none;
padding: 0;
margin: 0;
}
.list-group-item {
padding: 1rem;
border-bottom: 1px solid #ccc;
}
.list-group-item:last-child {
border-bottom: none;
}
.list-group-item h2 {
font-weight: bold;
margin-top: 0;
}
.list-group-item p {
font-size: 0.9rem;
color: #666;
}
.sidebar {
padding: 2rem;
background-color: #f7f7f7;
border: 1px solid #ddd;
}
.sidebar h2 {
font-weight: bold;
margin-top: 0;
}
.sidebar ul {
list-style: none;
padding: 0;
margin: 0;
}
.sidebar li {
padding: 0.5rem;
}
.sidebar a {
color: #337ab7;
text-decoration: none;
}
.sidebar a:hover {
color: #23527c;
}
footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
clear: both;
}
This template includes a basic header with a navigation menu, a main content area with a list of news articles and a sidebar with categories and recent comments, and a footer. You can customize the layout and design to fit your needs.
Note: This is just a basic template and you will need to add your own content and styles to make it functional and visually appealing.