Spacing between columns in Bootstrap5 for responsive design

In my Django app, I am utilizing Bootstrap for styling columns. I have successfully created a responsive layout that stacks vertically after a specific breakpoint using classes.

Now, my goal is to add some space or gutter between the columns while maintaining it when they are stacked vertically.

<div class="container">
  <div class="row justify-content-center" style="margin-top: -100px;">

     <!-- LEFT -->
     <div class="col-md-4 border rounded bg-light">
        <div class="row justify-content-center">
           <h5 class="text-center"> Some text here </h5>
        </div>
        <br>
     </div>

     <!-- RIGHT -->
     <div class="col-md-4 border rounded bg-white">
        <div class="row justify-content-center">
           <h3 class="text-center"> Some text here</h3>
           <h2 class="text-center">Some text here</h2>
           <p class="text-center" style="font-size: 11px;">Some text here</p>
        </div>
     </div>
     <br>
  </div>
</div>

Normal sizing https://i.sstatic.net/rv8CO.png

Responsive sizing https://i.sstatic.net/YrrlB.png

Desired outcome normal https://i.sstatic.net/jeGwg.png Desired outcome responsive https://i.sstatic.net/fvL88.png

I have attempted to include gutters following the guidelines in the Bootstrap documentation, but no method seems to achieve the desired spacing effect.

Your assistance is highly appreciated.

htmlcssresponsive-designbootstrap-5

Answer №1

The styling you added, border rounded bg-light, needs to be applied to the element inside the .col class instead of directly on the .col itself.

The .col class uses CSS padding for horizontal spacing, and this padding is within the borders of the element. That's why your current styling isn't working as expected.

I hope this explanation helps you with your coding! Happy coding!

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e031e001d515c40585101">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<h5 class="text-center text-decoration-underline">Original Result</h5>
<div class="container">
  <div class="row justify-content-center">

     <!-- LEFT -->
     <div class="col-md-4 border rounded bg-light">
        <div class="row justify-content-center">
           <h5 class="text-center"> Some text here </h5>
        </div>
        <br>
     </div>

     <!-- RIGHT -->
     <div class="col-md-4 border rounded bg-white">
        <div class="row justify-content-center">
           <h3 class="text-center"> Some text here</h3>
           <h2 class="text-center">Some text here</h2>
           <p class="text-center" style="font-size: 11px;">Some text here</p>
        </div>
     </div>
     <br>
  </div>
</div>

<h5 class="text-center text-decoration-underline">Restructured Result</h5>
<div class="container mt-3">
  <div class="row justify-content-center">
  
    <!-- LEFT -->
    <div class="col-md-4">
      <div class="border rounded bg-light h-100">
         <h5 class="text-center"> Some text here </h5>
      </div>
    </div>
    <br>

    <!-- RIGHT -->
    <div class="col-md-4">
      <div class="border rounded bg-white h-100">
        <h3 class="text-center"> Some text here</h3>
        <h2 class="text-center">Some text here</h2>
        <p class="text-center" style="font-size: 11px;">Some text here</p>
      </div>
    </div>
    <br>
  </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

Functionality Issue: Submit Button Not Working on Designed Form Select

Through dedication and hard work, I managed to create a customized form with images that display correctly in Firefox, Chrome, and Internet Explorer's compatibility mode. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

javascriptcssformsonchange

The background hue does not cover the entire element

When I hover over my drop-down menu button, the grey color only covers up to where I set the padding. Here is my HTML snippet: Help ▾ Give Get Help Get Involved I want the grey color to expand fully across the "li" ...

cssdrop-down-menupaddingbackground-colordropdown

unique map customized in a separate browser window

Attempting to complete the code provided here but encountering issues as a novice in java-scripting. It seems like the map is not loading correctly. A new tab and text are generated when DIV is created. Seeking assistance on how to open a custom map in a ...

javascripthtmlgoogle-maps

How to position an empty Div next to images

I am currently working on a project to familiarize myself with Japanese Hiagana. I plan to incorporate more images and eventually sound into the post. To reduce the number of images used, I attempted to replace empty .pngs with a div element. However, I am ...

css

Pass the disabled select option value to a form using a hidden input field

My Django form has a section that is set up like this: <select {% if 'ba1' in widget.name or 'bs1' in widget.name or 'pm2' in widget.name %} disabled {% endif %} id="{{ widget.attrs.id }}" ...

htmldjangodjango-templates

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

I've encountered a performance issue while working on a complex angular page. To demonstrate the problem, I've created a fiddle that can be viewed here. The main cause of the performance problem lies in the ng-class statement which includes a fu ...

javascripthtmlangularjs

creating a new page upon clicking a div element

I need assistance in creating an effect similar to the one found on this website - where clicking on a div opens a new page. ...

jqueryhtmljquery-uidom

What is the method for including a hyperlink in an swf document?

I've been working with HTML and trying to embed links in my webpages that are in offline mode. After doing some research, I came across the following code snippet: MyClickTagButton.addEventListener( MouseEvent.CLICK, function():void { if (roo ...

htmlcssactionscript-3flash

How can I style an image in CSS to have a set height, maximum width, and keep its aspect ratio fixed?

I am trying to place a set of images with varying heights and widths inside a div tag. My goal is to have the images maintain a fixed height, unless the width surpasses a certain limit, in which case I want the height to adjust while preserving the aspect ...

htmlcss

What could be causing the absence of ReactDOM in my hello world application?

I have recently started learning Reactjs and I'm attempting to run a hello world program in the browser. However, I encountered an error which reads: react-dom.min.js:12 Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_ ...

javascripthtmlreactjs

Prevent users from saving changes made to dropdown menu values (as well as other user-inputted content) using Inspect Element on the website before it

Recently, I started testing my website for bugs and stumbled upon a major issue that caught me by surprise. I never realized that changes made with Firebug or similar plugins on websites could actually be saved and implemented. Despite my efforts to preve ...

htmlformssecurityfirebugweb-inspector

Guide to displaying or hiding elements based on the number of selected checkboxes

When only one checkbox is checked, all buttons in the head-btn class should be displayed. By default, only the add folder and upload buttons are shown. If a user selects two checkboxes, the share button should be hidden. If they uncheck one of the checkbo ...

javascriptjqueryhtmlcheckbox

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

javascripthtmlclickable

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

phpjqueryhtmlcssajax

Getting variables from different functions in Python can be achieved by using the return

I am trying to implement a feature where I can fetch a search term from the function getRandomVideo() and then use it in a jQuery statement. For example, if I get "Beethoven" as the search term from the variable searches, I want to use it to retrieve JS ...

javascriptjqueryhtml

Error with Unexpected Token HTML found in IBM Domino Web application

Currently working on an outdated IBM Lotus Domino web application that does not utilize XPages. The page is consistently encountering HTML errors related to the following line of code: <tr valign="top"><td width="20"><img width="1" height= ...

htmllotus-dominolotus

Uncovering Inline Styles Infused with Javascript for Effective Debugging of Javascript Code

SITUATION: I have recently inherited a website from the previous developer who has scattered important functions across numerous lengthy JS files. I am struggling to track down the source of an inline CSS style within the JS or identify which function is d ...

javascripthtmlcssdebugginggoogle-chrome-devtools

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

javascripthtmlangularseo

Retrieve the value of a CSS class property regardless of whether it is actively being utilized

I am facing a dilemma where I need to determine the value of the 'width' property for a css class named 'foo' (example: ".foo { width:200px}" ). However, there may not be an element with this class in the dom yet. My goal is to retrie ...

javascriptcss