What is the best way to place an icon in the center of a Bootstrap 5 card image?

I'm looking to center an icon within a bootstrap-5 card image. I have an icon that I want to display at the center of my card image, but I'm unsure how to achieve this using either CSS or Bootstrap-5. Can anyone provide guidance on how to accomplish this? I've tried implementing methods from this source, but the image is not contained in a card. Another attempt with this method also failed because the image was not placed within a 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c5a7aaaab1b6b1b7a4b585f0ebf5ebf7">[email protected]</a>/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b3eeaaa0acadb083f2edf2f3edf7">[email protected]</a>/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>

cssbootstrap-5

Answer №1

My approach would be different. Instead of using absolute units like px, I recommend opting for relative units such as %. This ensures that your design will look consistent across various screen sizes. Additionally, I introduced a new container called .img_wrapper.

Please note: The CSS styles I've included could also be achieved using Bootstrap classes, but I opted to write them out so you can better understand the changes.

Take a look at the code 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9af8f5f5eee9eee8fbeadaafb4aab4a8">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a515651574455084c464a4b5665140b14150b11">[email protected]</a>/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>

Answer №2

My issue was resolved by incorporating the following 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8f948a9488">[email protected]</a>/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
    <link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d08dc9c3cfced3e0918e91908e94">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Arranging input elements horizontally

this issue is connected to this post: Flex align baseline content to input with label I am grappling with the layout of my components, specifically trying to get all inputs and buttons aligned in a row with labels above the inputs and hints below. The CSS ...

htmlcssangularweb-component

What is a simple way to center a box on a page without relying on margins?

I'm attempting to position a box in the center of the page without relying on margin. Here's what I've tried so far: .box-middle { vertical-align:middle; height:100px; width:100px; border:1px solid #ddd; } This approach h ...

htmlcssmargin

aligning a form vertically in a container

<div class="parent"> <div class="left-child"> <img src="logo.jpg" alt="logo"> </div> <div class="right-child"> <form action="#"> <input type="text" value="search"> &l ...

htmlcssforms

The vanishing act of custom fonts in Internet Explorer

This issue with a custom font embed is new to me. I have successfully used custom fonts on many client sites without any problems. One specific client has their own custom font files that are causing trouble. The application in question is embedded in an ...

cssinternet-explorercachingfont-face

Steps for eliminating the thick border around <thead> and <tfoot> elements in Bootstrap

Is there a way to remove the thick border on the <thead> and <tfoot> elements in Bootstrap 4 that seems a bit unnecessary? I found a forum post addressing this issue for Bootstrap 5, but unfortunately, the fix didn't work for me since I a ...

cssbootstrap-4

Unlock the power of jQuery to apply CSS transition effects and animations with precision

A web application utilized Bootstrap, featuring a toggle navigation for the sidebar drawer/navigation that was supposed to be animated by default. However, there appeared to be no animation happening. To address this issue, the following CSS code was imple ...

jquerycsstwitter-bootstrap

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

jqueryhtmlcssjquery-mobilejquery-mobile-button

Timer countdown: Looking for a countdown timer that will reset to 3:00 automatically each time it reaches 0 minutes, and can do so

Seeking a continuous countdown timer that starts from 03:00 and counts down to 0:00, then automatically resets back to 03:00, in an infinite loop. The condition is that no one should be able to manually stop this logic. After researching, I found a Ja ...

phpjquerymysqlangularjscss

What is the best way to create a highlighted navigation bar using Angular 2?

Is there a way to keep the navbar active even after refreshing the page in Angular 2? I am currently using CSS to accomplish this, but the active tab is removed upon page refresh. Any suggestions on how to tackle this? HTML:-- <ul class="nav navbar- ...

cssangulartypescript

Positioning a div element within a list item using CSS

Currently, I am in the process of constructing a megamenu. In this setup, there is an unordered list that is positioned relative to its parent container. Within this list, there are individual items that contain links along with separate div containers th ...

htmlcss

Is the meta viewport exclusively meant for mobile phones?

Is it possible to configure the general responsive meta viewport setting specifically for phones? Our website appears fine on 7" and larger tablets in both portrait and landscape modes without the meta tag, but it is a bit inconvenient on smaller devices. ...

cssmobilemedia-queriesviewport

Activate vertical scrolling in JavaScript when an image is clicked

I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...

javascriptjqueryhtmlcss

I encountered an issue with Bootstrap 5.0.2 where it crashes during compilation with Dart Sass

Can someone help me figure out how to change the primary color in Bootstrap using SCSS? I've gone through all the steps of installing Dart Sass and running it on a custom.scss file, but when I try to import Bootstrap with the absolute path like this: ...

compiler-errorsbootstrap-5dart-sass

Increasing the nth-child Selector in Jquery

Referring to this I am looking to cycle through the nth-child selector, which involves: var i = 1; var tmp = $(this).find('td:nth-child(i+1)'); // I wonder how this can be achieved i++; I have rows with dynamically generated columns i ...

javascriptjqueryhtmlcss

Discovering the magic of Bootstrap 5 and mastering its classes

Currently facing an issue with the me and ms classes while learning to build a navbar. The requirement is for elements one and two to be left-aligned using the ms class, and elements three and four to be right-aligned using the me class. However, the eleme ...

htmlbootstrap-5

Having issues with the width not functioning correctly in my table cells

Here is a sample I'd like to share with you: link CODE HTML: <table class="table prospects-table"> <thead> <tr> <th width="200">Name</th> <th width="200">E ...

htmlcss

What is the best way to design a div that showcases text on top of a background image, complete with a pointer or arrow, and automatically adjusts its width to properly display the

Is it possible to create a div with an :after selector, containing text that automatically adjusts its width to fit the content? Seems like a complex task, right? It sure can be. I initially tried achieving this using a div id and :after selector, but ra ...

htmlcssresponsive-design

Slider UI handle in jQuery sliding out of the div container

Could you assist me with a technical issue I am facing? I need to know how and where to prevent the .ui-slider-handle from exceeding the div when it reaches 100%. Feel free to check out the live preview at https://codepen.io/Melwee/pen/Exjwoyo I have inc ...

jquerycssjquery-ui

Coloring weeks in fullcalendar's two-shift calendar

Can FullCalendar create a calendar with alternating colors for odd and even weeks? Visit the FullCalendar demos here For example, see image below: https://i.sstatic.net/D5qza.png ...

javascriptcssfullcalendar

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

htmlcss