Create a Bootstrap 4 element that mirrors the padding of a card and doesn't require any additional custom

When adding elements on top of a card, the snippet below demonstrates the placement:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.

Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
    </div>
  </div>
</div>

The goal is to have these elements aligned with the same indentation as the card content, without using custom CSS. The use of p-3, px-3, p-4, and px-4 resulted in slightly different indentations.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="px-4 clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Sequi ad provident non. Et ea beatae ipsum sint. Quas omnis libero similique maxime perferendis pariatur aut ut. Alias quo et modi eaque. Et doloremque minima adipisci error quia rem.

Minima quibusdam sunt sint. Id perspiciatis corporis rerum sapiente ullam velit. Ratione ipsam ut voluptates iure et consequatur. Consequuntur nostrum impedit nesciunt ipsa.
    </div>
  </div>
</div>

Initially considering placing the elements within a card itself, but that would require using custom CSS to make the card body transparent.

Is there a component or layout utility available that matches the padding of the card component exactly?

csstwitter-bootstrapbootstrap-4

Answer №1

Regrettably, simply using the Padding Utilities will not suffice as the Card has a padding of 1.25rem, while the padding utilities only range from 1rem to 1.5rem. Here are some alternative options...

Option 1:

You could utilize px-3 (1rem) along with a single margin: mx-1 (.25rem):

<div class="container mt-4">
  <div class="px-3 mx-1 clearfix">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    ...
    </div>
  </div>
</div>

Demo 1

Please note that this is still slightly off by 1 pixel on either side due to the Card's 1px border. To address this, you may need to add an invisible border on the top content (e.g., 

<div class="px-3 mx-1 border border-white clearfix"></div>
)

Option 2:

Alternatively, override the card-header and card-body with px-3 (or px-4) to match the padding on the top content, ensuring consistency...

<div class="container mt-4">
  <div class="px-3">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header px-3 clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body px-3">
    ..
    </div>
  </div>
</div>

Demo 2

Answer №2

Although it's not recommended, you could attempt something like this:

<div class="header-card bg-transparent py-0 border-bottom-0 clearfix">
    <span class="pull-right">right</span>
    <span>left</span>
</div>

Answer №3

A combination of classes like mx-1 px-3 border border-white can certainly be used:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container mt-4">
  <div class="mx-1 px-3 clearfix border border-white">
    <span class="float-right">right</span>
    <span>left</span>
  </div>
  <div class="card">
    <div class="card-header clearfix">
      <span class="float-right">right</span>
      <span>left</span>
    </div>
    <div class="card-body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
    </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 process for setting dynamic variables as CSS content within Vue.js?

Forgive my lack of expertise, but I am interested in learning more about utilizing dynamic variables and CSS within Vue. I have a concept in mind where pressing a button would result in the letters of the button label spacing out further. Is it feasible t ...

cssvue.js

When utilizing a hexadecimal notation for the background color, the lower border may vanish

While attempting to add a 1px solid border around an anchor tag with a dark background color in hexadecimal format, I discovered that the bottom border was not showing up! After investigating for a while, I realized that the issue was caused by the backgr ...

csshexborderbackground-color

The HTML code is not being styled by Bootstrap

<div class="form-inline"> <div class="form-group "> <label for="txtTitle" class="control-label"> <p class="text-info">Page Title</p> </label> <asp:textbox id="txtTitle" tabindex ...

htmlcssasp.nettwitter-bootstrap

Tips for showing a value in an input text box

Imagine you have a select tag with multiple options. You want to display a specific value in the input field below when a user selects one of the options. <select name="cars" id="cars"> <option value="volvo">Volvo-100</option> < ...

javascripthtmlcss

Modify the CSS of one div when hovering over a separate div

I've been working on a simple JavaScript drop-down menu, and it's been functioning correctly except for one issue. When I move the mouse out of the div that shows the drop-down menu, it loses its background color. I want the link to remain active ...

