→ 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

1.7k

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

6 months ago

1.9k

v.5.3
Responsive blog home layout

Author:
Juniper

6 months ago

1.5k

v.5.3
Bootstrap video player
Video player with buttons

Author:
Kemaya m

9 months ago

2.6k

v.5.3
Bootstrap 5 shopping cart design
clean and beautiful shopping cart component

Author:
Valeria González

5 months ago

1.9k

v.5.3
Contact us form

Author:
Anonymous

1 year ago

4.8k

v.4.6
Bootstrap 5 Section Dividers
8 divider examples

Author:
Aisha Bello

4 months ago

524

v.5.3
Login with google button bootstrap

Author:
Anonymous

4 months ago

1.6k

v.5.3
Expanding Search Bar - Bootstrap 5
Expand search bar on click

Author:
Andreas Müller

8 months ago

2.9k

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

4 months ago

3.1k

v.5.3
Responsive image galary with tabs

Author:
Arturo

4 months ago

1.9k

v.5.3
Contact Us Page with Google Maps and Form Validation
HTML: Form Fields: Includes fields for name, email, and message. Google Map: A div with an id of map where the Google Map will be displayed. Feedback Elements: <div> elements for displaying validation messages and success messages. CSS: Styling: Adds padding for the contact section, sets the map height, and styles feedback and success messages. JavaScript: Google Maps Initialization: Uses the Google Maps JavaScript API to create and display a map centered at specified coordinates. Replace YOUR_GOOGLE_MAPS_API_KEY with your actual API key. Form Validation: Validates the input fields and displays appropriate messages if the input is invalid or missing. How to Use: Replace API Key: Insert your Google Maps API key in the script tag for Google Maps. Customize Coordinates: Update the latitude and longitude in the initMap function to reflect your actual location. Validation Rules: Customize validation logic as needed for your form requirements.

Author:
zobaidul kaziex

7 months ago

4.5k

v.4.6
Responsive Tag Chips

Author:
Kemaya m

4 months ago

609

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent