Mixing
Flask, Bootstrap Cards, and Jinja Templating
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I would like for my Bootstrap Cards to display horizontally instead of vertically but I am finding that I must declare a new "col-sm-4" each time I want the next card to show horizontally. The problem with this is if I try and do this inside the Jinja "for" loop it just repeats the same card. Is there a way to iterate through the data like a "while" loop but for Jinja?
Here is the relevant Python code:
From "feeds.py" using feedparser package:
def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc
And here is the relevant Flask code for this from "views.py"
@app.route("/")
def index():
articles_bbc = get_news("bbc")
articles_cnn = get_news("cnn")
articles_google = get_news("google")
return render_template('index.html', articles_bbc=articles_bbc[:3])
And last the relevant html-bootstrap and Jinja2 code:
<div class = "row" style="background-color: lightgray;">
<div class = "col-sm-4">
<h5>Headlines from the BBC</h5>
{% for article_bbc in articles_bbc %}
<div class="card" style="width:200px;float:left;">
<div class="card-body" style="background-color:lightcyan;">
{% if article_bbc.image %}
<img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
{% endif %}
<h5 class="card-title">{{article_bbc.title}}</h5>
<p class="card-text">{{article_bbc.summary}}</p>
<p>{{article_bbc.published}}</p>
<a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
</div>
</div>
{% endfor %}
</div>
</div>
python flask bootstrap-4 jinja2
asked Jan 3 at 3:04
ObieObie
587
add a comment |
I would like for my Bootstrap Cards to display horizontally instead of vertically but I am finding that I must declare a new "col-sm-4" each time I want the next card to show horizontally. The problem with this is if I try and do this inside the Jinja "for" loop it just repeats the same card. Is there a way to iterate through the data like a "while" loop but for Jinja?
Here is the relevant Python code:
From "feeds.py" using feedparser package:
def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc
And here is the relevant Flask code for this from "views.py"
@app.route("/")
def index():
articles_bbc = get_news("bbc")
articles_cnn = get_news("cnn")
articles_google = get_news("google")
return render_template('index.html', articles_bbc=articles_bbc[:3])
And last the relevant html-bootstrap and Jinja2 code:
<div class = "row" style="background-color: lightgray;">
<div class = "col-sm-4">
<h5>Headlines from the BBC</h5>
{% for article_bbc in articles_bbc %}
<div class="card" style="width:200px;float:left;">
<div class="card-body" style="background-color:lightcyan;">
{% if article_bbc.image %}
<img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
{% endif %}
<h5 class="card-title">{{article_bbc.title}}</h5>
<p class="card-text">{{article_bbc.summary}}</p>
<p>{{article_bbc.published}}</p>
<a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
</div>
</div>
{% endfor %}
</div>
</div>
python flask bootstrap-4 jinja2
asked Jan 3 at 3:04
ObieObie
587
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29
add a comment |
I would like for my Bootstrap Cards to display horizontally instead of vertically but I am finding that I must declare a new "col-sm-4" each time I want the next card to show horizontally. The problem with this is if I try and do this inside the Jinja "for" loop it just repeats the same card. Is there a way to iterate through the data like a "while" loop but for Jinja?
Here is the relevant Python code:
From "feeds.py" using feedparser package:
def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc
And here is the relevant Flask code for this from "views.py"
@app.route("/")
def index():
articles_bbc = get_news("bbc")
articles_cnn = get_news("cnn")
articles_google = get_news("google")
return render_template('index.html', articles_bbc=articles_bbc[:3])
And last the relevant html-bootstrap and Jinja2 code:
<div class = "row" style="background-color: lightgray;">
<div class = "col-sm-4">
<h5>Headlines from the BBC</h5>
{% for article_bbc in articles_bbc %}
<div class="card" style="width:200px;float:left;">
<div class="card-body" style="background-color:lightcyan;">
{% if article_bbc.image %}
<img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
{% endif %}
<h5 class="card-title">{{article_bbc.title}}</h5>
<p class="card-text">{{article_bbc.summary}}</p>
<p>{{article_bbc.published}}</p>
<a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
</div>
</div>
{% endfor %}
</div>
</div>
python flask bootstrap-4 jinja2
asked Jan 3 at 3:04
ObieObie
587
I would like for my Bootstrap Cards to display horizontally instead of vertically but I am finding that I must declare a new "col-sm-4" each time I want the next card to show horizontally. The problem with this is if I try and do this inside the Jinja "for" loop it just repeats the same card. Is there a way to iterate through the data like a "while" loop but for Jinja?
Here is the relevant Python code:
From "feeds.py" using feedparser package:
def get_news(publication="bbc"):
feed = feedparser.parse(RSS_FEEDS[publication])
articles_bbc = feed['entries']
return articles_bbc
And here is the relevant Flask code for this from "views.py"
@app.route("/")
def index():
articles_bbc = get_news("bbc")
articles_cnn = get_news("cnn")
articles_google = get_news("google")
return render_template('index.html', articles_bbc=articles_bbc[:3])
And last the relevant html-bootstrap and Jinja2 code:
<div class = "row" style="background-color: lightgray;">
<div class = "col-sm-4">
<h5>Headlines from the BBC</h5>
{% for article_bbc in articles_bbc %}
<div class="card" style="width:200px;float:left;">
<div class="card-body" style="background-color:lightcyan;">
{% if article_bbc.image %}
<img class="card-img-top" src="{{ article_bbc.image }}" alt="Card image cap">
{% endif %}
<h5 class="card-title">{{article_bbc.title}}</h5>
<p class="card-text">{{article_bbc.summary}}</p>
<p>{{article_bbc.published}}</p>
<a href="{{ article_bbc.link }}" class="btn btn-primary">Click for full article</a>
</div>
</div>
{% endfor %}
</div>
</div>
python flask bootstrap-4 jinja2
python flask bootstrap-4 jinja2
asked Jan 3 at 3:04
ObieObie
587
asked Jan 3 at 3:04
ObieObie
587
edited Jan 3 at 3:16
Obie
asked Jan 3 at 3:04
ObieObie
587
asked Jan 3 at 3:04
ObieObie
587
asked Jan 3 at 3:04
ObieObie
587
587
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29
add a comment |
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29
add a comment |
1 Answer
1
active
oldest
votes
Figured it out. Proper placement of the "for" loop ahead of the "col-sm-4" corrected it!
answered Jan 3 at 5:17
ObieObie
587
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015800%2fflask-bootstrap-cards-and-jinja-templating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Figured it out. Proper placement of the "for" loop ahead of the "col-sm-4" corrected it!
answered Jan 3 at 5:17
ObieObie
587
add a comment |
Figured it out. Proper placement of the "for" loop ahead of the "col-sm-4" corrected it!
answered Jan 3 at 5:17
ObieObie
587
add a comment |
Figured it out. Proper placement of the "for" loop ahead of the "col-sm-4" corrected it!
answered Jan 3 at 5:17
ObieObie
587
Figured it out. Proper placement of the "for" loop ahead of the "col-sm-4" corrected it!
answered Jan 3 at 5:17
ObieObie
587
answered Jan 3 at 5:17
ObieObie
587
answered Jan 3 at 5:17
ObieObie
587
answered Jan 3 at 5:17
ObieObie
587
587
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54015800%2fflask-bootstrap-cards-and-jinja-templating%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
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
Required, but never shown
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
Required, but never shown
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
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Can you add some screenshots on how it's coming now and how you'd like it to be?
– najeem
Jan 3 at 3:29