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

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

Broken styles when using Material UI with babel and the 'with styles' feature

We've implemented babel and lerna to maintain specific elements of our react web app separately. While the setup has been effective thus far, we're encountering styling issues when generating the static build. The main project is not processed t ...

cssreactjsbabeljsmaterial-ui

Integrating image transitions into JavaScript

Could you provide guidance on how to create buttons from the three images within the "fadein" div in order to navigate directly to a specific jpeg? Currently, the three jpgs are displayed in a continuous loop. Thank you. ...

javascriptcssimagehtml

Uploading Multiple Files Using HTML5 and AJAX

I recently stumbled upon this simple plain JavaScript AJAX upload code (apparently jQuery's $.post doesn't work properly with HTML5 for some reason), /* If you want to upload only a file along with arbitrary data that is not in the fo ...

jqueryajaxhtmlfile-upload

How to remove previous and next buttons in product carousel using Bootstrap 3.3.5

Currently, I am tackling a small project and venturing into the world of bootstrap for the first time. I have hit a roadblock when it comes to disabling (not hiding) product carousel controls when the active state is on the item:first & item:last classes. ...

jquerycsstwitter-bootstrapcarousel

Display the field names from a MySQL table on a web page

Is there a way to show all column names from a MySQL table on a webpage if only the table name is known? ...

phphtmlmysqlcss

What is the method for rotating a map using JavaScript?

My map built with Leaflet displays a route and a moving car marker. Now, I am looking to implement a feature where the map rotates based on the direction of the car. I have access to both the current coordinates of the car and the target coordinates. ...

javascriptjquerycssleaflet

Having trouble simulating JavaScript Math.random in Jest?

Math.random() seems to always return random values instead of the mocked ones. script.test.js jest.spyOn(global.Math, "random").mockReturnValue(0.123456789); const html = fs.readFileSync(path.resolve(__dirname, "./script.html"), " ...

javascripthtmljestjsjsdom

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

javascriptjqueryhtmlcssjquery-ui

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

htmlcss

What is the best way to obtain the current cursor location in draft.js?

As part of my draftjs project, I'm working on implementing a feature that allows users to easily insert links. One approach I've taken is creating a popup that appears when the shortcut cmk + k is pressed. To enhance the user experience, I am cu ...

javascripthtmlreactjsnext.jsdraftjs

What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...

cssreactjsmaterial-uijsx

Is there a way to substitute all underscores in HTML tag IDs and classes with a hyphen symbol?

I recently realized that I used underscores instead of hyphens in some of my CSS class and id names. To correct this, I want to replace all underscores with hyphens using the sublime text replace feature (ctrl + H). Is there a way to change underscores to ...

htmlcsssublimetext3

I require assistance in understanding how to successfully implement ParseINT with (row.find)

enter image description hereHow To Utilize ParseINT Using row.find(). I Attempted This Code But It Doesn't Work. This is My Code : function update_qty() { var row2 = $(this).parents('.item-row'); var price2 = row2.find(parseInt($ ...

javascriptjqueryhtml

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected. ...

javascriptcssvue.jslocal-storagequasar-framework

What steps do I need to take to activate this JQuery plugin successfully?

I stumbled upon this amazing silky smooth marquee jQuery plugin online @: Smooth marquee After downloading the latest JQuery and the JQuery marquee plugin as directed on the site above, I am still unable to make it work like they showcased in their demo: ...

jqueryhtml

CSS gallery slideshow with images that smoothly fade-in and fade-out at a specified location

In the image below, at position 4 (marked by yellow circle) from the left where picture 6 is displayed, I want a cross-fade (fade-in/fade-out) gallery of images to take place. Specifically at position 4, I am looking for a cross-fade (fade-in/fade-out) ef ...

htmlcsscss-animationsfadeinfadeout

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

Tips for showcasing HTML as code tailored to certain programming languages

While browsing the web, I stumbled upon a website that had SQL code displayed with specific classes and styles applied to it. For example, table names were colored blue when inspected. Here is a glimpse of what I encountered: https://i.sstatic.net/WAacj.p ...

htmlcsspre