→ 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

297

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

Personal Portfolio About Section

Author:
Creative Araf

1 month ago

225

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

7k

v.5.3
My site Exm code

Author:
Zahid Hasan Riyad

1 week ago

102

v.5.3
from validation
do not copy

Author:
Fitar Ahmed

2 months ago

814

v.4.6
E-Commerce Checkout Section

Author:
Creative Araf

1 month ago

138

v.5.3
Personal Portfolio Service Section

Author:
Creative Araf

1 month ago

204

v.5.3
Footer with social media icons

Author:
Omar Khaled

1 year ago

9k

v.5.3
home page

Author:
lamiajahan

2 weeks ago

84

v.4.6
E-Commerce Full

Author:
Zahid Hasan Riyad

2 weeks ago

149

v.5.3
Basic Footer
Standard footer example with bootstrap 5

Author:
Mateo Rojas

1 year ago

12.1k

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

10.3k

v.4.6
E-com Home Page

Author:
Creative Araf

3 weeks ago

49

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent