Ggtcf

90's TV series where a boy goes to another dimension through portal near power lines

Blender 2.8 I can't see vertices, edges or faces in edit mode

What is going on with Captain Marvel's blood colour?

How to model explosives?

Is it canonical bit space?

How can I tell someone that I want to be his or her friend?

Facing a paradox: Earnshaw's theorem in one dimension

What's the difference between 'rename' and 'mv'?

Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?

Is it unprofessional to ask if a job posting on GlassDoor is real?

Emailing HOD to enhance faculty application

Arrow those variables!

Why is it a bad idea to hire a hitman to eliminate most corrupt politicians?

Theorems that impeded progress

Infinite Abelian subgroup of infinite non Abelian group example

How can saying a song's name be a copyright violation?

Memorizing the Keyboard

Is there a hemisphere-neutral way of specifying a season?

What is the word for reserving something for yourself before others do?

Why are electrically insulating heatsinks so rare? Is it just cost?

Should I tell management that I intend to leave due to bad software development practices?

Combinations of multiple lists

Is the Joker left-handed?

How to draw the figure with four pentagons?

Creating Bootstrap grid dynamically

Create GUID / UUID in JavaScript?How can I merge properties of two JavaScript objects dynamically?Event binding on dynamically created elements?Creating multiline strings in JavaScriptCreating a div element in jQueryWhat is JSONP, and why was it created?Change navbar color in Twitter BootstrapDynamically create rows with for loop in Bootstrap / HTMLadd images in bootstrap grid of rows and columns dynamically using jquery?Bootstrap stacking inputs on div resize

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

2

I am trying to use a JavaScript function to generate bootstrap columns dynamically. The goal is to have them displayed in a single row as different columns.

Currently this is how it looks like:

I am calling this function on window.onload() with the div id:

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId)
 let containerHead = document.getElementById(containerId);
 // Take the row headings and make an HTML container out of them
 let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
 let tblHeadRow = document.createElement("div");
 tblHeadRow.classname="row";
 for (let heading of tblRowHeadings)
 let tblHeadCell = document.createElement("div");
 tblHeadCell.className="col";
 let cellText = document.createTextNode(heading);
 tblHeadCell.appendChild(cellText);
 tblHeadRow.appendChild(tblHeadCell);
 
 containerHead.appendChild(tblHeadRow);

and the HTML component is just:

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

What do you think might be the problem?

javascript bootstrap-4

share|improve this question

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi Swopnil, if you found that my answer answered your question please upvote and/or accept it. If you still have outstanding questions please let me know and I'd be glad to help out where I can!
  
  – domdambrogia
  Mar 9 at 1:04
  

  
  
  
  

add a comment | 

2

I am trying to use a JavaScript function to generate bootstrap columns dynamically. The goal is to have them displayed in a single row as different columns.

Currently this is how it looks like:

I am calling this function on window.onload() with the div id:

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId)
 let containerHead = document.getElementById(containerId);
 // Take the row headings and make an HTML container out of them
 let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
 let tblHeadRow = document.createElement("div");
 tblHeadRow.classname="row";
 for (let heading of tblRowHeadings)
 let tblHeadCell = document.createElement("div");
 tblHeadCell.className="col";
 let cellText = document.createTextNode(heading);
 tblHeadCell.appendChild(cellText);
 tblHeadRow.appendChild(tblHeadCell);
 
 containerHead.appendChild(tblHeadRow);

and the HTML component is just:

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

What do you think might be the problem?

javascript bootstrap-4

share|improve this question

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hi Swopnil, if you found that my answer answered your question please upvote and/or accept it. If you still have outstanding questions please let me know and I'd be glad to help out where I can!
  
  – domdambrogia
  Mar 9 at 1:04
  

  
  
  
  

add a comment | 

I am trying to use a JavaScript function to generate bootstrap columns dynamically. The goal is to have them displayed in a single row as different columns.

Currently this is how it looks like:

