Bootstrap dashboard template news feed

Here is a Bootstrap dashboard template with a news feed component:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Dashboard Template</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                    <a class="navbar-brand" href="#">News Feed Dashboard</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>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        News Feed
                    </div>
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <h5>News Title 1</h5>
                                <p>News description 1</p>
                            </li>
                            <li class="list-group-item">
                                <h5>News Title 2</h5>
                                <p>News description 2</p>
                            </li>
                            <li class="list-group-item">
                                <h5>News Title 3</h5>
                                <p>News description 3</p>
                            </li>
                            <!-- Add more news items here -->
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS (in styles.css file)

.card {
    margin-bottom: 20px;
}

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

.list-group-item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.list-group-item:last-child {
    border-bottom: none;
}

.list-group-item h5 {
    font-weight: bold;
    margin-top: 0;
}

.list-group-item p {
    font-size: 14px;
    color: #666;
}

JavaScript (optional)

// Add news items dynamically
const newsItems = [
    { title: "News Title 1", description: "News description 1" },
    { title: "News Title 2", description: "News description 2" },
    { title: "News Title 3", description: "News description 3" },
    // Add more news items here
];

const newsFeed = document.querySelector(".list-group");

newsItems.forEach((item) => {
    const newsItem = document.createElement("li");
    newsItem.classList.add("list-group-item");
    newsItem.innerHTML = `
        <h5>${item.title}</h5>
        <p>${item.description}</p>
    `;
    newsFeed.appendChild(newsItem);
});

This template uses Bootstrap 4 and includes a basic navigation bar, a card component with a news feed list, and some basic CSS styles. You can customize the template by adding more news items, changing the layout, and modifying the CSS styles.

To add more news items, you can simply add more objects to the newsItems array and update the JavaScript code to append the new items to the news feed list.

Note that this is just a basic template, and you may want to add more features, such as filtering, sorting, or pagination, depending on your specific requirements.

NewsBreakers

Bootstrap dashboard template news feed