CODEWITHSUNDEEP
htmlcssbootstrap-4
Zubair Amjad
Zubair Amjad

Reputation: 761

Add spacing between bootstrap cards

I am trying to add some pacing between cards that are provided and I was having some trouble adding some space between the cards.

This is how it currently looks like in my on my site: enter image description here

Currently my code looks like this

        <div class="row justify-content-center">
            <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
              <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
              <div class="card" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>

        </div>

I was wondering if i have to add some sort of padding like ml-5 or something.

Upvotes: 1

Views: 8188

Answers (5)

Salahuddin Ahmed
Salahuddin Ahmed

Reputation: 1

Try this code. This will provide space between cards.<div class="card mx-3" style="width: 18rem;">

Upvotes: 0

Amin Deraiya
Amin Deraiya

Reputation: 50

margin horizontaly

<div class="card mx-3" style="width: 18rem;">

margin left

<div class="card ml-3" style="width: 18rem;">

margin right

<div class="card mr-3" style="width: 18rem;">

Upvotes: 0

prianka mondal
prianka mondal

Reputation: 64

.card{
  margin-right:20px!important;
  }
your can modify your card default margin and definitely used !important

Upvotes: 2

nano dev
nano dev

Reputation: 443

You can add following class according to your requirement in parent div. Where you have "row justify-content-center" classes.

    Where property is one of: 
   
    m - for classes that set margin
    p - for classes that set padding

    Where sides is one of:
    
    t - for classes that set margin-top or padding-top
    b - for classes that set margin-bottom or padding-bottom
    l - for classes that set margin-left or padding-left
    r - for classes that set margin-right or padding-right
    x - for classes that set both *-left and *-right
    y - for classes that set both *-top and *-bottom
    blank - for classes that set a margin or padding on all 4 sides of the element

Upvotes: 2

Linear Data Structure
Linear Data Structure

Reputation: 342

You have to give margin to each child div just like below use full page view to see this snippet.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
      <div class="row justify-content-center p-4">
            <div class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
              <div class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>
              <div class="card mr-2" style="width: 18rem;">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
              </div>

        </div>
</body>
</html>

Upvotes: 0

Related Questions