Expanding the box width to fill the entire space within a Bootstrap 4 card

I am working with Bootstrap code and I have encountered an issue within a card element. There seems to be extra space on the left and right side of the card, which I would like to eliminate so that the content fits within the main card itself.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b6d4d9d9c2c5c2c4d7c6f68298869886">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
  <h5 class="card-header">testing</h5>
  <div class="card-body">
    <div ng-bind-html="desc"></div>
      <div class="card">
        <div class="card-block">
          <div class="row no-gutters">
            <div class="col">
              <img class="img-fluid" src="http://placehold.it/800x300" alt="image">
            </div>
            <div class="col">
              <img class="img-fluid" src="http://placehold.it/800x300" alt="image">
            </div>
           </div>
        </div>
      </div>
    </div>
  </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

I have made some adjustments to the code provided. I included px-0 beside the card-body class and removed the optional w-100 in the <img> elements. Feel free to delete it if not needed. Hopefully, this solution will work for you!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65070a0a11161117041525514b554b55">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
            <h5 class="card-header">testing</h5>
            <div class="card-body p-0">
                <div ng-bind-html="desc"></div>
                <div class="card">
                    <div class="card-block">
                        <div class="row no-gutters">
                            <div class="col">
                                <img class="img-fluid w-100" src="https://via.placeholder.com/800x300.png" alt="image">
                            </div>
                            <div class="col">
                                <img class="img-fluid w-100" src="https://via.placeholder.com/800x300.png" alt="image">
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

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

What is the best way to remove the 'filterBy' filter selections?

I have set up a basic user table with a column for each user's country. Below the table, there are two buttons: the first one is designed to filter out table rows and hide users from countries outside the European Union; the second one is meant to res ...

twitter-bootstrapbootstrap-5bootstrap-table

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

My code changes the navbar colors when I scroll (200ms). However, I would like the changes to occur when I am slightly above the next section, not immediately. In other words, what adjustments should I make to change the color in the next section and not ...

javascriptjquerycssscrollnavbar

Issues with CSS rendering font in a suboptimal way

Whenever I set a simple font rule for my text, the output is not displayed correctly and appears blurry. The font looks fine in Mozilla Aurora browser but displays poorly in newer versions of Google Chrome and Firefox. Does anyone know why this happens? I ...

csswebfonts

What are some creative ways to incorporate a variety of images into my website?

Currently working on a webpage and running into an issue. I have a div called "background" where I am loading several images using the <img>-tag. The problem is that the images are set to float:left;, causing them to wrap onto a new line as they can& ...

javascripthtmlcss

Arranging an image next to a form with rows

Note: Utilizing Bootstrap Framework This is the design I am aiming for: https://i.sstatic.net/vAhzY.png Code: <!DOCTYPE> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> </head> <style> ...

htmlcss

Animate the border to move to the next list item after it is hovered over

Seeking assistance to animate border-bottom movement in navbar Desiring animation effect for hover event on second li item The code for the navbar is as follows: .top-bar { background:#0d0d0d; width:100%; height:85px; position:fixed; top:0; z-index:99 ...

jqueryhtmlcssanimationjquery-animate

What is the best way to apply a class for styling my JavaScript code in CSS? I'm having trouble getting classList

I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code element.classList.add("mystyle");, but every time I insert it, my JavaScript stops working. T ...

javascripthtmlcssweb

My website layout got messed up because of Chrome version 48

Once upon a time, I created a website. Despite its outdated design, it has been functioning properly. Even though I know it's time for something new, I've hesitated to make any changes because it still works. Surprisingly, parts of the page layo ...

htmlcssgoogle-chrome

What is the best way to expand the header, content, and footer colors to cover the entire width of a page while keeping everything centered within a fixed width

I managed to get the header and main content area to stretch across the full page, while keeping the content centered. But now I am facing an issue with the footer not stretching like the header. How can I make the footer stretch as well? HTML: <body ...

htmlcss

Ways to create collapsible navigation bars in your website

As someone exploring client-side development, I may be misusing the term "collapsible" in my title. What I aim to accomplish in my web application is allowing users to collapse header bars into small chevrons and expand them back when necessary. I am on t ...

javascripthtmlcsstwitter-bootstrapnavigation

Is it possible for Selenium to interact with buttons from the LightSwitch library?

Is it possible for Selenium to interact with LightSwitch buttons? In my initial attempt, I had to locate a button styled using LightSwitch in CSS. I used By.CSSSelector to find the button. However, upon locating the button, I realized that it was utilizin ...

javascriptjquerycssselenium-webdrivervisual-studio-lightswitch

Issues with CSS rendering have been observed following an ajax update when using the <ui:repeat> tag

This scenario is a bit intricate. Essentially, I am utilizing Material Design Lite CSS provided by Google and triggering an AJAX request to dynamically add input fields using PrimeFaces. <h:commandLink value="+ Add something> <f:ajax listener ...

cssajaxjsfmaterial-design-lite

Tricky problem with z-index - how to position a CSS3 triangle under the menu

Hey there, thank you for taking the time to look into my issue. I'm currently working on a menu design that I would like to resemble this example: The key feature here is creating triangular shapes on either side and positioning them beneath the men ...

htmlcssz-index

Text in various styles is layered on top of an image, ensuring that text in one style does not overlap text in another style

Struggling with placing text over an image? Trying to achieve different text styles but ending up with overlapping lines? Here's a snippet of HTML that works with only one text style: <li style="" class="portfolio-content-CV"> <div class ...

htmlcss

Reorder a specific character within an array using Javascript

I am a beginner in JavaScript and I'm hoping for some assistance. I have an HTML list with a select option, and I want to sort the list based on the selected character. Specifically, I would like to arrange the "Z" options first, followed by the "B" ...

javascripthtmljquerycss

The canvas surpasses the boundaries of the grid layout

Trying to design a grid layout with 3 columns of content, alongside an .overlay div featuring a particles.js canvas. Having trouble? See my Codepen here: https://codepen.io/radzak/pen/MVQVPQ The goal is for the grid to always occupy 100% of the screen, t ...

htmlcsscanvasgridparticles.js

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

javascriptjquerycsswordpressgif

Tips for uncovering a concealed div within an iframe?

It's as if there's a mystery surrounding how to reach this elusive div... div#someId iframe html>head>body div.wrapper div.footer Naturally, my strategy: #someId iframe body .footer is proving to be ineffective. ...

csscss-selectors

Uploading files with Ajax in PHP

Illustration of my Ajax script: Script <script type="text/javascript> $(document).ready(function(){ $('.costExcel').on("submit",function(event){ event.preventDefault() var url = "ajax.php"; ...

javascriptphpjqueryajaxtwitter-bootstrap