How to add margin between Bootstrap cards without triggering flex-wrap?-CodePudding

I'm using Bootstrap cards and I want to separate them by a 2px margin.

Nonetheless, when I apply it (either with Bootstrap's margin classes or directly on my stylesheet) flex-wrap triggers and a card goes one row down.

How could I deal with this behavior?

Should I give a max-width to the cards?

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
  margin: 3px;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

h2,
.card {
  margin-top: 20px;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}

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

<div >
  <section >
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" >when an unknown</a>
  </section>

  <section >
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
    </p>
    <a href="#" >
                  when an unknown
                </a>
  </section>

  <section >
    <h3>Where does it come from?</h3>
    <p>
      orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </p>
    <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    <a href="#" >
                  when an unknown
                </a>
  </section>

CodePudding user response：

First and foremost, remove any margins set on Bootstrap classes. Bootstrap is intended to not need to add spacing/sizing, as it is built into the classes.

I re-worked your structure quite a bit. Mostly to try to structure the elements as Bootstrap recommends. With that being said, don't nest each card in sections. Instead, nest them in divs. The <section> tag defines a section in a document. & if I am not mistaken, the three cards aligned in a row qualify as a section. I nested all three cards in one section and called it the highlights class you already had.

col's function as a method of reserving space for certain content. So with a three-card setup, you should use col-4. The largest col is col-12, which spans the full width of the screen. 12/4 = 3. Then you can use sm lg and md for responsiveness on media screens. The above example creates three equal-width columns on small, medium, large, and extra-large devices using the predefined grid classes. Those columns are centered on the page with the row parent.

With this being said, the main reason your code was not working as intended is the additional CSS margins and that the cards should be nested in the col's. Lastly, the misuse of column sizing as mentioned previously.

I'd suggest brushing up on the Bootstrap Grid System. You can build a fully responsive site with little knowledge in CSS if you know Bootstrap.

.dark-theme body,
.dark-theme .card {
  background-color: #121212;
  color: #ffffffa6;
}

.dark-theme section.card {
  background-color: #464646;
}

.card {
  border-width: 0;
}

main {
  padding: 100px;
}

h1 {
  text-align: center;
}

.dark-theme .btn {
  background-color: salmon;
  border-color: salmon;
}

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

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" >when an unknown</a>
      </div>
    </div>

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        </p>
        <a href="#" >
      when an unknown
      </a>
      </div>
    </div>

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>
          orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </p>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" >
    when an unknown
    </a>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Here, You can used Gutters class in the Bootstrap grid system.

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.

You can use g-1, g-2, g-3, g-4, and g-5 in row according to your needs.

.dark-theme body, .dark-theme .card {background-color: #121212; color: #ffffffa6;}
.dark-theme section.card {background-color: #464646;}
.card {border-width: 0;}
main {padding: 100px;}
h1 {text-align: center;}
.dark-theme .btn {background-color: salmon;border-color: salmon;}

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

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
        <a href="#" >when an unknown</a>
      </div>
    </div>

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p><a href="#" >when an unknown</a>
      </div>
    </div>

    <div >
      <div >
        <h3>Where does it come from?</h3>
        <p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p><p>orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="#" >when an unknown</a>
      </div>
    </div>
  </div>
</section>