Boostrap news css template

Here is a basic Bootstrap news CSS template:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>News 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>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">News Template</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>
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <h1 class="display-3">Breaking News</h1>
                    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                    <hr>
                    <div class="row">
                        <div class="col-md-4">
                            <h2>Headline 1</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                        </div>
                        <div class="col-md-4">
                            <h2>Headline 2</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                        </div>
                        <div class="col-md-4">
                            <h2>Headline 3</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <h2>Latest News</h2>
                    <ul class="list-group">
                        <li class="list-group-item">Item 1</li>
                        <li class="list-group-item">Item 2</li>
                        <li class="list-group-item">Item 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <footer class="footer">
        <div class="container">
            <p>&copy; 2023 News Template</p>
        </div>
    </footer>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

CSS (in styles.css file)

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

.navbar {
    background-color: #333;
    color: #fff;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: bold;
}

.navbar-toggler {
    border-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.5 2.5l8 8M14.5 2.5l-8 8'%3E%3C/path%3E%3C/svg%3E");
}

.main {
    padding: 20px;
}

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

.row {
    margin-bottom: 20px;
}

.col-md-8 {
    padding-right: 20px;
    padding-left: 20px;
}

.col-md-4 {
    padding-right: 10px;
    padding-left: 10px;
}

.list-group {
    margin-bottom: 20px;
}

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

.list-group-item.active {
    background-color: #337ab7;
    color: #fff;
}

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

This template uses Bootstrap 4 and includes a basic navigation bar, a main content area with a heading and paragraphs, a row with three columns, and a footer. The CSS styles the layout and adds some basic visual styling.

You can customize the template by adding your own content, images, and styles. You can also modify the HTML and CSS to fit your specific needs.

NewsBreakers

Boostrap news css template