→ L-1485
→ 3213

3213

Forked from> @rami-alajo/rotating-navigation-animation

This bootstrap css example is contributed by L-1485, on 16-Mar-2026. Component is made with bootstrap css v.4.6.

Tags: Footer

Author L-1485

134

v.4.6

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
    integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
    crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css" />
  <title>Rotating Navigation</title>
</head>

<div class="content">
      <h1>Amazing Article</h1>
      <small>Florin Pop</small>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime
        aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores
        recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime
        dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem,
        molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae
        temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur
        perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.
      </p>

<h3>My Dog</h3>
      <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel
        consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam
        placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia
        cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates
        sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
    </div>
  </div>

<nav>
    <ul>
      <li><i class="fas fa-home"></i><a href="#"> Home</a></li>
      <li><i class="fas fa-user-alt"></i><a href="#"> About</a></li>
      <li><i class="fas fa-envelope"></i><a href="#"> Contact</a></li>
    </ul>
  </nav>
  <script src="script.js"></script>
</body>

</html>

More Examples

Clean Modern Footer Design with Social Media
Elegant light-themed footer with interactive elements, newsletter signup, and social media integration built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

5.6k

v.5.3
Footer
Simple footer with social icons

Author:
Anonymous

9 months ago

2.6k

v.5.3
Simple Footer

Author:
Anonymous

2 years ago

3.1k

v.4.6
Footer example made with Bootstrap 5.3
Dark theme

Author:
Arturo

1 year ago

8.8k

v.5.3
Footer Template with NewsletterForm
Professional footer component with newsletter signup, social media integration, and responsive design built with Bootstrap 5.3.

Author:
Isaac Winslow

1 year ago

6k

v.5.3
Footer
Simple footer with social icons

Author:
Prajwal Hallale

2 years ago

15.4k

v.5.3
Elegant Bootstrap Footer
with social media icons, newsletter forms, and other important links

Author:
Mateo Rojas

1 year ago

4.7k

v.5.3
Footer with social media icons

Author:
Omar Khaled

1 year ago

7.9k

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

1 year ago

10.6k

v.5.3
Bootstrap copyright footer

Author:
Anonymous

1 year ago

4.5k

v.5.3
Footer
Bootstrap CSS footer example

Author:
Prajwal Hallale

2 years ago

2.8k

v.5.3
Responsive footer using HTML and Bootstrap:
HTML: Error Title: A large, bold number (e.g., 404) to indicate the error type. Error Message: A brief message explaining the error. Button: A button to navigate back to the home page. Adjust the href attribute to point to your actual home page URL. CSS: Background Gradient: Applied to the body to give a stylish look. Error Container: Centered on the page with a semi-transparent background for contrast. Button Styling: Custom colors for the button, including hover effects. How to Use: Create an error.html file and paste the above code into it. Place the error.html file in your web server’s error pages directory or configure your server to serve this file on error.

Author:
zobaidul kaziex

1 year ago

9.6k

v.4.6

Didn't find component you were looking for?

Search from 300+ componenent