trouble with padding on cards using vue-bootstrap

I have been working on creating a card component with Vue Bootstrap, but I've run into an issue. The card header and body seem to have excessive padding around them. If I remove the b-card element and only use b-card-header and b-card-body, it looks like a standard Bootstrap card, but without any margin around the header and body. What can I do to remove the padding around the header and body?

<b-card>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>
htmlcsstwitter-bootstrapvue.jsbootstrap-4

Answer №1

To ensure that the sub-components within <b-card>, such as <b-card-header> and <b-card-img>, have no padding applied around them by default, you can use the no-body property on <b-card>. This will remove the default padding on the card, allowing the sub-components to control it instead.

<b-card no-body>
  <b-card-header v-b-modal.modalBox class="border-1">
    <div>
      <span>Header</span>
    </div>
  </b-card-header>
  <b-card-body>
    <div>
      Body text lorem ipsum
    </div>
  </b-card-body>
</b-card>

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

The Vue js post request encountered an issue due to the absence of the CSRF token

When attempting to make a post request, an error message indicates that the CSRF token is missing. I am using Vue.js and DRF - how can I properly pass the CSRF token in Vue? function(){ this.loading = true; this.$http.post('/get_books/&apos ...

vue.jsdjango-rest-framework

if jade is being inconsistent

I am currently using expressjs in my app and have the following setup: app.get('/profile',index.profile); app.get('/',index.home); Within layout.jade, I have the following code: ... if typeof(username)!=='undefined' ...

cssexpresspug

Having trouble getting my jQuery fade in effect to work

I am having an issue with the fade in / fade out effect using jQuery. The Menu is rendering perfectly and functioning properly, but there is no delay or fade when hovering over the menu items. I'm not receiving any errors, but the expected behavior is ...

jqueryhtml

Concealing forms within an Angular 5 application

I'm currently working on displaying the terms of use on the initial screen along with two buttons. If the user clicks the accept button, they will be directed to the authentication form. However, if they click refuse, the "Refused Terms" screen will a ...

angularhtmltypescript

Having difficulties with Cypress test for dragging and dropping an element within the same area

I am experimenting with the drag and drop feature using a plugin called 4teamwork/cypress-drag-drop. I have a scenario where there are three elements stacked on top of each other. The task is to select the first element and move it under the last element i ...

htmlreactjscypress

Struggling with Internet Explorer?

My script is working perfectly on all browsers except for Internet Explorer. The script refreshes the page to display a chat, but it seems to be causing issues in IE. Do you have any suggestions on how to make this work specifically for Internet Explorer? ...

phpjqueryhtmlajax

Steps for displaying a div when clicking a link in the navigation

Hello there, I'm from the Netherlands so please excuse any mistakes in my English. I will do my best to explain my question clearly.... Objective The goal is to have a navigation bar where each item, when clicked on, will display a div with content ...

htmlcssnavigationhover

Whenever I attempt to trim my integer within a for loop, my browser consistently becomes unresponsive and freezes

I am facing an issue with my code that generates alcohol percentage, resulting in values like 43.000004 which I need to trim down to 43.0, 45.3, etc. However, whenever I try to use any trim/parse functions in JavaScript, my browser ends up freezing. Below ...

javascriptarraysvue.jsparsingtrim

JQuery Mobile fails to apply consistent styling to user input check items within a list

I have successfully implemented the functionality to add user input items to a checklist. However, I am facing an issue where the newly added items are not adhering to Jquery Mobile's styling. Here is a screenshot showcasing the problem: Below is th ...

javascriptjqueryhtmlformsjquery-mobile

The v-on:click functionality seems to have become unresponsive after being dynamically added through modifying the inner

While attempting to create a dynamic navbar, I encountered an issue. The goal was to have the navbar switch from displaying "login" and "register" when a session is logged in, to showing "profile" and "logout". The buttons for login and register were fun ...

javascriptvue.jsvuejs2

What are the steps to ensure that all resources are localized?

I am working on a web application using Nuxt.js and Vuetify addon. It needs to function offline, but I am encountering errors when trying to download css and fonts externally. Here is the issue I am facing: https://i.sstatic.net/y2zML.jpg Is there a way ...

vue.jsnuxt.jsvuetify.js

Adjust the color of the chosen <li> item to a different shade

I want to change the text color of the "Sale" item, but not a phone number using only CSS. Unfortunately, I am unable to modify the HTML code. https://i.stack.imgur.com/PPnna.png .menu.left a:first-child { background: yellow; color: red; } https ...

css

Shifting the placement of a button with the help of bootstrap

Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...

csstwitter-bootstrap

Issues arise when trying to use jQuery within an AJAX-loaded div on the same page

I have been struggling with this issue for days and have tried looking up solutions online, but haven't had any luck. I attempted changing a '.live' to '.click' in the code, but that didn't work either. In the jquery.ajaxy.js ...

jqueryajaxhtmlload

Place the label and input elements next to each other within the form-group

My form group includes both a label and an input field <div class="col-md-12 form-group"> <label class="col-sm-2 col-form-label" for="name">Name</label> <input type="text" class="form-control" name="name" id="name" [(ngMode ...

cssangulartwitter-bootstrapbootstrap-4

Ways to guarantee consistent font appearance across all browsers/platforms for PDF display (Cufon, Images, sIFR)

After countless hours delving into various @font-face issues for RTL languages, font-rendering disparities on different browsers, PDF compatibility, and more. My main goal is to achieve CSS-compatible Arabic text (an RTL language) in an HTML document that ...

htmlpdf-generationfont-facesifrcufon

Tips for enabling resize functionality on individual components one at a time

Check out my Codepen link for the resizable event While using Jquery UI resizable, everything is functioning correctly. However, I am now looking to have the resizable event activate one block at a time. When another block is clicked, the resizable event ...

javascriptjqueryhtmlcss

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

I'm encountering an issue with a Dialog box that displays a message to the user regarding file deletion. Here's how it looks: +-----------------------------------------------------------------------+ | Delete File? ...

javascripthtmlcss

Issues within html language

The formatting of this table is causing issues with printing <tr height="95%"> <td width="100%"> <div id="placeSchedule"> <table bgcolor="red" width="100%" height="100%" border="1"> <tr> < ...

htmlstyles

Encountered a JQuery error in the application: trying to call the 'open' method on dialog before initialization is complete

I am having trouble integrating a dialog box into my application and encountering the error mentioned above. Here is the jQuery code I'm using: $( "#dialog" ).dialog({ autoOpen: false, width: 450, modal: true, ...

javascripthtmljquery