Question 46146 in CSS Question posted in
Some basic documentation can be found here.

How to align text or url in Django template? – Python Crash Course, Project "Learning Log" – CSS

I am creating "Learning Log" Django web-application using "Python Crash Course, 2nd edition" book.
But since I reached 20th chapter of the book, I started having problems.

I created a template, that displays all entries of the particular topic.
On the page we have entry title, date, a button to edit it, and of course its text.
Following the book, I use bootstrap4 to make pages looks more beautiful.

But I would like to align the entry date and the "edit entry" url to the right side.

I tried style="text-align:right;" , but it doesn’t work.

I am really new to web development , so I beg you to not judge me strictly 🙂

Page with topic and its entries

topic.html

{% extends 'learning_logs/base.html' %}

{% block page_header %}
<h3>{{ topic }}</h3>
{% endblock page_header %}

{% block content %}
    <p>
        <a href="{% url 'learning_logs:new_entry' topic.id %}">Add a new entry</a>
    </p>

    {% for entry in entries %}
        <div class="card mb-3">
            <h4 class="card-header">
                {{ entry.title }} 
                <small style="text-align:right;">
                    {{ entry.date_added|date:'M d, Y'}}
                    <a style="text-align:right;" href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
                </small>
            </h4>
            <div class ="card-body">
                {% if entry.text|length > 500 %}
                    {{ entry.text|linebreaks|truncatechars:500 }}
                    <p><a href="{% url 'learning_logs:entry' entry.id %}">Read more</a></p>
                {% else %}
                    {{ entry.text|linebreaks }}
                {% endif %}
            </div>
        </div>
    {% empty %}
            <p>There are no entries for this topic yet.</p>
    {% endfor %}

{% endblock content %}

I tried style="text-align:right;" , but it doesn’t work.

I would like to align the entry date and the "edit entry" url to the right side.

Tags:

2

Answers


  1. 0

    Try to wrap the date and link elements in a div element with a class name like details_of_entry, like so:

    <div class="card-header">
    {{ entry.title }}
    <div class="details_of_entry">
        <small>
            {{ entry.date_added|date:'M d, Y'}}
            <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
        </small>
    </div>
</div>

    Then add the following CSS:

    .details_of_entry {
    text-align: right;
}

.details_of_entry a {
    margin-left: 14px; /* adjust according to your need */
}
    Login or Signup to reply.
  2. 0

    You can wrap the small tag with a div tag and add inline CSS style float:right.

            {% for entry in entries %}
        <div class="card mb-3">
            <h4 class="card-header">
                {{ entry.title }} 
                <div style="float: right;">
                    <small>{{ entry.date_added|date:'M d, Y'}}</small>
                    <a href="{% url 'learning_logs:edit_entry' entry.id %}">edit entry</a>
                </div>
            </h4>
            <div class ="card-body">
                {% if entry.text|length > 500 %}
                    {{ entry.text|linebreaks|truncatechars:500 }}
                    <p><a href="{% url 'learning_logs:entry' entry.id %}">Read more</a></p>
                {% else %}
                    {{ entry.text|linebreaks }}
                {% endif %}
            </div>
        </div>
{% endfor %}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search