How can I put spacing on Bootstrap columns?

Question

I want to view all the cards in a single row when the device screen size is greater than lg and when it is less I want them stacked on top of the other. But I am unable to achieve the desired result. Only 2 cards are in a single row although I have split the row into 4:4:4. Adding to my problem when the device size is less than large, the cards are stacked alright, but the width of the cards are out-of-bounds and are not decreasing with the decrease in screen size even though I have specified col-12.I tried using border-boxing but it is not working. I am kind of new to HTML, so kindly help.

body {
  background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226));
}

.box {
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
}

.heading {
  text-align: center;
  font-size: 40px;
}

.top {
  color: grey;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

ul {
  list-style: none;
  font-size: 15px;
  text-align: left;
  padding-left: 0px;
  /* letter-spacing: .1rem; */
}

ul.cross {
  color: grey;
}

ul.tick {
  margin-bottom: 0px;
}

ul.tick li:before {
  content: '✓';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
}

ul.cross li:before {
  content: 'x';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
  color: grey;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <title>Price tag</title>
</head>

<body>
<div class="container ">
    <div class="row ">
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">$0</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>

      </div>
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">$0</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>
      </div>
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">$0</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>

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

isherwood · Accepted Answer · 2021-10-22 14:22:19Z

It's a mistake to put a bunch of spacing classes on your grid, which causes the columns to become too large for the row. Use the grid for structure, and put spacing inside for design. Don't mix those concerns. Bootstrap already applies border-box.

Also, a good editor will point out invalid HTML, such as the horizontal rules inside the paragraphs. (They could go outside, but I've replaced them with Bootstrap's border-bottom class on the paragraphs.)

Finally, convention (and Bootstrap's "mobile first" philosophy) dictate that breakpoint classes be ordered with smallest first in the markup to correspond with the actual CSS cascade.

body {
  background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226));
}

.box {
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
}

.heading {
  text-align: center;
  font-size: 40px;
}

.top {
  color: grey;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

ul {
  list-style: none;
  font-size: 15px;
  text-align: left;
  padding-left: 0px;
  /* letter-spacing: .1rem; */
}

ul.cross {
  color: grey;
}

ul.tick {
  margin-bottom: 0px;
}

ul.tick li:before {
  content: '✓';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
}

ul.cross li:before {
  content: 'x';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
  color: grey;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <title>Price tag</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">$0</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>

      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">$0</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>

      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">$0</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

ok, Thankyou. Could you tell me what is happening wrong with my coding?Even though i gave the spacing and grid classes together i am not understanding what is going wrong?
I explained that the columns become too large to fit the row and container. They're designed to work together with the margins already applied by Bootstrap. You should use your browser's document inspector to look at what's happening when you make the margins bigger. Also, I replaced your horizontal rules with bottom borders. See the updated answer.

Collectives™ on Stack Overflow

How can I put spacing on Bootstrap columns?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related