How to use hover in bootstrap 4 using css?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. How to use hover in bootstrap 4 using css with code example.

Here, we will be using the .thumbnail class to create hover in Bootstrap.

Table of contents

  • Framework and cdn link setup
  • Included JS 3 bootstrap
  • Define its class name

This article will guide you to adding hover in Bootstrap with example.

Step 1: Framework and cdn link setup

First of all, load the Bootstrap 4 framework CSS into the head tag of your webpage.

     <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"> 

Step 2: Included JS bootstrap

Now, load the Bootstrap JavaScript file before closing the body tag and done.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Step 3: Define its class name

After that, create the hover with a class name .thumbnail.

        <div class="regionPage">
        <section class="thumbs">
            <h3>Hover effect bootstrap - 4</h3>
            <div class="row">
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                    <a class="thumbnail" title="City" href="../asia/afghanistan.php"><img src="images/city.jpg" alt="City"></a>
                </div>
            </div>
        </section>
    </div>

Example.

Let’s look at the following example to understand how it basically works:

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hover</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <style>
        .thumbnail:hover {
            background-color: red;
            opacity: 0.5;
        }
    </style>
</head>

<body>
    <div class="regionPage">
        <section class="thumbs">
            <h3>Hover effect bootstrap - 4</h3>
            <div class="row">
                <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6">
                    <a class="thumbnail" title="City" href="../asia/afghanistan.php"><img src="images/city.jpg" alt="City"></a>
                </div>
            </div>
        </section>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</body>

</html>

Check the output of the above code example.

Bootstrap, Hover-4

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us

Books

Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts