How can I add margins to a Bootstrap v5 column that spans the full height and width of the content?

In this scenario, I have two rows and two columns in each row. My goal is to make the yellow blocks take up all available space in the column while having a margin. However, currently the margin disrupts the alignment of the yellow content.

https://i.sstatic.net/RKX50.png

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.content-margin {
  margin: 10px;
  background: yellow;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a061a07">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-100  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100 d-flex"></div>
    </div>
  </div>
</div>

The desired end result would look similar to this: https://i.sstatic.net/B4DDF.png

THE QUERY: Is it possible to achieve this by adding margin only to the yellow block?

NOTE: Although padding can be added to the COL itself as an alternative solution, it is not suitable for my actual use case.

https://jsfiddle.net/39zp4tc0/

javascriptcsstwitter-bootstrapbootstrap-5

Answer №1

Instead of applying margin to the child element, try adding padding to its parent (col):

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
  padding: 10px
}

.content-margin {
  background: yellow;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca9b2acb2ae">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-100  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-100 d-flex"></div>
    </div>
  </div>
</div>

I suggest using margin for positioning and padding for creating spaces between elements. To position a div in a specific way, consider using margin: auto along with display flex. For more details, refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

Adjust the height of the yellow section to 60% with a margin of 12px on top and bottom; Give this a try:

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.content-margin {
  margin: 12px 0;
  background: yellow;
}

.h-60 {
  height: 60%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="34565b5b40474046554474011a061a07">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin w-100 h-60  d-flex"></div>
    </div>
  </div>
  <div class="row justify-content-md-center">
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60  d-flex"></div>
    </div>
    <div class="col col-lg-6">
      <div class="content-margin  w-100 h-60 d-flex"></div>
    </div>
  </div>
</div>

Answer №3

To maintain consistency, I recommend using padding. If you are unable to apply it directly to the columns, consider placing it on an inner element that acts as a wrapper for your yellow boxes.

.row {
  background: green;
}

.col {
  background: red;
  border: 1px solid blue;
  height: 60px;
}

.bg-yellow {
  background: yellow;
}
<link rel="stylesheet" href="https://cdn.example.com/bootstrap.min.css">

<div class="container-fluid">
  <div class="row gx-0 justify-content-md-center">
    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>

    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>
  </div>

  <div class="row gx-0 justify-content-md-center">
    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>

    <div class="col col-lg-6">
      <div class="w-100 h-100 px-2 py-2">
        <div class="w-100 h-100 bg-yellow"></div>
      </div>
    </div>
  </div>
</div>

Answer №4

After some experimentation, I've managed to successfully incorporate MARGIN into the design of the yellow div elements.

By applying the d-flex and align-items-stretch classes to the COL elements, along with the flex-grow-1 class to the yellow divs, we are able to maintain the integrity of the layout while accommodating the MARGIN.

<div class="container">
  <div class="row g-0 justify-content-md-center">
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
  </div>
    <div class="row g-0 justify-content-md-center">
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
    <div class="col col-lg-6 d-flex align-items-stretch">
      <div class="content-margin flex-grow-1 d-flex"></div>
    </div>
  </div>
</div>

Check out my updated solution on JSFiddle here!

Take note: I've utilized the g-0 class on the COL elements to eliminate any default padding that may interfere with the overall look.

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

Does React have an event component that detects when a user is actively viewing a specific component, such as a post?

Is there a special React event that fires when the user's gaze is focused on a component? Something like ComponentEnteredShowArea? For instance, videos in Facebook posts play automatically when I direct my attention towards them. It would be ideal i ...

javascriptreactjscomponents

Combining CSR and SSR in the next iteration of our project will

In my application, I have three main user roles: Consumer, Merchant, and Admin. I want the pages that Consumers access to be SEO friendly and server rendered. However, for Merchants and Admins, I prefer them to be client rendered with their own respective ...

javascriptreactjsnext.jsserver-side-rendering

The mysterious case of the vanishing close button on Curator.io's mobile

Currently, I am using curator.io aggregator to showcase my Instagram feed on the website. An issue arises when switching to mobile view as the close button (class="crt-close") disappears. You can see an example of this here: To replicate the pr ...

javascripthtmlcss

Creating an Ajax Post request for API invocation

I'm currently setting up an Ajax Post request to interact with an API. Here is a mock curl command for reference: curl -X POST \ --header 'Content-Type: application/json' \ --header 'Accept: application/json' \ --h ...

javascriptjqueryajax

Connect the incoming http request information to a different controller

My navigation menu has the following structure: <div class="collapse navbar-collapse" id="admin-side-nav" ng-controller="AdminNav"> <ul class="nav nav-pills nav-stacked"> <li><a href="/admin/leaderboard/{{gameId}}">Lead ...

javascriptangularjs

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

csstwitter-bootstrapbootstrap-4

Achieving successful functionality with position:relative in IE9

Having difficulty with the position: relative property in IE9. Check out this demo for reference: <div style="overflow:scroll;height:120px;"> <table id="table" width="100%"> <tr style="position:relative;background-color:#1b72a4;"> ...

javascriptjqueryasp.nethtmlcss

Navigation buttons that move the user either up or down the page

I am a beginner in programming and I wanted to create two buttons for my webpage. One button should appear when the page is scrolled more than 300px and take the user to the top, while the other button should be displayed immediately and scroll the user to ...

javascripthtmlcssscrollonclick

Comparison of Ajax and submit: Why am I not receiving identical responses?

Utilizing Ajax for submission and all global variables ending in box. Note that the initialization code is functioning correctly. function begin() { if (confirm("Proceed at your own risk as all consequences are yours!!")) { var usernameNa ...

javascripthtmlajaxformspost

Setting a default value in react-select

Recently, I developed a react-select component that is compatible with redux-form. The SelectInput component looks like this: const MySelect = props => ( <Select {...props} value={props.input.value} onChange={value => props.input.on ...

javascriptreactjsreduxredux-formreact-select

Tips for personalizing a jQuery Mobile popup

Is there a way to customize the appearance of a dialog box using CSS? I've been struggling with my attempts so far... <div data-role="dialog" id="confirm-clear" class="dialog-custom" > <div data-role="content" > <p>Some ...

jquerycssjquery-mobilejquery-ui-dialog

Is there a way to verify if a word contains parentheses using regular expressions?

Is there a way to use regular expressions in JavaScript to identify words that are surrounded by square brackets, like this: "I love [coding] and [creating]"? I attempted the following code, but it didn't yield the desired results. if(data.word.matc ...

javascriptnode.js

Is the error log susceptible to cross-site scripting attacks?

Recently, I came across an error logged at window.onerror by one of my users: {"message":"\"nativka already initialized\"","file":"https://staticcf0.ntvk1.ru/nvv.js","line":"12","fileName":"https://staticcf0.ntvk1.ru/nvv.js","lineNumber":"12"} ...

javascriptnode.jsxss

What is causing the change in the watcher's source?

How can the source of a change to a watched property be detected in AngularJS? For instance, suppose I have the global value: let watchMe = 0; and it is being watched in a component as follows: $scope.$watch(() => { return watchMe; }, (newValue, o ...

javascriptangularjs

Styling Image Components for Mobile Devices on Next.js

Utilizing the Image Nextjs Component to center my image on the page has proven challenging. Despite aiming for the picture to maintain its true size, it appears pixelated. Additionally, when reducing the screen width, the image fails to display correctly f ...

cssreactjsnext.js

Is there a way to retrieve php session in a javascript file?

Here's the code snippet for reference: Contents of index.php file Javascript code from index.php function Result() { var marks = 55; document.getElementById("hdnmarks").innerHTML= marks; window.location = "results.php"; } HTML code from ind ...

javascriptphpjqueryhtmlsession

Unable to utilize jQuery within the NetBeans IDE

Whenever I try to include a jQuery file in Netbeans like this: <script type="text/javascript" src="js/jquery-1.3.2.js"> my code doesn't seem to work. However, when I use the following method: <script type="text/javascript" src="http://ajax ...

javascriptphpjquerynetbeans

Unleashing the power of ::ng-deep to access CSS in an Angular child component

I'm attempting to modify the CSS class of a child component by using ::ng-deep. Despite my efforts with various iterations of the code provided below, I have been unsuccessful in accessing the CSS. The structure of the HTML component is depicted in th ...

cssangularsassng-deep

Error encountered: "Jest error - TypeError: Unable to access property 'preventDefault' because it is undefined."

I encountered an issue while testing the function below, resulting in the error mentioned above. function toggleRecovery = e => { e.preventDefault() this.setState( { recovery: !this.state.recovery }, () => { ...

javascriptreactjsjestjs

showing data from a multidimensional array in an Angular UI grid widget

After receiving the data structure array from an API, I am faced with the task of displaying nested array properties for each record. Here is the approach I am currently taking: $scope.gridOptions = {}; $scope.gridOptions.columnDefs = []; $sco ...

javascriptangularjsarraysmultidimensional-arrayangular-ui-grid