Trouble with card alignment in Bootstrap

I've been experimenting with creating a grid layout using cards and utilizing ng-repeat for generating the cards. Unfortunately, I'm running into an issue where there is no spacing between each card, as depicted in the image.

https://i.stack.imgur.com/ZO80v.jpg

This is the code snippet I am currently using:

<!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">
                <h4 class="card-title">Card title</h4>
                <hr>
                <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>

Could someone please point out any issues they see in my code?

Any suggestions would be greatly appreciated!

Thank you in advance.

Answer №1

The card style functions flawlessly. The issue seems to be that your images are too wide. Try switching the image class from img-fluid to img-responsive and see if that resolves the problem. You can test it out on this fiddle.

Answer №2

To create space between the cards, follow these steps:

.card {
    margin-left: 10px;
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...

Tips for adjusting slider values using jQuery or Capybara

I've been attempting to adjust the slider value, but I haven't been successful so far. I'm using Capybara with a selenium driver. The HTML code looks like this: <div class="pslide-container"> <div class="slider slider-horizonta ...

Directive experiencing issues with Angular attribute expressions not being evaluated properly

Why is there a difference in how the expression inside the directive is evaluated using the link attribute compared to the template? Note that 'link' is only used here for illustrative purposes. I aim to pass data into a directive through its at ...

Having trouble with ng-repeat in AngularJS after including Angular 17 web components to index.html?

<select ng-if="!isOtherRemarkSelected" class="form-control m-1" ng-model="selectedRemark.value" ng-change="handleRemarks()"> <option value="">Select Remarks</option> <op ...

What is preventing the inputs from being edited in Angular.JS?

This problem is really puzzling. The code seems straightforward: Here is the HTML code snippet: <body ng-controller="MainCtrl"> <ul ng-repeat="name in names"> <input type="text" ng-model="name" /> </ul> </body> And ...

Is there a way for me to determine when the modal animation has completed?

I'm currently using the modal feature in twitter-bootstrap and I am curious about how long it takes for the modal to appear before triggering an alert. To better illustrate my point, you can check out this example: HTML <button id="mod" class="b ...

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

Display Checkbox Selections in a Popup Message Box

I've run into a problem while working on an assignment. My goal is to show the checkbox values for toppings in the alert box popup upon submission. However, only the text box and radio values are displaying, while the checkbox returns as blank. Any ...

Creating a mobile-friendly navigation bar with Vuetify for optimal responsiveness

I am attempting to utilize a vuetify tab component as my navigation menu in order to create a responsive navbar using vuetify. The goal is to have a normal navbar that functions like usual, but when viewed on a mobile device, it should hide the menu and di ...

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

Alignment problem detected in Firefox and Safari, but works perfectly in Chrome

Currently dealing with a CSS problem on my website that is only appearing in Safari and Firefox, while Chrome displays it correctly. The images are not positioning correctly and are stacking instead of being placed in each box as intended. I've expe ...

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

Troubleshooting form validation in AngularJS

Need help with a form that requires users to enter their email twice. I came across some Angular code online (though I can't find the link now) that almost does what I need, but there's an issue where one input still has the class .ng-invalid ...

Adding a luminous glow effect to the <a> tag upon selection

Currently, I am working on integrating a navigation bar into a test site. I have noticed that some navigation bars highlight the current selected page by adding a bar underneath or creating a glowing effect around the <a> tag. I am unsure of the corr ...

What is the best way to transfer information from a client's HTML to a node.js server?

I needed to transmit JSON data to a node.js server. Here is my server.js code: var http = require('http'); var util = require('util') http.createServer(function (req, res) { console.log('Request received: '); util.log(util. ...

Leveraging basscss through NPM/Webpack installation

As a newcomer to the webpack/react app environment, I am attempting to incorporate the Basscss CSS framework into my project. After successfully running 'npm i basscss' and adding require('basscss/css/basscss.css'); to my app entry poin ...

Unable to see Ionic Popup button

I've been experimenting with the Ionic framework to create a small app, but I'm experiencing an issue with the alert popup not displaying any buttons. It seems that they are not visible for some reason. Here is how it appears - This is my contr ...

What are the steps for transitioning with JavaScript?

My goal is to make both the <hr> elements transition, but I'm struggling with only being able to select the lower <hr> using CSS. html { margin-bottom: 0; height: 100%; min-height: 100%; } body { margin-top: 0; height: 100%; ...

How come the gridApi.on.edit.beginCellEdit function in angular-ui-grid does not immediately refresh the dropdown options after being updated?

I am encountering a similar issue as described in this post Regarding the assignment of ui grid value drop-down box before beginCellEdit event fires in Angular However, I have noticed a slight difference. Even after updating the editDropdownOptionArray, th ...