Increase the spacing within div columns containing rows of uniform height

Is there a way to add some extra space between the H3-1 div and the H3-2 div?

  • Ideally, I would like to achieve this without using custom CSS, but if necessary, that's okay too.
  • I'd prefer to stick with the col-sm-6 class instead of using col-sm-5 with offset as it creates more space than needed.
  • The ml-auto and mr-auto classes are important for centering columns, especially when the number of columns is dynamic.

@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-1</h3>
        <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0 p-2">
        <h3>H3-2</h3>
        <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
      </div>
    </div>
    <div class="col-sm-6 border align-top ml-auto mr-auto mt-3 bg-light">
      <div class="m-0">
        <h3>H3-3</h3>
        <p>asd asd asd a</p>
      </div>
    </div>
  </div>
</div>

htmlcssbootstrap-4

Answer №1

[Outdated information] Yes, for instance, you can modify column classes from col-sm-6 to col-sm-5 and introduce the col-md-offset-2 class to the second column:

[Revised example reflecting changes in the question:]

<!DOCTYPE html>
<html lang="en-us">

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="row row-eq-height">
    <div class="col-sm-6  align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-1</h3>
            <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
        <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
            <h3>H3-2</h3>
            <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
        </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 pl-1 pr-1">
         <div class="h-100 bg-light border m-0 p-2 pl-4 pr-4">
             <h3>H3-3</h3>
             <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
            </div>
        </div>
    </div>
</div>

</html>

Answer №2

It's puzzling why you're unable to incorporate custom CSS, but I found a workaround by utilizing bootstrap 4's flexible layouts to add some space.

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<div class="container">
<div class="flex-row row-eq-height d-inline-flex">
    <div class="col-sm-6 border align-top mt-3 bg-light mr-2">
        <div class="m-0 p-2">
            <h3>H3-1</h3>
            <p>sad ajsdha sjhd ajshdjashd jashdj ashdj ashd jashd jashdj ashdj ashdj ashdj ashdjas dashdj asdhjashd ashd as</p>
        </div>
    </div>
    <div class="col-sm-6 border align-top mt-3 bg-light ml-2">
        <div class="m-0 p-2">
            <h3>H3-2</h3>
            <p>asjd asjdh asjdhasj hasjdh jshd jashjas dh jasdha jdh jashdj ashdj shdj ashdj </p>
        </div>
    </div>
</div>
</div>

You have the flexibility to adjust the mr-2/ml-2 values to modify the margins of your bootstrap columns according to your preferences.

Answer №3

@import url(https://stackpath.bootstrapcdn.com/my-custom-bootstrap/4.1.3/css/bootstrap.min.css);
<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>Custom H3-1</h3>
        <p>This is a custom paragraph with unique content.</p>
      </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>Custom H3-2</h3>
        <p>Another custom paragraph with unique text.</p>
      </div>
    </div>
    <div class="col-sm-6 align-top ml-auto mr-auto mt-3 p-0">
      <div class="border border-primary rounded ml-1 mr-1 h-100 p-2 bg-light">
        <h3>Custom H3-3</h3>
        <p>Yet another customized paragraph.</p>
      </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

Is there a way to adjust the dimensions of the <audio> tag using CSS?

//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...

html

Exploring the ins and outs of utilizing pseudo selectors with material-ui

I've been attempting to accomplish a simple task. I wanted to toggle the visibility of my <TreeMenu/> component in material UI v1 using pseudo selectors, but for some reason it's not working. Here is the code: CSS: root: { ba ...

cssreactjsmaterial-ui

Why do CSS changes in Chrome Console only take effect locally and not when the website is live?

I recently encountered an issue where I wanted to incorporate negative margins into a specific section of my website, as seen in the Chrome Console (link to image): .woocommerce div.product div.images .woocommerce-product-gallery__wrapper { -webkit-tr ...

htmlcss

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

javascripthtmlcssreactjs

My goal is to create a stylish form using bootstrap and CSS3

I am aiming to replicate the layout of this particular page: Struggling to utilize css3 for designing, how can I achieve a form similar to this? Facing difficulty in creating the outer red border and inserting spacing between fields. Seeking advice on th ...

htmlcss

arrangement of a list with the specified information stored in each item

Presently, my task involves setting up a dynamic gallery page with multiple tabbed lists that are fetched from the database. Each list corresponds to a specific Gallery Name and is associated with a unique data-list-id. Furthermore, each gallery contains ...

phphtmlforeach

Are there ways to incorporate extra icons into NavMenu in Blazor 8?

I am exploring ways to incorporate extra icons into the NavMenu.razor component of my Blazor version 8 application. In the earlier version, Blazor 7, there was an iconset setup located in wwwroot/css/, which allowed me to include additional icons simply by ...

cssblazoricons

The React JSX error message "Maximum update depth exceeded" occurs when there

It appears that I am facing an issue of creating an infinite loop while passing props from one class to another. Despite ensuring that the buttons are correctly bound and trigger only once, the problem persists without any solution in sight after thorough ...

javascripthtmlreactjsloopsjsx

External CSS stylesheets

I have encountered the following HTML code: <div class="entry"> <p></p> //text-indent here <blockquote> <p></p> //no text-indent here </blockquote> </div> I am trying to apply a ...

htmlcss

Maintaining the image's aspect ratio while cropping it to fit within the maximum or minimum height

Is there a way to make an image responsive by resizing it while keeping its aspect ratio intact at all sizes? I want the height of the image to stay fixed above 650px, cropping the top and bottom to maintain the ratio without stretching. Additionally, I do ...

cssimageresponsive-design

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Adjusting the height in AngularJS based on the number of items in a table

I've developed a straightforward AngularJS application with multiple tables on one page. In order to add scrolling functionality, I initially used a basic CSS code snippet like: tbody { overflow: auto; } I also experimented with the https://github. ...

htmlcssangularjsscroll

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

Failed to load CSS file in nodeJS application

I followed a tutorial to create a backend app using nodeJS and Express. My MongoDB connection with Mongoose is working fine. However, I am facing issues when trying to add a simple front-end using html/ejs/css. The endpoints are loading on localhost but on ...

javascripthtmlcssnode.jsexpress

The text and buttons exceed the size limits of the popup box

Currently, I am tasked with updating an old website that includes a popup box containing an iFrame and nested tables. The content within these tables consists of text and two input boxes at the bottom. Everything within the box looks fine on screen resolu ...

htmlcss

Experiencing an overflow of redirects in PHP contact form

I am encountering an issue on my website where there are too many redirects occurring when attempting to submit a form that is supposed to be sent via email. The connection between the form and email seems to be correct. Form Code: <section class=" ...

phphtmlformsemailhttp-redirect

The CSS styles are not applied when using self.render("example.html") in Tornado/Python

I'm still learning Python and programming in general. I'm currently using Tornado as my web server to host my websites. However, when I try to generate a dynamic html page using self.render("example.html", variables here), the resulting page does ...

pythonhtmlcsstornado

toggle visibility of <li> elements using ng-repeat and conditional rendering

I have an array of color IDs and codes that I'm utilizing with ng-repeat in the <li> tag to showcase all colors. However, I only want to display colors where the color code is less than 10, hiding any colors where the color code exceeds 10. Addi ...

cssangularjs

When a Mui Button is clicked, it changes the color of all tabs instead of just the active

My website footer contains 5 links represented by Mui Buttons with the component set to {Link} in order to transform them into clickable links. Currently, all the buttons are black and change to green when hovered over. However, I want the button color to ...

cssreactjsmaterial-ui