javascriptcsshtmlonmouseout

Ensuring that the second level unordered list is set to a height of 100% of the first unordered list, rather than the

I'm working with this menu http://codepen.io/alexandernst/pen/oxpGYQ (I wanted to include it here but the result viewer on SO is causing some display issues...) and I am trying to ensure that the second and third level ul elements are the same height ...

htmlcss

Concealing the NavBar When Showing a Popup Using React

I am facing a challenge with hiding my bootstrap navbar that has a CSS property of position: sticky-top when I display a pop-up slideshow. I am working with React. I have attempted to target the navbar element in my click handler and adjust the display pro ...

javascriptreactjsbootstrap-4navbarnav

Is there a way to temporarily halt a CSS animation when it reaches the final frame

Can anyone assist me with getting the "-webkit-animation-fill-mode: forwards;" to work? It seems like it's getting stuck on the first frame, and I can't figure out why. JS FIDDLE <div class="logo"></div> .logo { width: 328px; ...

csscss-animations

Ways to add more spacing between list items without affecting the position of the bottom div

I'm attempting to achieve a layout similar to an Instagram post, where the list expands but does not push the footer down. In my case, adding margin-bottom to the comment class affects the height of the <div class="post-details-container" ...

htmlcss

"Enhance your webpage with a captivating opaque background image using Bootstrap

I'm new to exploring Bootstrap and I am currently experimenting with options for displaying content with a semi-transparent background image. Currently, I am using a "well" but I am open to other suggestions. I have managed to place the image inside t ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is it possible to conceal specific HTML elements using only CSS?

Recently I encountered some HTML code that caught my attention: <address>telephone no <span>-</span> Some Street 2 <span>-</span> 9999 ZZ Place <span>-</span> Something else</address> This particular p ...

htmlcss

Upon calling the createModalAddPost() function, a single window is triggered to open

Hey there, I'm having a JavaScript question. So, I have a panel that opens a window, and it works fine. But the issue arises when I close the window and try to open it again - it doesn't work. I have to reload the page every time in order to open ...

javascripthtmlcss

Position the navbar-brand to the left side of the webpage

Is there a way I can align the navbar-brand to the left of the page so that my Website Name is in line with the menu list? I currently have the following menu bar: Current Navigation Bar In my Current Navigation Bar, you will see that my Website Name app ...

navbarbootstrap-4

Attempting to retrieve the numerical value displayed on my range slider. (using Bootstrap 4 and JavaScript)

var slider = new Slider('#slider1',{ tooltip: 'always' }); //generate a password function passwordGenerator () { // how long is the password going to be? var passwordLength = document.getElementById('slider1').value; ...

javascripthtmlbootstrap-4rangeslider

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png The issue I'm facing is that I'm unable to display the right border correc ...

cssreactjsmaterial-uidatagrid

Tips for reliably resizing slider images with varying widths

I am trying to scale '.slick-slide img' by height because the images vary in width. Scaling them by width would result in inconsistent proportions. However, when I apply a dimension to the height property for '.slick-slide img', the ima ...

htmlcss

How can I pass a variable to withStyles in Material UI?

Here is the code I am currently working with: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: { borderBottom: `2px solid ${color}`, '&:after': { borderBottom: `2px solid ${col ...

cssreactjsmaterial-uiwrapperhigher-order-components

Implementing text overlays on images within a Bootstrap 4 navigation bar

I am struggling to grasp the flex structure in Bootstrap. I'm attempting to overlay text on an image within the navbar, but it seems the container of the navbar is causing issues. Perhaps my containers are not set up correctly. Any assistance would be ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for positioning a div with z-index to cover another div when hovering

I'm working on a container div that contains multiple smaller div elements, all with the style rule float:left;. When I hover over one of the smaller div elements, I want it to increase in height and width while overlaying the other div elements witho ...

csshoverpositionz-index