I have a small problem of CSS and I do not understand where it can come ... I would like to display 3 images per lines under which I can come out of my info base. But nothing goes as planned. Could someone unblock me? I do not know where I made my mistake.
My code :
{% extends 'index.html.twig' %}
{% block body %}
<div id="startchange">
<div class="portfolio-item">
<section id="objets">
<div class ="title">
<p class="titre">List client</p>
</div>
<div class="row">
{% for client in clients%}
<div class="col-xs-4 col-sm-3 col-md-3">
<img class="img-responsive img-circle" src="img/logos/mario.png">
<div class="description">
<p class="nom"> Surname : </p>
<p class="type"> {{client.surname}}</p>
<p class="nom"> First name : </p>
<p class="type"> {{client.firstname}}</p>
</div>
</div>
{%endfor%}
</div>
</section>
</div>
</div>
{% endblock %}
The view with 4 objects :
List of 4 objects
The view with 0 object : 0 object
It seems that all the objects go in the same square of the line and not in 4 different boxes I do not understand why ... An idea?
Related
I want to use bootstrap to make a carousel using D.R.Y. methods. my idea (and it may not even be feasible) is to have a list or dictionary and cycle through image locations. Here's what I've written so far.
<div class="carousel-inner">
{% with images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg'] %}
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
{% endwith %}```
Try passing the list from the backend like this -
Views.py The function from where you are rendering your template
def index(request): # Change the name of the function as per your requirements
context = {
"images": ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
}
return render(request, "index.html", context) # Change the path of the template as per your requirements
Now images is a variable with the value of a list containing path of different images which you can use in your template
Now your .html file will look like this -
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({%static {image}%})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
</div>
Pass the images as context from your view
def your_view(request):
images = ['gyro.jpeg', 'pizza.jpeg', 'soup.jpeg', 'brocpizza.jpeg' ,'dessert.jpeg']
return render(request, "your-file.html", {images: images})
Now in your HTML you will have access to your list, so you can do something like so:
<div class="carousel-inner">
{% for image in images %}
<div class="carousel-item active" data-bs-interval="10000" style="background-image:url({% static image %})">
<div class='container'>
<section class='time'>
<h3><strong>HOURS</strong></h3>
<h3><strong>Monday - Saturday</strong></h3>
<h3><strong>11 a.m. - 9 p.m.</strong></h3>
</section>
<div class='headline'>
<h1>Title</h1>
<h2>Menu</h2>
</div>
<section class='address'>
<h3> <strong>NAME</strong> </h3>
<h4>Phone</h4>
<h4>Address</h4>
<h4>City</h4>
</section>
</div>
</div>
{% endfor %}
I was making a layout to view all of the bootstrap cards in a nice clean layout, but this is quite bugging me, I dont know why this is happening. It looks all fine with all of the column filled, and even if the column only has 1 card it looks all fine but if it reaches 2 cards, its starts to look weird like this: (Notice the diffrence between the 3rd and 2nd image)
I don't like how the layout looks when there are two cards in the column, any idea on how to fix it? Heres my current code: (It is in Jinja2 but it doesn't matter too much, I am just looping over all the posts, and displaying content from the backend to the frontend)
<div class="container" style="margin-top: 100px;">
<div class="row">
{% for clip in clips %}
<div class="col">
<div class="card" style="width: 32rem;">
<div class="card-body">
<h5 class="card-title">{{ clip.title }}</h5>
<h6 class="card-subtitle mb-2 text-muted">
<img src="{{ url_for('static', filename='images/profile-pictures/' ~ clip.user.picture) }}", height="32" width="32" style="border-radius: 50%;">
{{ clip.user.username }}
</h6>
<p class="card-text" style="margin-top: 15px;">
{{ clip.description }}
</p>
{% if clip.clip_id % 2 == 0 %}
<button class="btn-hover color-2">PLAY</button>
{% else %}
<button class="btn-hover color-1">PLAY</button>
{% endif %}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
& The CSS:
.card-body {
padding: 25px;
}
.card {
margin-bottom: 50px;
}
I guess you want a maxmium of 3 cards in a row? Try use col-4 instead of col.
Source: https://getbootstrap.com/docs/4.6/layout/grid/#auto-layout-columns
If you want the cols to be in center, then use this:
<div class="col d-flex justify-content-center align-items-center">
I am using the code in my index.html file.
{% for post in blog_posts.items %}
<div class="col-sm-6">
<div class="card" >
<div class="card-body">
<h2><a class="card-title" href=" {{ url_for('blog_posts.blog_post', blog_post_id=post.id) }}">{{ post.title }}</a></h2>
Written By: {{ post.author.username }}
<p>Published on: {{ post.date.strftime('%Y-%m-%d') }}</p>
<p class="card-text">{{ post.text[:100] }}...</p>
Read Blog Post
</div>
</div>
</div>
{% endfor %}
My understanding from bootstrap is that it would create a 6 column grid, however it is just stacking one card below the next. I am sure it is something I am missing. Thank you for your help.
You probably need to use a card deck or card group to achieve this:
I'd lose this div:
<div class="col-sm-6">
Then put the for loop within a card-group div:
<div class='card-group'>
{% for post in blog_posts.items %}
<div class="card" >
<div class="card-body">
...
</div>
</div>
{% endfor %}
</div>
If you want some spacing between the cards, you can change the class of the outer div to card-deck.
See the Card docs for more options.
.col-sm-6{ display: flex } add this css property to the parent that contains all cards.
alternatively you can use floats .col-sm-6 > .card{ float: left}
I am trying to make a gallery of images of unknown number using HTML. I am using bootstrap to display the images and have some django template library coding. I am not able to align the images correctly. I am basically trying to use cycle tag in Django Template to display the row class in bootstrap after every 2 images. I want the images to appear in a row, each row with two images. The height of each image in the row should be aligned correctly. Right now the height is not aligned. One image is slightly higher than the other. Can you please help, this is my html file?
<div class="container">
{% load staticfiles %}
{% for plot in plots%}
{% with plot|add:".png" as image_static %}`
<div class = "{% cycle 'row' '' %}">
<div class = "col-md-5">
<div class = "thumbnail">
<img src="{% static image_static %}" alt="My image"/>
</div>
<div class = "caption">
<h3>Thumbnail label</h3>
<p>Some sample text. Some sample text.</p>
<p>
<a href = "#" class = "btn btn-primary" role = "button">
Button
</a>
<a href = "#" class = "btn btn-default" role = "button">
Button
</a>
</p>
</div>
</div>
{% endwith %}
<br><br><br>
</div>
{% endfor %}
</div>
It cannot be done with cycle! Here's how it could be done instead:
{% for plot in plots%}
{% with plot|add:".png" as image_static %}
<div class='col-md-6'>
<div class = "thumbnail">
<img src="{% static image_static %}" alt="My image"/>
</div>
<!-- ... -->
</div>
{% if forloop.counter|divisibleby:"2" %}
</div>
<div class='row'>
{% endif %}
{% endwith %}
{% endfor %}
So, we close the row div and start a new one whenever the forloop index is divisible by 2, so we'll start a new row every two images!
I am designing a blog by modifying an existing Jekyll theme where the header containing the title is one colour and the rest of the page another. I would like to insert a number of round icons (social networks etc.) in a line that are indented into the header. I feel it is easier to explain this with a picture:
where the blue dots are round icons or buttons. How can I achieve this in HTML/CSS?
EDIT:
AwokeKnowing gave me some tools to do what I want but they move when I resize my window.
This is what my page looks like on my 13" laptop screen:
but when I resize it on my 23" monitor I get:
I want it to look like my first image. This is my code:
HTML
<div>
<div class="s d"> <a href="mailto:?Subject=Mindfield-{{ page.title }}&Body={{ page.url }}">
<img src="/assets/images/mail-icon.svg" alt="Email" width=40px/>
</a></div>
<div class="s e"><a href="https://www.facebook.com/sharer/sharer.php?u={{site.domain_name}}{{page.url}}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<img src="/assets/images/Facebook-icon.svg" alt="Facebook" width=40px/></div>
<div class="s f"><a href="http://twitter.com/share?text={{page.title}}&url={{site.domain_name}}{{ page.url }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<img src="/assets/images/Twitter-icon.svg" alt="Twitter" width=40px/></div>
</div>
CSS
.s{position:absolute;top:216px;border-radius:50%;background:white;width:45px;height:45px;text-align:center;color:white}
.d{left:1200px}
.e{left:1255px}
.f{left:1310px}
here's something to get you started
.t{padding:20px;background:teal}
.con{position:relative;background:beige}
.c1{padding:20px}
.sc{position:relative;float:right;width:250px;}
.s{position:absolute;top:-10px;left:10px;border-radius:50%;background:blue;width:20px;height:20px;text-align:center;color:white}
.a{left:10px}
.b{left:40px}
.c{left:70px}
.d{left:100px}
.e{left:130px}
.f{left:160px}
<div class="t">Title</div>
<div class="con">
<div class="sc">
<div class="s a">S</div>
<div class="s b">O</div>
<div class="s c">C</div>
<div class="s d">I</div>
<div class="s e">A</div>
<div class="s f">L</div>
</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
<div class="c1">Content</div>
</div>