→ 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

3.2k

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

Service Page

Author:
Code Bro io

2 weeks ago

56

v.5.3
Restaurant About

Author:
Code Bro io

2 weeks ago

50

v.5.3
about me gana

Author:
Gana JNsksk

2 months ago

612

v.4.6
Liberation War Archive - Documents

Author:
web.asset.edu

3 weeks ago

195

v.5.3
Responsive blog home layout

Author:
Juniper

1 year ago

3.1k

v.5.3
Portfolio

Author:
Code Bro io

1 week ago

92

v.5.3
Personl

Author:
Gana JNsksk

2 months ago

272

v.4.6
Plant

Author:
Code Bro io

1 week ago

47

v.5.3
Restaurant Menu Page

Author:
Code Bro io

2 weeks ago

102

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

1 week ago

94

v.5.3
E-commerce Product Detail Page

Author:
Code Bro io

2 weeks ago

51

v.5.3
Plant Store About Page

Author:
Code Bro io

2 weeks ago

46

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent