html - How can I use Bootstrap's grid layout to achieve similar results as using justify-content: space-around flexbox p

This is part of an online exercise where I need to style the webpage using only Bootstrap.

The code is working fine, but I want to apply a Bootstrap class for its Grid layout which contains the cards in the code, to get results similar to the justify-content: space-around; property of flexbox. I tried applying justify-content: space-around; to the container, but it did not work.

The following image shows the desired output for the width<=768px:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Page</title>
  <link rel="stylesheet" href="/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="div container">
    <div class="text-center">
      <h1>Pricing</h1>
      <p>Please checkout our most effective payment models</p>
    </div>
    
    <div class="row text-center ">
      <div class="col-md col-6">
        <div class="card">
          <h5 class="card-header">Free</h5>
          <div class="card-body">
            <h1 class="card-title">$0 / mo</h1>
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">10 users included</li>
              <li class="mb-1">2 GB of storage</li>
              <li class="mb-1">Email support</li>
            </ul>
            </p>
            <a href="#"><button class="btn btn-outline-primary">Sign up for free</button></a>
          </div>
        </div>
      </div>
      
      <div class="col-md col-6">
        <div class="card">
          <h5 class="card-header">Pro</h5>
          
          <div class="card-body">
            <h1 class="card-title">$15 / mo</h1>
            
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">20 users included</li>
              <li class="mb-1">10 GB of storage</li>
              <li class="mb-1">Priority email support</li>
            </ul>
            </p>
            
            <a href="#"><button class="btn btn-primary">Get started</button></a>
          </div>
        </div>
      </div>
      
      <div class="col-md ">
        <div class="card">
          <h5 class="card-header">Enterprise</h5>
          
          <div class="card-body">
            <h1 class="card-title">$29 / mo</h1>
            
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">30 users included</li>
              <li class="mb-1">15 GB of storage</li>
              <li class="mb-1">Phone & email support</li>
            </ul>
            </p>
            
            <a href="#"><button class="btn btn-primary">Contact us</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

This is part of an online exercise where I need to style the webpage using only Bootstrap.

The following image shows the desired output for the width<=768px:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pricing Page</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="div container">
    <div class="text-center">
      <h1>Pricing</h1>
      <p>Please checkout our most effective payment models</p>
    </div>
    
    <div class="row text-center ">
      <div class="col-md col-6">
        <div class="card">
          <h5 class="card-header">Free</h5>
          <div class="card-body">
            <h1 class="card-title">$0 / mo</h1>
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">10 users included</li>
              <li class="mb-1">2 GB of storage</li>
              <li class="mb-1">Email support</li>
            </ul>
            </p>
            <a href="#"><button class="btn btn-outline-primary">Sign up for free</button></a>
          </div>
        </div>
      </div>
      
      <div class="col-md col-6">
        <div class="card">
          <h5 class="card-header">Pro</h5>
          
          <div class="card-body">
            <h1 class="card-title">$15 / mo</h1>
            
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">20 users included</li>
              <li class="mb-1">10 GB of storage</li>
              <li class="mb-1">Priority email support</li>
            </ul>
            </p>
            
            <a href="#"><button class="btn btn-primary">Get started</button></a>
          </div>
        </div>
      </div>
      
      <div class="col-md ">
        <div class="card">
          <h5 class="card-header">Enterprise</h5>
          
          <div class="card-body">
            <h1 class="card-title">$29 / mo</h1>
            
            <p>
            <ul class="list-unstyled">
              <li class="mb-1">30 users included</li>
              <li class="mb-1">15 GB of storage</li>
              <li class="mb-1">Phone & email support</li>
            </ul>
            </p>
            
            <a href="#"><button class="btn btn-primary">Contact us</button></a>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

I have searched in the documentation, but couldn't find the relevant solution. Can someone please solve this query?

Share Improve this question edited Jan 31 at 16:17 TylerH 21.1k77 gold badges79 silver badges112 bronze badges asked Jan 31 at 13:17 Steve 452 silver badges6 bronze badges

The BS grid system doesn't do arbitrary spacing. In your given example, the col-6 classes are what limits the width of those cards in the first place - without those column classes in place, they would go over the full width. So what is supposed to limit the width of your cards in the first place then? – C3roe Commented Jan 31 at 13:31
You do realize that the BS grid itself is based on flexbox, yes? So what is stopping you from implementing what you want, directly using the flexbox classes? Start with a structure like this, getbootstrap/docs/5.3/utilities/flex/#direction, and then apply the desired justify-content class. – C3roe Commented Jan 31 at 13:32
1 @C3roe I tried applying those, but it isn't working. I have added the image which shows the desired output – Steve Commented Jan 31 at 13:36
1 You'll need to allow the flex container to wrap its items, and you need to allow the card items to flex-grow. The rest is applying some margins. jsfiddle/uw217y8q (Please note that I didn't optimize this for specific breakpoints, that's up to you.) – C3roe Commented Jan 31 at 13:56

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

You can achieve this without using rows and columns buy just using flexbox classes. Apply margin classes per your preference to achieve minimum spacing. (I haven't done so here.)

Note that you have some invalid markup:

Lists are not allowed in paragraphs, which may not contain structural content. See https://developer.mozilla./en-US/docs/Web/HTML/Element/p.
Anchors and buttons have distinct intents and should not be nested. Use anchors for navigation and buttons for action. Both can be style in either way, though, using Bootstrap classes or custom styles.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css">
</head>

<body>
  <div class="d-flex flex-row flex-wrap justify-content-around">
    <div class="card flex-grow-1">
      <h5 class="card-header">Free</h5>
      <div class="card-body">
        <h1 class="card-title">$0 / mo</h1>

        <ul class="list-unstyled">
          <li class="mb-1">10 users included</li>
          <li class="mb-1">2 GB of storage</li>
          <li class="mb-1">Email support</li>
        </ul>

        <button class="btn btn-outline-primary">Sign up for free</button>
      </div>
    </div>

    <div class="card flex-grow-1">
      <h5 class="card-header">Pro</h5>

      <div class="card-body">
        <h1 class="card-title">$15 / mo</h1>

        <ul class="list-unstyled">
          <li class="mb-1">20 users included</li>
          <li class="mb-1">10 GB of storage</li>
          <li class="mb-1">Priority email support</li>
        </ul>

        <button class="btn btn-primary">Get started</button>
      </div>
    </div>

    <div class="card flex-grow-1">
      <h5 class="card-header">Enterprise</h5>

      <div class="card-body">
        <h1 class="card-title">$29 / mo</h1>

        <ul class="list-unstyled">
          <li class="mb-1">30 users included</li>
          <li class="mb-1">15 GB of storage</li>
          <li class="mb-1">Phone & email support</li>
        </ul>

        <button class="btn btn-primary">Contact us</button>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How can I use Bootstrap's grid layout to achieve similar results as using justify-content: space-around flexbox p

1 Answer 1

与本文相关的文章

评论列表(0)