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

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

Responsive blog home layout

Author:
Juniper

1 year ago

2.6k

v.5.3
Blog post layout
Minimal and clean blog post layout

Author:
Juniper

1 year ago

3.7k

v.5.3
A Bootstrap Playground
TBD

Author:
Pranjal Adhikari

7 months ago

755

v.4.6
Professional Bootstrap Pricing Table
Beautiful pricing component built with Bootstrap 5.3, featuring interactive hover effects, mobile-responsive layout, and professional design elements.

Author:
Mason Ashford

1 year ago

4.7k

v.5.3
Timer with bootstrap

Author:
Anonymous

1 year ago

3.5k

v.5.3
Buttons with Icons

Author:
Prajwal Hallale

1 year ago

5k

v.5.3
navbar white simple #1

Author:
java stories story

6 months ago

2.8k

v.5.3
Interactive Team Member Card with Flip Effect

Author:
Reza Farhadi

1 year ago

3.8k

v.5.3
About Section

Author:
Anonymous

1 year ago

2.3k

v.5.3
card

Author:
Awais Farman

1 month ago

107

v.5.3
Modern Testimonial Carousel

Author:
Anonymous

1 year ago

2.7k

v.5.3
HTML and Bootstrap for Registration Form
HTML: Personal Information Section: Includes fields for full name, email, date of birth, bio, and profile image. Company Information Section: Includes fields for company name, company size (using a dropdown), and location. Submit Button: A button to submit the form. CSS: Background Gradient: Applied to the body. Card Styling: Styled with rounded corners and padding. Button Styling: Custom colors for the submit button. Validation Styling: Highlight invalid fields and display error messages. JavaScript: Validation Logic: Checks if required fields are filled and updates the feedback area with error or success messages. Dynamic Feedback: Updates the form with success or error messages based on validation.

Author:
zobaidul kaziex

1 year ago

7.8k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent