Streamline the Bootstrap 4 Card Component by eliminating any unnecessary whitespace

Currently I am utilizing the card component from BS4, but it seems to be displaying unexpected behavior: see the image description here

Upon inspecting the Mozilla dev version, the following markup is visible:

                       <div class="right-cards   col-lg-3 col-md-6 col-sm-6 col-xs-6">

                            <div class="card " id="first-card">
                                <a id="first_card_btn" class="btn-none" style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:block;'
                                    onclick="myFunction(this.id)"></a>
                                <img class="card-img-top" src="https://via.placeholder.com/370" alt="Card image cap">
                                <div class="card-body">
                                    <h4>contact us</h4>
                                </div>
                            </div>

                        </div>

The issue at hand is that I am trying to position the card-body on top of the image. While I am aware of the method to achieve this, I am unable to eliminate the excess whitespace no matter what technique I attempt.

htmlcssbootstrap-4

Answer №1

By implementing your code, I managed to incorporate some CSS rules to achieve the desired effect. Feel free to test it out and let me know your thoughts! The borders have been added to visually represent the spacing allocated for each element.

.card{
border: 1px solid red;
}

.card-img-top {
border: 1px solid green;
}
.card-body{
position: absolute;
padding:0px !important;
background-color:#3B9F2F;
color: #FFF;
border: 1px solid blue;
width: 100%;
top: 60%;
}

