Bootstrap: add margin between columns-CodePudding

I'm trying to put extra margin space between columns on my Bootstrap grid layout. I've tried adding custom CSS class like this

.classWithPad {
    margin: 10px;
    padding: 10px;
}

but didn't solve my problem, also I've tried adding ml-1 and mr-1 but I didn't get desired. Here is my code:

When I tried to add some extra margin/padding the corresponding column is moved to a new row.

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

<div >

  <div >
    <h5>General Information</h5>
    <hr/>
    <div >
      <div >
        paragraphs...
      </div>

      <div >
        paragraphs...
      </div>
    </div>
  </div>

  <div >
    <h5>Features</h5>
    <hr/>
    <div >
      <div >

      </div>

      <div >

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

  <div >
    <h5>Game Manufacturers</h5>
    <hr/>
    <div >
      <div >

      </div>

      <div >

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

CodePudding user response：

You generally don't want to mix structural and presentation elements. In this case, you've combined columns with cards. Put the cards inside the columns, and if you wanted them full-height you can use h-100 on them.

That, along with the container that should be present around outer rows, and you're all good. If you want more spacing, use px-* classes on the columns.

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

<div >
  <div >
    <div >
      <div >
        <h5>General Information</h5>
        <hr/>
        <div >
          <div >
            <p>paragraphs...</p>
          </div>

          <div >
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <h5>Features</h5>
        <hr/>
        <div >
          <div >
            <p>paragraphs...</p>
          </div>

          <div >
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <h5>Game Manufacturers</h5>
        <hr/>
        <div >
          <div >
            <p>paragraphs...</p>
          </div>

          <div >
            <p>paragraphs...</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>