Bootstrap news css template

Here is a basic Bootstrap news CSS 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>&copy; 2023 News</p>
  </div>
</footer>

CSS

/* Global Styles */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.row {
  margin-bottom: 20px;
}

.list-group {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-group-item {
  padding: 10px;
  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: 14px;
  color: #666;
}

/* Header Styles */

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.navbar-toggler {
  padding: 10px;
  border: none;
  background-color: #333;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' d='M2 5l6 6-6 6M2 7l6-6-6-6'%3E%3C/path%3E%3C/svg%3E");
}

/* Main Content Styles */

main {
  padding: 20px;
}

main h1 {
  font-size: 24px;
  margin-top: 0;
}

main ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

main li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

main li:last-child {
  border-bottom: none;
}

main h2 {
  font-weight: bold;
  margin-top: 0;
}

main p {
  font-size: 14px;
  color: #666;
}

/* Sidebar Styles */

.sidebar {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.sidebar h2 {
  font-weight: bold;
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

.sidebar li:last-child {
  border-bottom: none;
}

.sidebar a {
  color: #337ab7;
  text-decoration: none;
}

.sidebar a:hover {
  color: #23527c;
}

/* Footer Styles */

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  clear: both;
}

This template uses Bootstrap's grid system to create a responsive layout. The main content area is divided into two columns, with the news articles in the left column and the sidebar in the right column. The sidebar contains categories and recent comments.

You can customize the template by adding your own content, images, and styles. You can also modify the CSS to change the layout and design of the template.

Note: This is just a basic template, and you may want to add more features and functionality to your news website.