How can I put spacing on Bootstrap columns?-CodePudding

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>

CodePudding user response：

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>