/Javascript/Bootstrap/Dynamically fill bootstrap card

Dynamically fill bootstrap card

var container = document.querySelector(".container");
for (var i=0; i<tweets.length; i += 1) {
    var name = ' <h4 class="card-title">';
    name += tweets[i].name;
    name += '</h4> </div>';
    var tweet = '<div class="col-xs-12 col-sm-6 col-md-8 col-md-offset-3">'
    tweet += ' <div class="jumbotron">';
    tweet += '  <p  class="card-text">';
    tweet += tweets[i].tweet;
    tweet += "<br>";
    tweet += "</p></div></div>";
    var photo ='<div class="col-md-4 col-md-offset-3"><div class="col-md-4 ">' 
    photo += '  <img class="img-responsive img-circle" src="user/';
    photo += tweets[i].activation;
    photo += '/';
    photo += tweets[i].pic;
    photo += '"></div></div>';

    container.innerHTML+='<div class="card"><div class="card-header">'+
    photo+name+tweet+'</div></div>';
}


//the div in html 
<div class="container">
    <div class="card">
        <div class="card-header">    
            <div class="row">
                <div id="photo">
                    <!-- here  where the pic goes ! -->
                </div>
                <div id="name">
                    <!-- here  where the name goes ! -->
                </div>
            </div>    
            <div class="card-block row">
                <div id="tweet">
                    <!-- here  where the tweet goes ! -->
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<div class="card-block row">    
    <div id="tweet"> </div>
</div>

Source: stackoverflow.com

Similar codes

0 vote233 views1 answer
Can we put check form inside a selection tag in bootstrap 4
Javascript Bootstrap
2 votes207 views1 answer
How to add bootstrap by downloading in react js
Javascript Bootstrap
0 vote223 views1 answer
How to remove the top border from table react bootstrap
Javascript Bootstrap
0 vote222 views1 answer
Sorting disable in datatable bootstrap
Javascript Bootstrap
105 votes359 views3 answers
React bootstrap do you need to import
Javascript Bootstrap
-2 votes219 views2 answers
How will it look when there is a container inside a a row bootstrap
Javascript Bootstrap
2 votes224 views1 answer
Size carousel bootstrap 4
CSS Bootstrap
64 votes392 views4 answers
Bootstrap buttons
CSS Bootstrap
0 vote282 views2 answers
./node_modules/bootstrap/dist/js/bootstrap.bundle.js
Javascript Bootstrap
0 vote252 views1 answer
How to style navbar-toggler-icon bootstrap 5
CSS Bootstrap