→ 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.3k

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

Blog post layout
Minimal and clean blog post layout

Author:
Juniper

10 months ago

2.9k

v.5.3
Responsive blog home layout

Author:
Juniper

10 months ago

2.2k

v.5.3
addadfadadfadfadf
adfadfadf

Author:
Pranjal Adhikari

2 months ago

302

v.4.6
Navbar
Basic Navbar with Dropdown

Author:
Evan Jent

4 months ago

1.3k

v.4.6
Copy Code Section
Code block with working copy option

Author:
Kemaya m

1 year ago

2.1k

v.5.3
Elegant Profile Card
showcasing user or team member profiles in a professional and visually appealing manner. The profile card includes an avatar, name, position, and a short bio, along with social media icons for easy connectivity

Author:
Prajwal Hallale

1 year ago

7.2k

v.5.3
Bootstrap comment box with reply
Comment form design

Author:
Ankit khedkar

1 year ago

6.2k

v.5.3
Music player with bootstrap 5
Animated music player design

Author:
Mateo Rojas

8 months ago

2k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

1 year ago

5k

v.5.3
HTML and JavaScript for Product Showcase Page
JavaScript: Pagination Handling: The script fetches images based on the current page and updates the pagination controls dynamically. Product Cards: Each product is displayed as a card with an image, title, description, and price

Author:
zobaidul kaziex

1 year ago

1.3k

v.4.6
Simple login form

Author:
Prajwal Hallale

1 year ago

6.9k

v.4.6
Resume template
Simple and elegant resume template

Author:
Juan Martinez

1 year ago

671

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent