CODEWITHSUNDEEP
htmlcssangularjstwitter-bootstrap
dharan
dharan

Reputation: 753

Spacing issue with cards in bootstrap

I am trying to create a simple grid using cards. I am using ng-repeat to create cards. The problem is there is no spacing between each card as shown

enter image description here

I am using the below code

<!DOCTYPE html>
<html lang="en" ng-app="movieflix">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container" ng-controller="catalogcontroller">
    <div class="row" >

        <div  dir-paginate="user in users|itemsPerPage:16">

          <div class="col-xs-6  col-sm-3 col-md-3">
            <div class="card card-block ">
              <!--Card image-->
              <div class="view overlay hm-white-slight">
                <img src="http://ia.media-imdb.com/images/M/MV5BMTU4MDU3NDQ5Ml5BMl5BanBnXkFtZTgwOTU5MDUxNTE@._V1_SX300.jpg", class="img-fluid" alt="">
                <a>
                  <div class="mask waves-effect waves-light"></div>
                </a>
              </div>
              <!--/.Card image-->
              <!--Card content-->
              <div class="card-block">
                <!--Social shares button-->
                <!--Title-->
                <h4 class="card-title">Card title</h4>
                <hr>
                <!--Text-->
                <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="d-flex flex-row-reverse">
                  <h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i>
                  </h5>
                </a>
              </div>
              <!--/.Card content-->
            </div>
          </div>

        </div>
      </div>
    <dir-pagination-controls
            max-size="5"
            direction-links="false"
            boundary-links="false" >
    </dir-pagination-controls>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script src="js/dirPagination.js"></script>
<script src="js/movieflix.module.js"></script>
<script src="js/catalog.controller.js"></script>
</body>
</html>

Can someone tell me what is wrong with my code.

Really appreciate any suggestions.

Thanks in advance

Upvotes: 0

Views: 3581

Answers (2)

Ray Wojciechowski
Ray Wojciechowski

Reputation: 576

The card class works perfectly well. Your images are too wide. Change your image class from img-fluid to img-responsive and it should work. At least it does on this fiddle.

Upvotes: 1

StefanBob
StefanBob

Reputation: 5128

Add space between the cards:

.card {
    margin-right: 10px;
}

.card:last-of-type {
    margin-right: 0;
}

Upvotes: 1

Related Questions