screenshot

i want like this

As you can see in the picture, I can't put a space between the red and blue columns. I tried many Bootstrap classes, but I couldn't get the result I wanted. I added m-4 to the Navbar, Header and the sections below. When I add a few divs in the row, the left and right length (in m-4 equal) is distorted. I want to keep the left and right spacing fixed and adjust the spacing of the columns inside. How will I do this?

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<header>
    <div  style="background-color: white; border-radius: 10px;"></div>
</header>
<section id="first">
    <div  style="border-radius: 10px;"></div>
</section>
<section>
    <div  style="background-color: white; border-radius: 10px;">
        <div  style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div  style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
    <div  style="background-color: white; border-radius: 10px;">
        <div  style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div  style="background-color: red; border-radius: 10px;">
            example
        </div>
        <div  style="background-color: blue; border-radius: 10px;">
            example
        </div>
        <div  style="background-color: blue; border-radius: 10px;">
            example
        </div>
    </div>
</section>

CodePudding user response：

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

<section >
  <h1>With Proper Bootstrap - Structure</h1>

  <div  style="background-color: white; border-radius: 10px">
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div  style="background-color: white; border-radius: 10px">
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

CodePudding user response：

All you need to use gutter class like gx-1 for gap between two columns:

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

<section >
  <h1>With Proper Bootstrap - Structure</h1>

  <div  style="background-color: white; border-radius: 10px">
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
  <div  style="background-color: white; border-radius: 10px">
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: red; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
    <div >
      <div  style="background-color: blue; border-radius: 10px">
        example
      </div>
    </div>
  </div>
</section>

CodePudding user response：

With some template changes you can achieve this.

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

<section id="first">
    <div  style="border-radius: 10px;"></div>
</section>
<section>
    <div  style="background-color: white; border-radius: 10px;">
        <div >
            <div  style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div >
            <div  style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
    <div  style="background-color: white; border-radius: 10px;">
        <div >

            <div  style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div >
            <div  style="background-color: red; border-radius: 10px;">
                example
            </div>
        </div>
        <div >
            <div  style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
        <div >
            <div  style="background-color: blue; border-radius: 10px;">
                example
            </div>
        </div>
    </div>
</section>