Twitter Boostrap col exceeding container area-CodePudding

Hi I got 2 small problems

my col class is exceeding the container area = https://i.imgur.com/Ee1VlqL.jpg
also I need a space between the 2 divs = https://i.imgur.com/05MqQkV.jpg

if I add the code below works but break the div and put the div under the other one when we are reducing the browser size= https://i.imgur.com/TFqWBF2.jpg

.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-12 {
    width: 48%;
    margin-left: 20px;
}

the idea is to keep the div beside each other with the space like that = https://i.imgur.com/QTkPe5U.jpg

also, I noticed when I include the space between the divs break the responsiveness when getting bellow 992px to move the div under each other = https://i.imgur.com/E7cW1th.jpg

I really happy with responsiveness right now just if I put space between the divs break all the responsiveness, can someone help me with this issue?

jsfiddle= https://jsfiddle.net/vkb1aLeo/

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
</head>
<style>
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-12 {
border: 1px solid #030303;
padding: 20px;
margin-top: 10px;
}

.item-name {
float: left;
width: 50%;
font-weight: 600;
}

.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}

.item-desc {
float: left;
color: #0d6583;
width: 58%;
}

.item-image {
float: right;
/* width: 40%; */
}

h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}
</style>
<body>
<div >
    <h1>Test:</h1>   
            <div >
                <div >
                    <h4>Test</h4>
                </div>
                <div >
                    <div >
                        <p>Salad</p>
                    </div>
                    <div >
                        <span ><span ><p>€1.00</p></span></span>
                    </div>
                    <div >
                        <p>Packed with super foods</p>
                    </div>
                    <div >
                        <img  src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Salad" />
                    </div>
                </div>
                <div >
                    <div >
                        <p>Soup</p>
                    </div>
                    <div >
                        <span ><span ><p>€1.0a0</p></span></span>
                    </div>
                    <div >
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. 
                        </p>
                    </div>
                    <div >
                        <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Soup" />
                    </div>
                </div>
            </div>
        </div>
   
</body>

</html>

CodePudding user response：

You don't have to override col-sm class. Instead, try something like this. Pay attention to the new class called border_div:

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="    sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
</head>
<style>
.border_div {
    border: 1px solid #030303;
    padding: 20px;
    margin-top: 10px;
    display: block;
    float: left;
}

.item-name {
float: left;
width: 50%;
font-weight: 600;
}

.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}

.item-desc {
float: left;
color: #0d6583;
width: 58%;
}

.item-image {
float: right;
/* width: 40%; */
}

h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}
</style>
<body>
<div >
    <h1>Test:</h1>   
            <div >
                <div >
                    <h4>Test</h4>
                </div>
                <div >
                    <div >
                        <div >
                            <p>Salad</p>
                        </div>
                        <div >
                            <span ><span ><p>€1.00</p></span></span>
                        </div>
                        <div >
                            <p>Packed with super foods</p>
                        </div>
                        <div >
                            <img  src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Salad" />
                        </div>
                    </div>
                </div>
                <div >
                    <div >
                        <div >
                            <p>Soup</p>
                        </div>
                        <div >
                            <span ><span ><p>€1.0a0</p></span></span>
                        </div>
                        <div >
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet. 
                            </p>
                        </div>
                        <div >
                            <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Soup" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
   
</body>

</html>

CodePudding user response：

You can control gaps between rows' columns by setting

--bs-gutter-x: 2rem; /* control column gap */

Anyway, you suppose to move .menu-item class to new wrapper of .menu-* items, see Code Snippet. It also will make your code in more BS-grid-way.

.menu-row {
  --bs-gutter-x: 2rem !important; /* control column gap */
  --bs-gutter-y: 2rem !important; /* control row gap */
}

.menu-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  border: 1px solid #030303;
  padding: 20px;
}

.item-name {
  float: left;
  width: 50%;
  font-weight: 600;
}

.item-price {
  float: right;
  width: 50%;
  font-weight: 600;
  text-align: right;
}

.item-desc {
  float: left;
  color: #0d6583;
  width: 58%;
}

.item-image {
  float: right;
  /* width: 40%; */
}

h4 {
  padding: 10px;
  font-size: 32px;
  background: #945002;
  color: white;
  margin: 10px 0 10px 0;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />

<div >
  <h1>Test:</h1>

  <div >
    <div >
      <h4>Test</h4>
    </div>
    <div >
      <div >
        <div >
          <p>Salad</p>
        </div>
        <div >
          <span><span ><p>€1.00</p></span></span>
        </div>
        <div >
          <p>Packed with super foods</p>
        </div>
        <div >
          <img src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Salad" />
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <p>Soup</p>
        </div>
        <div >
          <span><span ><p>€1.0a0</p></span></span>
        </div>
        <div >
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet.
          </p>
        </div>
        <div >
          <img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&amp;w=120&amp;h=120" alt="Soup" />
        </div>
      </div>

    </div>
  </div>
</div>