how can I add icon at the center of bootstrap5 card image - CSS

Bamagujen_Bahaushe
April 21, 2023
165 views
0 votes
2 Answers

Is there anyway I can display an icon at the center of the bootstrap-5 card image? I have an icon that I want to display at the center of my card image, but I don’t know how to do that using either CSS or Bootstrap-5, how can I do that please? I have try using This method but the image is not inside a card, I also try to use this method but it will not work because the image is not at the card.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Videos</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<style>
    .image-thumbnail{
        object-fit: cover;
        height: 100%;
    }
    .my_card{
        height: 100%;
    }
</style>
<body class="m-5">
    <div class="container">
        <div class="row">

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <a href="">All</a>
                        <a href="">All</a>
                        <a href="">All</a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9">

               <div class="row">

                {% for video in my_videos %}
                <div class="col-md-4 my-2">
                    <a href="{% url 'Play-Video' video.slug %}">
                        <div class="card my_card">
                            <img class="image-thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnkEY_ZgFq4R5FRz-4d9iamx8OKOhneZTm5vKRkwizmnycE-9uI6Tea6AHLQmm5qPq_xg&usqp=CAU" alt="">
                            <i style="font-size: 60px;" class="bi bi-play"></i>
                            <div class="card-body">
                                <img src="" alt="">
                                <p class="card-title">
                                    {{ video.title }}
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}

               </div>

            </div>
            

        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <nav aria-label="...">
                <ul class="pagination">
                    <a class="page-link" href="">1</a>
                </ul>
            </nav>
        </div>
      </div>
</body>
</html>

Tags: bootstrap-5 css

Answers

Chosen as BEST ANSWER

I solve my problem by adding these css code:

.bi {
        position: absolute;
        font-size: 60px;
        margin-left: 100px;
        margin-top: 50px;
        background-color: white;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Videos</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<style>
    .image-thumbnail{
        object-fit: cover;
        height: 100%;
    }
    .my_card{
        height: 100%;
    }
    .bi {
        position: absolute;
        font-size: 60px;
        margin-left: 100px;
        margin-top: 50px;
        background-color: white;
    }
</style>
<body class="m-5">
    <div class="container">
        <div class="row">

            <div class="col-md-3">
                <div class="card">
                    <div class="card-body">
                        <a href="">All</a>
                        <a href="">All</a>
                        <a href="">All</a>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9">

               <div class="row">

                {% for video in my_videos %}
                <div class="col-md-4 my-2">
                    <a href="{% url 'Play-Video' video.slug %}">
                        <div class="card my_card">
                            <img class="image-thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnkEY_ZgFq4R5FRz-4d9iamx8OKOhneZTm5vKRkwizmnycE-9uI6Tea6AHLQmm5qPq_xg&usqp=CAU" alt="">
                            <i class="bi bi-play"></i>
                            <div class="card-body">
                                <img src="" alt="">
                                <p class="card-title">
                                    {{ video.title }}
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}

               </div>

            </div>
            

        </div>
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <nav aria-label="...">
                <ul class="pagination">
                    <a class="page-link" href="">1</a>
                </ul>
            </nav>
        </div>
      </div>
</body>
</html>

(Edit)

I would do it differently. Using absolute units (i.e., px) is not the best option. Why? Because it might look good on the screen you’re working on, but it will certainly look different (i.e., won’t be centered) on a smaller or bigger screen. Instead, use the relative units (i.e., %). Also, I added .img_wrapper container.

Note: The CSS I added could also be applied via Bootstrap classes, but I didn’t do it on purpose, so you can better see what CSS I’ve added.

See the snippet below.

.image-thumbnail {
  object-fit: cover;
  height: 100%;
}

.my_card {
  height: 100%;
}

.img_wrapper {
  position: relative;
}

img.image-thumbnail {
  width: 100%;
}

.bi {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Videos</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>

<body class="m-5">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <div class="card">
          <div class="card-body">
            <a href="">All</a>
            <a href="">All</a>
            <a href="">All</a>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="row">
          {% for video in my_videos %}
          <div class="col-md-4 my-2">
            <a href="{% url 'Play-Video' video.slug %}">
              <div class="card my_card">
                <div class="img_wrapper">
                  <img class="image-thumbnail" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnkEY_ZgFq4R5FRz-4d9iamx8OKOhneZTm5vKRkwizmnycE-9uI6Tea6AHLQmm5qPq_xg&usqp=CAU" alt="">
                  <i style="font-size: 60px;" class="bi bi-play"></i>
                </div>
                <div class="card-body">
                  <img src="" alt="">
                  <p class="card-title">
                    {{ video.title }}
                  </p>
                </div>
              </div>
            </a>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row justify-content-center">
      <nav aria-label="...">
        <ul class="pagination">
          <a class="page-link" href="">1</a>
        </ul>
      </nav>
    </div>
  </div>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

how can I add icon at the center of bootstrap5 card image – CSS

Answers