I'm generating a list in eleventy/nunchucks and need to style the first and last items using tailwind. However, for some reason it's applying the style change to every item in the list.
Here's my code:
<ul role="list" class="">
{% for contact in contacts %}
<a rel="me" class="" href="{{ contact.link }}">
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</li></a>
{% endfor %}
</ul>
</div>
It is applying first:bg-red-300 and last:bg-cyan-300 to every li element because you have only one li inside the a element.
What you want to do is wrap the a inside the li element
Something like this:
<ul role="list" class="">
{% for contact in contacts %}
<li class="px-4 py-4 sm:px-6 hover:bg-orange-300 border border-gray-300 text-center bg-gray-100 first:bg-red-300 last:bg-cyan-300">
<a rel="me" class="" href="{{ contact.link }}">
{{ contact.service }}: <span class="font-semibold">{{ contact.userid }}</span>
</a>
</li>
{% endfor %}
</ul>
Related
I have these problem, I need to generate a col-md-4 from Django-Admin, the trouble is that I want to show other col-md-4 just if the previous col-md-4 get 10 items.
Please help me, is my tesis
<div class="col-lg-4">
<div class="single-price" style="border-radius: 8px;">
<ul class="price-list">
{% for doc in Documento %}
{% if 10 >= forloop.counter %}
<li class="d-flex align-items-center"><a href="{{ doc.documento.url }}" download=""
target="_blank" rel="noopener noreferrer">
<img src="{{ doc.ícono.url }}" alt="" style="width: 40px; margin-right: 10px;"> </a>
<span style="text-align: left;">{{ doc.nombre }}</span>
<!-- <a href="/static/descargables/Ctto-Marco-MAR-2022-.docx" download="true"
class="price-btn">Descargar</a> -->
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
I'm trying to make responsive blog post. Everything works fine, but I don't like the way it looks. I would like to have a solution when my blog post with image itself would be centered. On desktop version it is less visible, but on mobile device it looks ugly... I'm currently using bootstrap 4, but if you got solutions with css, I also would be really happy!
I need something like on the image:
Desktop version
Mobile version
Here is my html + bootstrap model:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
And some code from base.html block:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Sidebar</h3>
<p class='text-muted'>Explore smth new today!
<ul class="list-group article-metadata">
<li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
<li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
Finally, I solved this solution like this:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.slug %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.slug %}">Delete</a>
</div>
{% endif %}
</div>
</article>
<article class="media content-section">
<div class="media-body">
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
I have a nested loop in twig and i get the elements doubled in the form of 1,1,1,1 / 2,2,2,2 / 3,3,3,3. How can i use the first loop to access the data from the second loop without duplicating the elements ?
{% for form in forms %}
{% for question in surveyQuestions %}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(form) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ question.id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ question.id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}
{% endfor %}
Assuming my assessment above is correct: Why not do it like this?
Instead of using a foreach loop, we use a classical for loop and use the index as identifier for both, forms and surveyQuestions:
{% for i in 0..(forms|length - 1)%}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(forms[i]) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}
I am using twitter bootstrap for my website mywebsite.
I created four category blocks using col-md-3. When a block is heigher than the other, the other blocks don't dispay correctly. Here is my code:
<div class="row">
{% for category in categoriesActivities %}
<div class="col-md-3 col-sm-6">
<ul class="classifieds-category">
<li><i class="fa fa-bullhorn"></i>{{ category.name }}
<ul class="sub-category">
{% for activity in category.activities %}
<li>
{{ activity.principal }}
</li>
{% endfor %}
</ul>
</li>
</ul>
</div><!-- End grid layout -->
{% endfor %}
</div> <!-- End .row -->
Image of the blocks:
How can i fix it?
you need to add
<div class="clearfix"></div>
After the Informatiqe div.
That clears the col-- float.
I have the Following Code, am using BootStrap css
<ul>
<li>
{% if current_user.is_authenticated() %}
Hello, {{ current_user.name }}
{% endif %}
</li>
<li class="nav-collapse collapse pull-right">LogOut </li>
</ul>
I want to get the above two tags in a single line
Add the pull-right class to both.