I am calling this function on window.onload() with the div id:

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId)
 let containerHead = document.getElementById(containerId);
 // Take the row headings and make an HTML container out of them
 let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
 let tblHeadRow = document.createElement("div");
 tblHeadRow.classname="row";
 for (let heading of tblRowHeadings)
 let tblHeadCell = document.createElement("div");
 tblHeadCell.className="col";
 let cellText = document.createTextNode(heading);
 tblHeadCell.appendChild(cellText);
 tblHeadRow.appendChild(tblHeadCell);
 
 containerHead.appendChild(tblHeadRow);

and the HTML component is just:

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

What do you think might be the problem?

javascript bootstrap-4

share|improve this question

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId)
 let containerHead = document.getElementById(containerId);
 // Take the row headings and make an HTML container out of them
 let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
 let tblHeadRow = document.createElement("div");
 tblHeadRow.classname="row";
 for (let heading of tblRowHeadings)
 let tblHeadCell = document.createElement("div");
 tblHeadCell.className="col";
 let cellText = document.createTextNode(heading);
 tblHeadCell.appendChild(cellText);
 tblHeadRow.appendChild(tblHeadCell);
 
 containerHead.appendChild(tblHeadRow);

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

share|improve this question

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

share|improve this question

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

edited Mar 9 at 1:57

domdambrogia

8111022

edited Mar 9 at 1:57

domdambrogia

8111022

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

asked Mar 8 at 23:47

Swopnil ShresthaSwopnil Shrestha

565

2 Answers
2

active

oldest

votes

2

just a spello .. well case sensitive one:

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

share|improve this answer

answered Mar 9 at 2:07

David BrayDavid Bray

42029

add a comment | 

1

You're not setting the tblHeadRow class correctly.

You need to use element.classList.add(className) method. (docs)

If you use this instead you will have columns:

tblHeadRow.classList.add("row");

Here is a fiddle for reference.

---

However, I would really recommend using a table in this situation. If you're creating a tbl, head and cell it seems like a table is what you're after and bootstrap has helper classes for those as well.

share|improve this answer

edited Mar 9 at 1:35

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55072541%2fcreating-bootstrap-grid-dynamically%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

just a spello .. well case sensitive one:

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

share|improve this answer

answered Mar 9 at 2:07

David BrayDavid Bray

42029

add a comment | 

2

just a spello .. well case sensitive one:

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

share|improve this answer

answered Mar 9 at 2:07

David BrayDavid Bray

42029

add a comment | 

just a spello .. well case sensitive one:

tblHeadRow.classname="row";

should be:

tblHeadRow.className="row";

share|improve this answer

answered Mar 9 at 2:07

David BrayDavid Bray

42029

tblHeadRow.classname="row";

tblHeadRow.className="row";

share|improve this answer

answered Mar 9 at 2:07

David BrayDavid Bray

42029

answered Mar 9 at 2:07

David BrayDavid Bray

42029

answered Mar 9 at 2:07

David BrayDavid Bray

42029

1

You're not setting the tblHeadRow class correctly.

You need to use element.classList.add(className) method. (docs)

If you use this instead you will have columns:

tblHeadRow.classList.add("row");

Here is a fiddle for reference.

---

However, I would really recommend using a table in this situation. If you're creating a tbl, head and cell it seems like a table is what you're after and bootstrap has helper classes for those as well.

share|improve this answer

edited Mar 9 at 1:35

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

add a comment | 

1

You're not setting the tblHeadRow class correctly.

You need to use element.classList.add(className) method. (docs)

If you use this instead you will have columns:

tblHeadRow.classList.add("row");

Here is a fiddle for reference.

---

However, I would really recommend using a table in this situation. If you're creating a tbl, head and cell it seems like a table is what you're after and bootstrap has helper classes for those as well.

share|improve this answer

edited Mar 9 at 1:35

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

add a comment | 

You're not setting the tblHeadRow class correctly.

You need to use element.classList.add(className) method. (docs)

If you use this instead you will have columns:

tblHeadRow.classList.add("row");

Here is a fiddle for reference.

---

However, I would really recommend using a table in this situation. If you're creating a tbl, head and cell it seems like a table is what you're after and bootstrap has helper classes for those as well.

share|improve this answer

edited Mar 9 at 1:35

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

tblHeadRow.classList.add("row");

share|improve this answer

edited Mar 9 at 1:35

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022

answered Mar 9 at 0:03

domdambrogiadomdambrogia

8111022