Ways to create distance between columns in Bootstrap 5

screenshot

i want like this

Looking at the image provided, there seems to be an issue with spacing between the red and blue columns. Despite trying various Bootstrap classes, the desired result has not been achieved. Adding m-4 to the Navbar, Header, and sections below did not resolve the problem. When additional divs are added in the row, the left and right lengths become distorted. The goal is to maintain consistent spacing on the left and right while adjusting the spacing within the columns. Any suggestions on how to achieve this?

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219061904">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="90f2ffffe4e3e4e2f1e0d0a5bea1bea3">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>
<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-6 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
        <div class="col-lg-3 p-4" style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
</section>

htmlcssbootstrap-5spacingbootstrap-grid

Answer №1

In order to create a gap between two columns, simply add the gutter class such as gx-1:

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20424f4f54535452415060150e110e13">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131445f405f42">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>Creating Proper Bootstrap Structure</h1>

  <div class="row gx-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

Answer №2

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
  href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7d1f1212090e090f1c0d3d48534c534e">[email protected]</a>/dist/css/bootstrap.min.css"
  rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="17757878636463657667572239263924">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<header>
  <div
    class="m-4 px-4"
    style="background-color: white; border-radius: 10px"
  ></div>
</header>

<section class="container-fluid p-4">
  <h1>With Proper Bootstrap - Structure</h1>

  <div class="row" style="background-color: white; border-radius: 10px">
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-6 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div class="row mt-4" style="background-color: white; border-radius: 10px">
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
   <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div class="col-lg-3 mb-4 mb-lg-0">
      <div class="p-4" style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

Answer №3

It is possible to achieve this with some modifications to the template.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219061904">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cba9a4a4bfb8bfb9aabb8bfee5fae5f8">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div class="m-4 px-4" style="background-color: white; border-radius: 10px;"></div>
</header>

<section id="first">
    <div class="m-4 px-4 py-5 smashinglogo" style="border-radius: 10px;"></div>
</section>
<section>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-6 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
    <div class="m-4 row" style="background-color: white; border-radius: 10px;">
        <div class="col-lg-3 p-1">

            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
        <div class="col-lg-3 p-1">
            <div class="p-4" style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
</section>

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 best way to set up user comments in a Mysql database?

Recently, I've been working hard on building a blog from scratch. However, I encountered a major issue with the comment section. The form prompts users to enter their Name and Comment, which are stored in the following database fields: `comname` VARC ...

phphtmlmysqlencodingcomments

I am unable to utilize the backspace function within a text box generated by JavaScript

I have created a dynamic form using JavaScript that includes buttons and one text input field. However, the issue is that to delete the text entered in the input field, one must highlight the text and then type over it instead of being able to simply use t ...

javascripthtmlformsinput

Duplication of elements in a Meteor and React environment

When it comes to creating a basic Meteor app with React, this is the structure I have put in place: <head> <title>test</title> </head> <body> <div id="render-target"></div> </body> Here is the start ...

htmlmeteorreactjs

What is the best way to create floating text that appears when clicked, similar to the mechanics

https://i.stack.imgur.com/nRKG1.jpg Upon clicking the "big cookie" in my game, a popup appears displaying the number of cookies earned (like +276.341 septillion in this image). The popup slowly moves upward and then fades out. I successfully incorporated ...

javascripthtmlcsscss-animationscss-transitions

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

iOS devices do not support the add/removeClass function

This code functions properly on desktop browsers, but encounters issues when used on iPhones. Furthermore, the script mentioned below seems to be causing problems specifically on iPhone devices. var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstar ...

javascriptjqueryhtmlcssiphone

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

htmlcssangularjstwitter-bootstrapangularjs-ng-repeat

Trouble with top attribute functionality within animate function

Why does the top attribute in the animate function of JQuery not seem to work, while the opacity attribute functions correctly in the code snippet below? $(function() { $(window).on('scroll', function() { ...

javascriptjqueryhtmlcss

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

Creating a visual that when clicked, reveals an enlarged version at a different location

Is there a way to make an image appear in a different location on the page when it's hovered over? I've searched online but couldn't find a solution using just HTML and CSS. Does anyone know how to achieve this effect? Image not hovered: ht ...

htmlcssimagehover

How can you use the :not selector in CSS to target specific elements within a group?

Consider the following set of inputs: <div id="group"> <input id="uno" class="red"></input><br/> <input id="dos" class="red"></input><br/> <input id="tres" class="blue"></input><br/ ...

javascriptjqueryhtmlcssselector

Having trouble with the close button functionality on a Toast in Bootstrap?

I just started learning about Bootstrap v5 and I encountered an issue with the close button not working for Toasts in my code. Even though I copied the code directly from the website, the button does not dismiss the toast. Here is a snippet of my code: & ...

bootstrap-5

Why is the column width on this Tumblr page constantly flickering?

Seeking assistance with a minor issue on my Tumblr page - the content column seems to be flickering on mouseover, shifting between full width and its original programmed width. Any insight on the CSS causing this? Much appreciated! Check it out here (Dis ...

htmlcssthemestumblr

How to access an element inside a div using the eq() method

Within my #img_wrapper, I have multiple pictures each enclosed in a link: <div id="img_wrapper"> <a href="img1.jpg" style="display: none;"> <img src="img1.jpg" /> </a> <a href="img2.jpg" style="display: none;"> &l ...

jqueryhtml

Display additional fields based on a condition in ASP.NET Core 6.0 MVC for a Yes/No input

If a user enters either Yes or No in a specific field, I want to display additional fields that need to be filled based on their choice. <div class="col-6"> <label for="Renda Bruta">Demonstrativo do Ano</label> ...

c#htmlasp.net-corerazor-pages

Updating an SVG after dynamically adding a group with javascript: a step-by-step guide

Currently, I am working on a circuit builder project using SVG for the components. In my HTML structure, I have an empty SVG tag that is scaled to full width and height. When I drag components from the toolbar into the canvas (screen), my JavaScript functi ...

javascripthtmlsvgdomxhtml

Version 66 of Chrome on Mobile Browser now offers Autoplay functionality

My goal is to implement a feature where an image with a play icon is displayed, and when the user clicks on the icon, a video is loaded in an iframe within a popup window. Despite following the guidelines provided in this link, we are facing issues with ...

htmlgoogle-chromevideochromiumautoplay

What is the best way to manage the changing selection in a drop-down list?

Can someone help me with a coding issue I am facing? <select name="txtTK" > <option value="None">---</option> <option value="Mat">Materials</option> <option value="Cate">Category</option> <option ...

javascripthtmlajaxasp-classic

The CSS selector functions as expected when used in a web browser, however, it

While conducting test automation using Selenium, I typically rely on css selectors to find elements. However, I recently came across a peculiar issue. I observed that in certain cases, the css selector works perfectly when tested in the browser console. Fo ...

javascriptjquerycssseleniumcss-selectors

How can we create a two-dimensional image with random dimensions using Math.random?

I am struggling to create a variety of flowers with different sizes from an Array. The issue I'm facing is that every time I click to add a new flower, it changes the size of all existing flowers as well. What I would like is for each added flower to ...

javascriptarrayshtmlrandom