Guide on adding an image to a Bootstrap card component

I'm facing a simple issue that I can't seem to solve. As a beginner in using bootstrap, I'm struggling to figure out how to insert an image into the card header. I've been searching online for solutions for the past 30 minutes with no luck. I know this might be a basic question, but any help would be greatly appreciated.

Here is the image I'm trying to insert:

I can't seem to place it correctly within the rect tag or the svg tag. Any guidance or assistance would be helpful.

<div class="album py-5 bg-light">
            <div class="container">

                <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                    <div class="col">
                        <div class="card shadow-sm">
                            <svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img"   aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Project 1</text></svg>
                                
                            <div class="card-body">
                                <p class="card-text">Click "View" to see my posted Project 1. Project 1 is my personal Student Feedback Form. When the form is submitted it will display to you the data inputted as well as give the course and professor a score.</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

I'm grateful for any assistance you can provide.

Answer №1

Simply swap this out:

<svg class="bd-placeholder-img card-img-top" width="100%" height="225" xmlns="http://www.w3.org/2000/svg" role="img"   aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c" /><text x="50%" y="50%" fill="#eceeef" dy=".3em">Project 1</text></svg>

With this:

<img class="card-img-top" src="https://media1.giphy.com/media/l0HlSBFa5Z9onGbcc/giphy.gif">

Full code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a1acacb7b0b7b1a2b383f6edf3edf3eea1a6b7a2f2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="album py-5 bg-light">
  <div class="container">

    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
      <div class="col">
        <div class="card shadow-sm">
          <img src="https://media1.giphy.com/media/l0HlSBFa5Z9onGbcc/giphy.gif">

          <div class="card-body">
            <p class="card-text">Click "View" to see my posted Project 1. Project 1 is my personal Student Feedback Form. When the form is submitted it will display to you the data inputted as well as give the course and professor a score.</p>
            <div class="d-flex justify-content-between align-items-center">
              <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

See it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/MWbbJPw?editors=1000

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

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Whenever I load an iframe, it seems to change a bit. Do I need to apply some kind of reset or adjustment? How can I ensure that the content within the iframe looks consistent no matter what page it's loaded into? ...

Separate your buttons with style using the Bootstrap button groups with

Is there a way to add border line separators between buttons in Bootstrap button groups? <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class=&quo ...

Issues with negative margin causing background image to not display correctly

Hey there, I'm currently trying to add a background image to the bottom left of my webpage. The layout includes both left and right sidebars. Unfortunately, I've encountered some issues with positioning the image using CSS in both the left sideba ...

Is there a clash between ng-if and col col-50?

Currently, I am attempting to create a table using Angular code within HTML. The structure of the table is exactly how I want it to be, and here is the code snippet representing it: <div class="row"> <div class="col col-25">Date</div> ...

Is it possible to use VBA to scrape the web for a specific style?

I've been on a quest to find a workaround for this issue but without any luck. All the data at my workplace is accessible through a web portal that generates static HTML pages. Unfortunately, my department doesn't have direct access to the Serve ...

Trouble with Updating Div Content?

Within my HTML code, I have included this JavaScript snippet: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script> var auto_refresh = setInterval( function() { $('#loaddiv').fadeOut ...

When using an `if` statement in CSS to determine if the value of `left` is

Is there a way to trigger an event only when the object reaches a specific percentage of its left position? I am trying to achieve this using jQuery with the .css() method. Here is what I have so far: HTML: <div id="midDiv"><img ..../></di ...

Tips for choosing a block using Puppeteer

Trying to retrieve the height of a series of blocks using Puppeteer, I encountered an issue where I couldn't select my block in page.evaluate() due to an error. The code snippet in question is as follows: (async () => { const browser = aw ...

Alignment issue with Bootstrap's vertical radio buttons

When the screen size reaches 768px for mobile phones, I am experiencing an issue with stacking radio buttons. I have a local @media override that sets the radio-inline display to block, but it causes the first Radio Button "0" to be slightly offset and n ...

What is the best way to dynamically adjust the width of multiple divisions in Angular?

I am currently working on an angular project to create a sorting visualizer. My goal is to generate a visual representation of an array consisting of random numbers displayed as bars using divisions. Each bar's width will correspond to the value of th ...

I am experiencing difficulty transitioning the view in React Native from a side position to an inward direction

Currently tackling a design project and encountering a roadblock in achieving a specific curved effect. Here are two images for reference: The Desired Design: My Current Progress: The basic structure is in place, but hitting a wall when attempting to cu ...

Achieving Full Height for Parallel Columns Divs with Bootstrap - A How-To Guide

I am struggling with getting two divs in parallel to have full height. Even though I have the divs side by side, when I try to set their height:100%;, nothing happens. What CSS properties do I need to modify to achieve this? The goal is to create a cove ...

`Animate your divs with slide in and slide out effects using

Currently, I am in the process of replicating a website and facing some challenges. This site is my inspiration for the project. I have managed to create a sliding effect using CSS, making the div slide in and out from the same direction. However, I want ...

Attempting to pass HTML content from a Laravel controller to display in data tables

Issue Description I am trying to send HTML tags to a table using editColumn but it is not working. AddColumn works fine for adding HTML code to a column, but editColumn does not display the HTML elements as expected. My question is how can I successfully ...

Using inline CSS to apply conditional styles to a component in React is a great way to customize the

I'm currently working on customizing the styles of some buttons depending on their 'active' status and whether the user is hovering over them. So far, it's partially working but I'm encountering behavior that I can't fully com ...

Using the input method in JavaScript cannot extract an object property

Recently, I have been working with this JavaScript code provided below. It is essential for me to retrieve the votecount for a game based on user input. function Game(gamename,votes) { this.gamename = gamename; this.votes = votes; }; var lol = ne ...

Utilizing an offline HTML file instead of a URL within Objective-C programming

Is there a way to modify this code to utilize an offline (bundled) file instead of the "http://5times9.com"? - (void)loadAddWeb { UIWebView *addWeb = [[UIWebView alloc] init]; NSURL *webURL = [NSURL URLWithString:@"http://5times9.com"]; NSURLRequest *we ...

Creating a polished and stylish centered responsive image with Bootstrap 3

I am facing an issue with centering a styled responsive image on my website. Upon debugging, I discovered that the class "portimage" is causing the responsiveness to break. My requirement is to ensure that the images do not exceed 700px in size and have a ...

Crafting an innovative horizontal CSS spotlight using conic-gradient styling

Seeking advice: I need to implement three spotlights on a webpage One shining directly downwards One angled from the left to the upper-top One angled from the right to the upper-top I managed to create a vertical spotlight using CSS conic-gradient, but I ...

I am curious if there is a feature in intro.js that allows for the highlighting of text or images to

I am having trouble getting intro.js to work with Ionic 4 as the highlighted text is not showing up view image here This is how I implemented the code in Angular 7: intro() { let intro = introJs.introJs(); intro.setOptions({ exitOnOverlayClick: false, ...