The `col-md-4` element from Bootstrap 4 is not functioning properly within my ejs file

    <div class="container"> 
    <div class="row card-deck">
    <% for(var i=0;i<campgrounds.length;i++){ %>
        <div class="card col-12 col-md-4">
        <img class="card-image-top" src="<%= campgrounds[i].image %>"  style=width:100%;height:350px;>
        <div class="card-body">
        <h3 class="card-title"><%= campgrounds[i].name %></h3> 
            </div>
        </div>
    <% }%>
</div>
</div>

My dictionary array "campgrounds" contains 6 items with properties such as "name" and image. I am using the col-md-4 class to display 3 items in a row for medium-sized screens and above. However, all 12 items are being displayed in a single row on larger screens. What could be causing this issue?

javascripthtmlcssbootstrap-4

Answer №1

.card within Bootstrap has custom flex properties that take precedence over .col-*

To see the desired outcome, make sure to nest .card as a child div of .col-md-4.

.col-md-4{ margin: 20px auto; } /* Alternatively, utilize my-* classes */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row card-deck">
    <div class="col-md-4">
      <div class="card">
        <img class="card-image-top" src="https://via.placeholder.com/150" style="width:100%;height:350px;">
        <div class="card-body">
          <h3 class="card-title">Card Title</h3>
        </div>
      </div>
    </div>
    <!-- Additional card code blocks -->
  </div>
</div>

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

The issue of `Console.log` displaying as undefined arises after subscribing to a provider in Ionic3

In the process of implementing the Spotify api into my Ionic 3 app, I encountered an issue where the data retrieved appears as undefined when attempting to log it. Let me share some code and delve deeper into the problem. Here is the function getData() tha ...

javascriptangulartypescriptionic-frameworkionic2

The system encountered an issue while trying to access the 'bannable' property, as it was undefined

message.mentions.members.forEach(men => { let member = message.mentions.members.get(men) if (!member.bannable) return message.reply(not_bannable) const reason = args.slice(1).join(" "); member.ban({reason: reason ...

javascriptdiscorddiscord.js

Achieve maximum use of vertical and horizontal space for items in a flexbox

I have a container with elements, each containing an image. I want to arrange these images in the four corners of the container using flexbox. Currently, they are distributing correctly horizontally but not taking up all the available space vertically. He ...

htmlimagecssflexbox

When the initial image URL returns a 404 error, the ng-src path does not automatically switch to the alternative

I'm currently working on a webpage where I want to show an image only if the URL of that image is valid, using AngularJS. The challenge I'm facing is that ngIf only checks whether a value is null or not. So, even if the URL returns a 404 error, ...

javascriptangularjs

THREE.js - Transformative Vertex Shader for Billboards

I am trying to figure out how to make an instance of THREE.Mesh always face the camera using a vertex shader instead of just relying on the [THREE.Mesh].lookAt() method. After reading through NeHe's Billboarding tutorial, I understand the concept exc ...

javascriptopengl-esthree.jsglslwebgl

Find the preceding element of the element that includes a specific link text

Can someone help me figure out how to click on a <td> element that precedes the <td> element with the linkText "Main" using Selenium? The element I'm looking to click is shown in the highlighted area of this image: https://i.sstatic.net/Q ...

javahtmlcssseleniumxpath

Check the validity of the JWT token

I am currently utilizing the Slim Framework for backend development. However, I am facing an issue with comparing the token generated by my login function: public function login($request, $response){ $key = $this->container['key']; $e ...

javascriptphpreactjsjwtslim

Develop a cutting-edge front end for Hyperledger Fabric 2.2 with React js and enhance it with a node

Currently, I have developed a unique hyperledger fabric 2.2 blockchain network using javascript and am looking to integrate it with a React.js front end utilizing the node.js API. Despite my efforts to find relevant examples, most resources focus on hyperl ...

javascriptnode.jsreactjshyperledger-fabric

Invocation of React state value

Are you looking to build a form and store some data? Take a look at this sample constructor code: constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSub ...

reactjswebbootstrap-4frontend

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

htmlcss

Tips for Eliminating Unnecessary Space Above the Navigation Bar

I have a problem with the top navbar on my test site. There is some extra space above it that I want to remove so that the navigation extends all the way up to cover the viewport. Here is an image of what I'm trying to achieve: https://i.stack.imgur.c ...

htmlcss

The sidebar remains fixed in height and does not expand vertically

Need Help: My sidebar won't expand in height when I update content. Is there a way to make it adjust using just HTML and CSS? html code: <div id="main"> <section> More text goes here... </section> <div id="sideb ...

htmlcsssidebar

Could someone kindly provide a detailed explanation of this Javascript code, breaking it down step

I'm currently learning Javascript and stumbled upon this code snippet. However, I'm having trouble grasping its functionality. Can someone please break it down for me step by step? var ar1 = [1, 5, 6, 4, 3, 5, 100, -20]; function funDo(ar) { ...

javascriptloops

Looking for a substitute for iframes when using jQuery UI tabs?

I currently have a Spring-based web application that integrates with jQuery Tabs. What I'm doing is building a data string with specific parameters and appending it to a URL: var hrefData = "?" + item1 + "&" + item2 + "&" + item3; var href = ...

javascriptjqueryhtmlajaxjquery-tabs

Style large and small text side by side with CSS styling

I've been trying to figure out how to position a smaller biography-style text next to this large title, but I'm having trouble finding a solution. I've experimented with float: left, float: right, and display: flex in my CSS code. Below is t ...

htmlcsstextalignment

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

click here for a sneak peek of the image Imagine a matrix with dimensions m by n, containing names on both the left and top sides. Remember, each column and row must be labeled accordingly. ...

javascripthtmljsonangularuser-interface

Setting the button name using setAttribute("name", "Button Name") is currently not possible

I have been working on adding a button to my webpage, but so far I haven't had much success. Every attempt either results in an error or the button not displaying any text (refer to the screenshot below). There should be a button labeled "BUTTON NAME" ...

htmlcssdom

Neglect to notify about the input text's value

Having trouble retrieving the text from a simple <input id="editfileFormTitleinput" type="text>. Despite my efforts, I am unable to alert the content within the input field. This is the code snippet I've attempted: $('#editfileFormTitleinp ...

javascripthtml

Error: An unexpected character was found in the Gulpfile.js

Having an issue in my Gulpfile.js: gulp.task('webpack', gulp.series(async () => { const option = yargs.argv.release ? "-p" : "-d"; execSync(`node_modules/webpack-cli/bin/cli.js ${option}`, { stdio: [null, process.stdout, proce ...

javascriptnode.jsnpmnode-modulespackage.json

Transmitting fixed information through bootstrapValidator within a local network

How can a remote back-end be used to verify if a specific username is already in use? Verify locally without relying on a database or web server. This code utilizes the latest versions of BootstrapValidator, jQuery, HTML5, and Bootstrap. <script src=" ...

javascriptphpjquerybootstrap-4bootstrapvalidator