CODEWITHSUNDEEP
htmlcsstwitter-bootstrapgrid
bobbyrne01
bobbyrne01

Reputation: 6745

Displaying 3 columns of data using bootstrap? Data shows as a row instead

Why are the class="col" classes not causing the data to show as a row containing 3 columns?

https://jsfiddle.net/bobbyrne01/b63g4kpe/1/

Html:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
<div id="results"></div>

Js:

document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
for (var i = 0; i < 3; i++) {
  document.getElementById('results').innerHTML += '<div class="col">';
  document.getElementById('results').innerHTML += i + ' Col';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';

Upvotes: 1

Views: 1163

Answers (3)

neophyte
neophyte

Reputation: 6626

Your js is not rendering properly as mentioned by others. I have shown a way to achieve this in the following example. Here I have created divs and appended them as children one after another.

Example Snippet

$(document).ready(function() {
  var res = document.getElementById('results');
  var con = document.createElement('div');
  con.className = 'container-fluid';
  var newdiv = document.createElement('div');
  newdiv.className = 'row';
  res.appendChild(con);
  con.appendChild(newdiv);

  for (var i = 0; i < 3; i++) {
    var con1 = document.createElement('div');
    con1.className = 'col-md-4 col-xs-4';
    newdiv.appendChild(con1);

    var text = document.createTextNode(i + ' Col');
    con1.appendChild(text);
  }
  document.getElementById('results').innerHTML += 'After container';
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div id="results">
</div>

Upvotes: 1

ridoansaleh
ridoansaleh

Reputation: 624

You forgot to include the GRID column correctly. You wrote <div class="col">. You should write class like col-lg-* or col-md-* or col-sm* inside div tag. Replace these * with number from 1-12. Hope this answer your question and i have provided you the code below. 

document.getElementById('results').innerHTML += '<div class="container">';
document.getElementById('results').innerHTML += '<div class="row">';
document.getElementById('results').innerHTML += '<div class="col-xs-12 col-lg-12">';
for (var i = 0; i < 3; i++) {
  document.getElementById('results').innerHTML += '<div class="col-xs-4 col-lg-4"> Column ' + (i + 1) + '</div>';
}
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div>';
document.getElementById('results').innerHTML += '</div><br/>';
document.getElementById('results').innerHTML += 'After container';
<head>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<head>
<body>
   <div id="results"></div>
</body>

Upvotes: 0

mayersdesign
mayersdesign

Reputation: 5310

Because the syntax is (for example) col-md-4 also you are closing your row div too early. UPDATE: In fact it's somewhat worse than that, your output renders as:

<div id="results">
  <div class="container">
  </div>
  <div class="row"></div>
  <div class="col"></div>0 Col
  <div class="col"></div>1 Col
  <div class="col"></div>2 Col<br>
  After container
  </div>

Upvotes: 0

Related Questions