→ Riz Mohammad
→ Blog template

Blog template

This bootstrap css example is contributed by Riz Mohammad, on 16-Jul-2024. Component is made with bootstrap css v.5.3. It is responsive. similar terms for this example is blog template

Tags: Blog

Author Riz Mohammad

2.6k

v.5.3

Fork Fullscreen

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <a class="navbar-brand" href="#">My Blog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" 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>
    </div>
</nav>

<header class="blog-header">
    <div class="container">
        <h1 class="display-4">Welcome to My Blog</h1>
        <p class="lead">A place for thoughts, ideas, and inspiration.</p>
    </div>
</header>

<main class="container">
    <div class="row">
        
        <div class="col-md-8">
            
            <article class="blog-post mb-4">
                <h2 class="blog-post-title">Sample Blog Post 1</h2>
                <p class="blog-post-meta">January 1, 2024 by <a href="#">John Doe</a></p>
                <img src="https://via.placeholder.com/800x400" alt="Blog Post Image" class="img-fluid mb-3">
                <p>This is a sample blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor
                    id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
                </p>
                <a href="#" class="btn btn-primary">Read More</a>
            </article>

<article class="blog-post mb-4">
                <h2 class="blog-post-title">Sample Blog Post 2</h2>
                <p class="blog-post-meta">January 15, 2024 by <a href="#">Jane Smith</a></p>
                <img src="https://via.placeholder.com/800x400" alt="Blog Post Image" class="img-fluid mb-3">
                <p>Another sample blog post. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis
                    consectetur purus sit amet fermentum.</p>
                <a href="#" class="btn btn-primary">Read More</a>
            </article>
        </div>

<div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">Search</div>
                <div class="card-body">
                    <form>
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for...">
                            <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button>
                        </div>
                    </form>
                </div>
            </div>

<div class="card mb-4">
                <div class="card-header">Categories</div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li><a href="#">Technology</a></li>
                        <li><a href="#">Design</a></li>
                        <li><a href="#">Culture</a></li>
                        <li><a href="#">Business</a></li>
                    </ul>
                </div>
            </div>

<div class="card">
                <div class="card-header">About</div>
                <div class="card-body">
                    <p>Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum.
                    </p>
                </div>
            </div>
        </div>
    </div>
</main>

<footer class="bg-light text-center text-lg-start mt-4">
    <div class="container p-4">
        <div class="row">
            <div class="col-lg-6 col-md-12 mb-4 mb-md-0">
                <h5 class="text-uppercase">About My Blog</h5>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis molestias.
                </p>
            </div>
            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5 class="text-uppercase">Links</h5>
                <ul class="list-unstyled mb-0">
                    <li><a href="#!" class="text-dark">Link 1</a></li>
                    <li><a href="#!" class="text-dark">Link 2</a></li>
                    <li><a href="#!" class="text-dark">Link 3</a></li>
                    <li><a href="#!" class="text-dark">Link 4</a></li>
                </ul>
            </div>
            <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                <h5 class="text-uppercase mb-0">Follow Us</h5>
                <ul class="list-unstyled">
                    <li><a href="#!" class="text-dark"><i class="fab fa-facebook"></i> Facebook</a></li>
                    <li><a href="#!" class="text-dark"><i class="fab fa-twitter"></i> Twitter</a></li>
                    <li><a href="#!" class="text-dark"><i class="fab fa-instagram"></i> Instagram</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
        © 2024 My Blog. All rights reserved.
    </div>
</footer>

More Examples