Utilize Bootstrap cards to display images across the full width of the page

I am using the Bootstrap card component https://getbootstrap.com/docs/4.0/components/card/ to display an image. The issue I'm facing is that on the Bootstrap template, it adds a margin around the image. I would like the image to take up the full width of the div. If anyone has a solution for this, I would greatly appreciate it. Thank you in advance.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


<!-- card documentation https://getbootstrap.com/docs/4.0/components/card/ -->

<section >

<div class="card text-center">
  <div class="card-header" style="background-color:white">
  
   
     Card Header
     
  <div class="card-body">
  <center>
  
  <!-- img I need full page size on card body -->
<div class="view overlay zoom">
    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid " alt="sample image">
    </div>  </center>
  
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
   
</section>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to remove padding from a card, simply use the bootstrap class p-0 and for full width image, add w-100 to the image class.

Here is an example of how to achieve this:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1P" crossorigin="anonymous">

<section>

  <div class="card text-center p-0">
    <div class="card-header" style="background-color:white">
      Card Header
    </div>
    <div class="card-body p-0">
      <div class="view overlay zoom">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/6-col/img%20(131).jpg" class="img-fluid w-100" alt="sample image">
      </div>
    </div>
    <p class="card-text">card description</p>
    <div class="card-footer text-muted" style="background-color: white">card footer</div>
  </div>
</section>

Answer №2

If you want the image to stretch to 100% width of the container .card-body, it can be easily achieved by applying the class .w-100 to the image, ensuring it maintains full width at all times.

<div class="card text-center">
    <div class="card-header" style="background-color:white">
        Card Header
    </div>
    <div class="card-body">
        <center>
            <div class="view overlay zoom">
                <img src="" class="img-fluid w-100" alt="sample image">
            </div>
        </center>
        <p class="card-text">card description</p>
        <div class="card-footer text-muted" style="background-color: white">card footer</div>
    </div>
</div>

Check out a live demo: https://jsfiddle.net/davidliang2008/qh6o2gyz/3/

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

Using a class variable to access canvas methods in Javascript

As someone new to Javascript, I am facing a bit of confusion when it comes to classes and objects. Recently, I refactored some code into a working class but the process did not go as smoothly as I had hoped. Despite searching through Stackoverflow, Google ...

javascripthtmlobjectdomcanvas

Ways to shut down a pop-up

Can someone assist me with how to close the bio-info popup and implement it in the code provided below? The HTML file: <ul class="ch-grid"> <li> <div class="bioinfo"> <h2>tooltips</h2> /div> The CSS file: .bioinfo { ...

jqueryhtmlcss

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

htmlcssbootstrap-4fixed

Issue with SVG animation causing unnecessary duplication of circle shapes when utilizing animateMotion

I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...

javascripthtmlsvg

Incorporating stick-to-top scroll functionality using AngularJS and ng

I am trying to implement a 'sticky' scroll on dynamic content. My current working example can be found here. It seems to be working, but I encounter a small 'flicker' when new items are appended. This issue seems to be related to the se ...

javascripthtmlcssangularjs

Could someone recommend a Python function that can encode output specifically for use in JavaScript environments?

Looking to securely encode output for JavaScript contexts in Python 3.6+? This means ensuring that any input string is properly encoded so that replacing VALUE with it will prevent all XSS attacks on the webpage, containing the input within the boundaries ...

pythonhtmlpython-3.xpython-3.6

The jQuery placeholder plugin encounters an error stating 'jQuery is not defined'

Having an issue on this specific page where I keep encountering a 'jQuery is not defined' error in both Chrome and IE because of the jQuery placeholder script. The declaration of jQuery comes before the plugin script. Checked for any conflicts ...

javascriptjqueryhtml

The GMaps API v3 is currently being loaded, but is not displaying on the webpage

Although the maps are supposed to be loading, I'm having trouble actually seeing them appear. Troubleshooting function initialize() { var myLatlng = new google.maps.LatLng(-25.363882,131.044922); var mapOptions = { zoom: 4, center: myLat ...

htmlcssgoogle-mapsgoogle-maps-api-3

Currently, my main focus is on finding a solution to adjusting the background color of the div element named *topnav* to properly match the width of the

I'm having trouble adjusting the width of the topnav background color to fill the entire page without any gaps. I hope that makes sense. Let me know if you need more information. Page displaying gap: Here is the HTML and CSS code: body {background ...

htmlcss

Another query has arisen about the html5 dtd/schema

How can we validate HTML5 documents for syntax accuracy and structural soundness if there is no DTD or schema? It's crucial for our industry to have a reliable method of ensuring validity. The W3C's online validation tool is helpful for individua ...

htmlschemadtd

I'm curious if there is a contemporary alternative to "Deep Zoom Composer" in Silverlight that enables the creation of panoramic images by stitching multiple images together

There was a time when Silverlight offered a feature known as "deep zoom", which cleverly adjusted bandwidth usage as the user zoomed in and out. Recently, I discovered a unique application for this technology - by incorporating images taken from a hot air ...

c#htmlxamarinpanoramasdeepzoom

Is there a way to resize a photo that I want to upload?

Have you visited this website? ---SPANISH LANGUAGE Here is another site to check out: ENGLISH LANGUAGE I'm having trouble with the image on the Spanish site showing up correctly. I want it to look like the image on the English site's front ...

htmlcss

Display substitute text for the date input field

When using input types date and datetime-local, the placeholder attribute does not work directly. <input type="date" placeholder="Date" /> <input type="datetime-local" placeholder="Date" /> Instead, the ...

htmldateplaceholder

dismiss data and button for closing notification bar

I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can ...

htmlcss

Bootstrap - Struggling to achieve responsiveness on the page

I've recently designed a website with a mega menu feature. However, as I try to resize the page, the layout doesn't adjust well, and some elements appear to be overflowing beyond the screen. Unfortunately, I can't share the entire code. Cou ...

htmljquerycssbootstrap-4

What is the best way to update or include a new class in the jQuery mobile loader widget?

After reviewing the documentation at this link: I discovered a method to modify or add the default class of the loader widget, ui-loader. Despite my attempts, I have not been able to see any changes. You can view my demo here: https://jsfiddle.net/yusril ...

jquerycssjquery-uijquery-mobile

Align the Vuetify v-btn to the right in a horizontal layout

I'm having trouble aligning a v-btn to the right side. Despite trying various options, I can't seem to get it to work. I just want to know the simplest way to ensure that the register button is positioned at the very right of the column. For the ...

cssvue.jsvuetify.js

Struggling to decide on the perfect CSS selector for my puppeteer script

I am trying to use puppeteer page.type with a CSS selector. <div class="preloader"> <div class="cssload-speeding-wheel"></div> </div> <section id="wrapper" class="login-register"> <div class="login-box"> <d ...

javascripthtmlcsspuppeteer

How about mixing up your backgrounds with an overlay effect for a unique look?

Hey there, I'm currently working on adding random backgrounds to my website through an overlay, but I've hit a roadblock when it comes to displaying them. Here is the code I'm working with: .css / .php #intro { background: ...

javascriptjqueryhtmlcss

Changing the direction to reverse column will cause the navigation component to be hidden

Issue: The <Navigation/> components disappear when using flex-direction: column-reverse. However, if I switch to flex-direction: column, the component appears at the top of the screen and is visible. My objective is to display my <Navigation/> ...

htmlcssreactjs