How do I display the articles in 2 or 3 rows in a page?

Question

I've been making the blog with python,flask,sqlalchemy,html.

And now I can display the articles in the page. But I'm only able to display it in 1 row like below one with the codes below.By the way,somehow I can't use css file.

*article1

*article2

*article3

*article4

And the thing which I want to do is like below one.

*article1 *article3

*article2 *article4

{% extends "copy.html" %}
{% block body %}
{%for article in articles%}
<li>{{article.title}}
<a href="{{url_for('show_article',id=article.id)}}">Details</a>
</li>
{%else%}
None articles
{%endfor%}
{%endblock%}

How do I implement it?.

Possible duplicate of [How to display an unordered list in two columns?](https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns) — fractals, Oct 20 '19 at 04:14
That article didn't help me.But thanks for posting the link. — , Oct 20 '19 at 05:33

PythonProgrammi · Accepted Answer · 2019-10-20T05:58:46.983

take a look at my posts here posts about flask and to the structure of my app in flask on pil.glitch.me or flask site if you want to get an idea... You should create two columns in the html file and in the ptyhon file you should separate the odd from the even posts in different lists. P.S.: I do not know if you want to put the odd posts in a column and the even in the other or you want to put first half on the left column and the other half on the other. In the second case you just want to do two lists with post1 = posts[:int(len(posts)/2)] and then post2 = posts[len(post1):].

@app.route("/")
def home():
    posts = [
        {"title" : "post1.",},
        {"title" : "post2.",},
        {"title" : "post3.",},
        {"title" : "post4.",},]

post1 = [x for x in posts if x % 2 == 0]
post2 = [x for x in posts if x % 2 != 0]

return render_template("info.html", post1 = post1, post2=post2)

and then send them to the html file with something like:

{% extends 'template.html' %}
{% block page %}
<div class="container">
   {% for post in posts %} <!-- iterate all posts keys/values -->
      <div class="row">
         <div class="col-md-6"> <h3>{{ post1.title }}</h3> </div>
         <div class="col-md-6"> <h3>{{ post2.title}}</h3> </div>
      </div>
  {% endfor %}
</div>  
{% endblock %}

To use bootstrap copy this code in the template:

        <link href="https://fonts.googleapis.com/css?family=Literata&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

I got the progress and approached little to the goal. – Oct 20 '19 at 13:44 — , Oct 20 '19 at 13:44

How do I display the articles in 2 or 3 rows in a page?

1 Answers1