Incorrect implementation of Bootstrap CSS in Jade template

Currently, I am leveraging Express to construct a website. However, there seems to be an issue with my jade template not displaying the bootstrap grid system accurately. Despite double-checking that my app path is correctly set through app.use(express.static(path_join... the problem persists. Here's my layout.jade:

doctype
html( lang="en" )
  head
    title Edward's Photo Album
    link(rel='stylesheet' href='/bootstrap-3.3.6-dist/css/bootstrap.min.css')
body
  block content

Below is my cats.jade file:

extends layout

block content
  -for(var x=1; x<=imagenum-1; x++)
    .row
      .col-md-4
        h2 hello world

Instead of being displayed horizontally, "hello world" appears vertically. https://gyazo.com/968198ce7016a06d9bc7964a18a6d848

javascriptcssnode.jstwitter-bootstrapexpress

Answer №1

Every iteration, a brand new ".row" division seems to be generated by you. Rows are meant to be horizontal structures. In each row, you're generating a fresh column housing "hello world" content.

Instead of creating the row inside the loop every time, why not move it outside so that there's only one row element.

.row
  -for(var x=1; x<=imagenum-1; x++)
    .col-md-4
      h2 hello world

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

Node JS promise predicaments

I'm stuck trying to figure out why this function is returning before my message array gets updated with the necessary values. var calculateDistance = function (message, cLongitude, cLatitude, cSessionID) { return new Promise(function (resolve, re ...

javascriptnode.js

Error: The Service Fabric node.js guest application running an express.js server is encountering an EADDRIN

Uncertain whether this issue stems from Service Fabric or is related to node.js. The problem I'm facing can be found here. Upon initially deploying the node.js application, it runs smoothly. However, upon redeployment, the application fails to functi ...

node.jsexpressazure-service-fabric

What is causing the extra space on the right side of the box?

I've been struggling to align text next to an image inside a box. Desired outcome CSS: #roundedBox { border-radius: 25px; background: #363636; width: auto; height: auto; margin: 10%; display: flex; position: relative; ...

javascriptcsstextnext.jstheme-ui

What is the solution to fixing the error message "SyntaxError: missing ) after argument list" in JavaScript?

I wrote some code in HTML/JavaScript/PHP, and in the 3rd echo statement, I added a button that calls the deleteAttribute() function when clicked. However, I encountered an error at the 3rd echo statement with (type = "button"): "Uncaug ...

javascriptphphtml

Guide on passing a JSON body as a string in a PUT API request using Fetch in a React.js application

How can I pass a JSON body as a string in a FETCH PUT API in React JS? I am attempting to add 20 to the Balance like this: Balance: details[0].Balance.toString() + 20, but it is not working as expected. I want the entire result to be a string. Any assista ...

javascriptnode.jsreactjs

Tips for retrieving the 'Created' value in vue.js

I am currently trying to fetch API JSON data for a weather widget, but unfortunately it is returning null. While I am able to retrieve the JSON data successfully, I am struggling to handle this value. Below is my HTML code snippet: <html> <head& ...

javascriptjsonvue.js

The error message "gulp serve - Error: Module './build/bindings/encode.node' not found" indicates a

Seeking help to install the angular-fullstack framework on my AWS EC2 Ubuntu server. The framework can be found here. Encountering the following error after running 'gulp serve': module.js:471 throw err; Error: Cannot find module './build/ ...

node.jsubuntugulpmean-stackangular-fullstack

Independent Dropbox Collections

Query: function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var colCount = table.rows[0].cells.length; for (var i = 0; i < colCount; i++) { var ...

javascriptjqueryajax

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Is it recommended to include the size of the box-shadow in the overall dimensions of the element?

I'm aware that by default it doesn't behave this way, but I'm attempting to make it do so. I'm in the process of constructing a button-shaped anchor with a solid box-shadow (no blur) to give the appearance of depth, and upon hovering, ...

cssanchorbox-shadow

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

javascripthtmlcss

What is the best method to loop through this object with JavaScript?

Suppose I have the following data: let testData = { 'numGroup1': [[(1, 2, 3, 4, 5), (5, 6, 7, 8, 9)]], 'numGroup2': [[(10, 11, 12, 13, 14), (15, 16, 17, 18, 19)]] }; What is the best approach to iterate through this data using Jav ...

javascriptiteration

Issue with Bot framework (v4) where prompting choice in carousel using HeroCards does not progress to the next step

Implementing HeroCards along with a prompt choice in a carousel is my current challenge. The user should be able to select options displayed as HeroCards, and upon clicking the button on a card, it should move to the next waterfall function. In the bot fr ...

node.jstypescriptbotframeworkprompt

Troubleshooting the issue: AngularJS not functioning properly with radio button selection to show specific div containing input field

Looking for some help with radio buttons: I need the selection of radio buttons to display their respective input boxes. I have included a snippet of my HTML and controller code below. In my controller, I am using ng-change to call a function that uses jQu ...

javascriptjqueryangularjshtml

What is the best way to organize large amounts of data into an array?

I am currently working on developing a unique version of wordle using javascript and html. In order to do this, I require a comprehensive list of all possible wordle words stored in an array format. Although I have the words listed within a document contai ...

javascripthtmlvisual-studio-codewordle-game

Exploring Objects without the need for loops

Currently, I am focusing on optimizing the performance of the following objects: var scheduleFee = { poor = {level1:25,level2:25,level3:25} , good = {level1:15,level2:20,level3:25} , vgood = {level1:10,le ...

javascriptangularjsarrays

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

unable to install electron on ubuntu machine

After running the command 'npm install -g electron', I encountered an error in the command line: 'EACCES:permission denied, mkdir /usr/local/lib/node_modules/electron/.electron'. I attempted to resolve this by using 'chown -R root ...

node.jsnpmelectron

Encountering the error "Uncaught reference error: $ is not defined" despite ensuring that scripts are loading in the correct order. However, the scripts work from the

Encountering an Issue: "Uncaught ReferenceError: $ is not defined" Whenever I try to utilize $('#someid') in my custom JavaScript code within an Electron app. All scripts are properly arranged in my HTML file: <script type="text/javascri ...

javascriptjquerybootstrap-4electron

Guide to embedding CSS into a DOC file generated from HTML with PHP

I've created a document, but it's not linking to the external CSS file. I have added .css files in my code, but when I generate the document, it doesn't apply the CSS classes. Here is my code: <?php header("Content-type: application/vn ...

phphtmlcssdoc