.right-cards {
  border: 1px solid yellow;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
  <div class = row>
     <div class="right-cards col-lg-3 col-md-6 col-sm-6 col-6">
         <div class="card " id="first-card">
            <a id="first_card_btn" class="btn-none"  onclick="myFunction(this.id)"></a>
            <img class="card-img-top" src="https://via.placeholder.com/370" alt="Card image cap">
            <div class="card-body">
                <h4>Contact us </h4>
            </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

Tips for properly positioning items within the Bootstrap grid

I've been slowly working on developing the client side with Bootstrap, but I'm struggling to get the proportions of the authorization form right. I just want to align the logo and the authorization form on the same horizontal plane. Can someone p ...

htmlbootstrap-4bootstrap-5

Allow specific HTML tags to be unescaped in Vue.js

Utilizing the v-html method to unescape HTML tags, I am seeking a way to only unescape the <a></a> tags within a string. To illustrate this: Input: <p> Hello World </p> <a target="_blank" href="https://www.google. ...

javascripthtmlvue.jsescaping

Is there a significant time-saving benefit to utilizing nested rules in CSS, particularly when using HAML or LESS?

Here is how I am currently coding my CSS: Regular CSS: #content { color: white; background: black; } #content a { color: yellow; } #content p { margin: 0; } #content (etc...) #contnet (etc...) #content (etc...) (I always include the parent eve ...

cssnested

Tips for incorporating scrolling into a sub menu

I'm currently attempting to incorporate vertical scroll only for my sub-menu using CSS, without including a horizontal scroll. However, the issue arises when I remove the horizontal scroll - it causes the nested sub-menu within the initial one to bre ...

htmlcsswordpressmenu

100% width is applied to the table cell within the div element

Below is the code I am working with: <div style='display: table'> <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div> </div> I'm ...

htmlcss

Concealing the side navigation menu with HTML and CSS

Hey there, I'm trying to make my navbar automatically hide when the mouse is moved. I found an example that I want to use here. Despite reading some online documentation, I just can't seem to figure out how to do it. Here's a snippet of my c ...

htmlcssweb-applicationscss-transitions

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

Having some trouble compiling Font Awesome SCSS files in my Laravel application. I installed Font Awesome using NPM, and the compiled CSS is stored in the 'public/css/' folder while a 'public/fonts/' folder was also created. However, th ...

csslaravelsass

Issue with Angular date field not displaying invalid input when form is submitted

I am encountering an issue with my simple form that contains only one date control. Whenever I input an invalid date like 30-Feb-2018, the control becomes invalid and my CSS style triggers a red border to indicate the error. The problem arises when the us ...

htmlangularformshtml-input

Vue JS console displays an error stating "the <li> tag is missing a closing tag."

Below is the code snippet I am currently using to change the color based on the character's name: I encountered an error indicating that the li tag was not properly closed, although it appears to be closed. However, there seems to be an issue during ...

javascripthtmlcssvue.js

Exploring the Contrasts Between HTML String and Emphasizing the Variances

Challenge Description: The task is to compare two HTML input strings with various styling elements like strong, li, ol, line-through, etc. The goal is to display the original text and the edited text in two separate boxes on the screen. Any words missing i ...

javascriptjqueryhtmlcssgoogle-diff-match-patch

My website crashed after attempting to update WordPress

After upgrading my website to Wordpress 3.4, I encountered a major issue that caused significant damage to my site. It seems that half of my posts were not accessible and resulted in a 404 error. Additionally, pages 3 and 4 of my posts also showed a 404 er ...

htmlwordpresspermalinks

Is the HTML Page loading before the AJAX call is made?

On my HTML Page, I have a button tag that looks like this: <button ng-hide="alreadyFreinds()" type="button" class="btn btn-primary btn-lg">Friend</button> However, when attempting to access certain parts of the alreadyFriends function shown b ...

javascripthtmlajaxangularjs

The span exits the external div only once the animation has concluded

I utilized jQuery to create an animation effect: http://jsfiddle.net/rxCDU/ UPDATE: Please note that this effect is optimized for Chrome browsers! The animation works correctly, however, the green SPAN element moves out of the red DIV only after the ani ...

jquerycssanimationjquery-animate

Organize object properties based on shared values using JavaScript

Check out the JavaScript code snippet below by visiting this fiddle. var name = ["Ted", "Sarah", "Nancy", "Ted", "Sarah", "Nancy"]; var prodID = [111, 222, 222, 222, 222, 222]; var prodName = ["milk", "juice", "juice", "juice", "juice", "juice ...

javascriptjqueryhtmlarrays

Guide to eliminating the arrow from a dropdown menu in Bootstrap 4

I am working with Bootstrap 4 and attempting to eliminate the dropdown arrow in my design. Unfortunately, the solutions that were effective for Bootstrap 3 no longer apply. You can read more about this issue here. To see the problem in action, check out ...

csstwitter-bootstraptwitter-bootstrap-4

Having trouble retrieving data from the server for the POST request

I am fairly new to using Jquery and Ajax requests. I'm currently working on a website where I have a simple form that collects an email address from users and sends it to the server. However, I'm struggling to figure out how to capture the form d ...

javascriptjqueryhtmlajaxpost

Explore the possibility of utilizing Excel VBA to locate images from websites and seamlessly import them into

Right now, my main goal is to browse an open webpage in search of multiple png images and then import them into various cells within a tab on my Excel workbook. The current macro I have takes me through the webpage where I can see which pictures are displ ...

vbaexcelhtmlgetelementsbytagname

What is the best way to target an HTML element that is only connected to a particular class?

My HTML code includes the following 3 elements: <span class="a b"></span> <span class="a"></span> <span class="a b"></span> I am trying to select the element that only has the class "a". When I use $("span.a"), it sele ...

jquerycssclass

VueD3tree successfully fetches data, however, it is not being displayed on the screen

Just started delving into Vue and VueD3tree. Attempting to display a tree using the vued3tree library with data pulled from an API. Strangely enough, when trying with static data, the tree displays perfectly fine. However, when fetching data dynamically, a ...

javascripthtmljsonvue.jsvue-component

Using Jquery to transfer text from a form to a DIV and ensuring the final character is verified

Users can input their name on my HTML form, which will then be displayed in a DIV as part of a book title. The book title includes apostrophes (e.g. Amy's Holiday Album). However, if the user's name ends with an S, I do not want the apostrophe ...

javascriptjqueryhtmlcssforms