Hey there! Since you're working with Bootstrap 3 (quick heads-up: Bootstrap 3 doesn’t include the card component—that’s a Bootstrap 4+ feature. If you’re strictly using Bootstrap 3, swap card for panel panel-default and card-body for panel-body to get the styled container effect), here are three solid ways to add spacing between your columns without breaking the grid system:

1. Nested Container with Padding (Most Reliable) #

Bootstrap 3’s grid relies on columns taking up full width of their parent, so adding padding to an inner container keeps the column layout intact while creating clean spacing between cards.

HTML: #

<div class="container-fluid">
  <div class="jumbotron">
    <!-- Your jumbotron content here -->
  </div>
  <div class="row">
    <!-- First Column -->
    <div class="col-md-4">
      <div class="column-padding">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Who Was Mahatma Gandhi?</h4>
            <p class="card-text">Mahatma Gandhi (October 2, 1869 to January 30, 1948) was the leader of India’s non-violent independence movement against British rule and in South Africa who advocated for the civil rights of Indians. Born in Porbandar, India, Gandhi studied law and organized boycotts against British institutions in peaceful forms of civil disobedience. He was killed by a fanatic in 1948.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Second Column -->
    <div class="col-md-4">
      <div class="column-padding">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Religion and Beliefs</h4>
            <p class="card-text">Gandhi grew up worshiping the Hindu god Vishnu and following Jainism, a morally rigorous ancient Indian religion that espoused non-violence, fasting, meditation and vegetarianism. During Gandhi’s first stay in London, from 1888 to 1891, he became more committed to a meatless diet, joining the executive committee of the London Vegetarian Society, and started to read a variety of sacred texts to learn more about world religions. Living in South Africa, Gandhi continued to study world religions. “The religious spirit within me became a living force,” he wrote of his time there. He immersed himself in sacred Hindu spiritual texts and adopted a life of simplicity, austerity, fasting and celibacy that was free of material goods.</p>
          </div>
        </div>
      </div>
    </div>
    <!-- Third Column -->
    <div class="col-md-4">
      <div class="column-padding">
        <div class="card">
          <div class="card-body">
            <h4 class="card-title">Gandhi’s Ashram & the Indian Caste System</h4>
            <p class="card-text"> In 1915 Gandhi founded an ashram in Ahmedabad, India, that was open to all castes. Wearing a simple loincloth and shawl, Gandhi lived an austere life devoted to prayer, fasting and meditation. He became known as “Mahatma,” which means “great soul.” In 1932, Gandhi, at the time imprisoned in India, embarked on a six-day fast to protest the British decision to segregate the “untouchables,” those on the lowest rung of India’s caste system, by allotting them separate electorates. The public outcry forced the British to amend the proposal. </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS: #

.column-padding {
  padding: 0 15px; /* Adjust this value to control spacing—15px left/right creates 30px between columns */
  margin-bottom: 20px; /* Optional: Add vertical spacing for mobile views */
}

2. Custom Column Margin with Calculated Width #

If you prefer margin over padding, adjust the column width to account for margin (since Bootstrap 3 columns use percentage widths). This works but needs responsive tweaks for smaller screens.

HTML: #

<div class="row">
  <div class="col-md-4 custom-spaced-col">
    <div class="card">
      <div class="card-body">
        <!-- Column content here -->
      </div>
    </div>
  </div>
  <!-- Repeat for other columns -->
</div>

CSS: #

.custom-spaced-col {
  margin: 0 1%;
  width: calc(33.333% - 2%); /* Subtract total margin (1% left + 1% right) from default col-md-4 width */
}

/* Reset for mobile layouts */
@media (max-width: 991px) {
  .custom-spaced-col {
    margin: 0 0 20px;
    width: 100%;
  }
}

3. Add Margin Directly to Cards #

Leverage Bootstrap 3’s row negative margin to add spacing to your cards. The row has -15px left/right margin, so adding 15px margin to the card will create perfect column spacing.

HTML: #

<div class="row">
  <div class="col-md-4">
    <div class="card card-spaced">
      <div class="card-body">
        <!-- Column content here -->
      </div>
    </div>
  </div>
  <!-- Repeat for other columns -->
</div>

CSS: #

.card-spaced {
  margin: 0 15px 20px; /* Left/right margin creates column spacing; bottom margin adds vertical space */
}

内容的提问来源于stack exchange，提问作者AnmolTheDeveloper