So, i have a for loop of items in flask and i'm trying to find a way to position them on the page.I have a forloop of tasks in bootstrap cards. When the user creates a card the card gets really goofy and the positioning gets really weird.
Screenshot:https://ibb.co/hRjCrFf(teachers home work one and new task)
HTML:
{% for taskname in tasknames %}
<div class="card" style="width: 400px; border-radius: 23px; background-color: rgb(35, 33, 33); color: white;">
<h5 class="card-header border-bottom border-light" style="color: white" >{{ taskname[0] }}</h5>
<div class="card-body" style="color: white" >
<h5 class="card-title">{{ taskname[1] }}</h5>
<p class="card-text">{{ taskname[2] }} </p>
Learn More
</div>
</div>
{% endfor %}
I tried using usual css and the position style. I expected it to position nicely, but i learned that if i position multiple items in a for loop at the same area it will be at the same spot as the others.
Can anyone help with this problem?
Note: I want them to position horizontially.
You should add a vertical gutter for that spacing between columns in different rows: gy-*
<div class="row row-cols-auto gy-3"> <!-- Added: gy-3 -->
... columns
</div>
Related
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Gallery</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<style>
.image-thumbnail {
height: 200px;
object-fit: cover;
}
.container {
margin-left: 1;
}
.h1 {
text-align: center;
}
.list-group-item a {
text-decoration: none;
color: black;
}
</style>
</head>
<h1 class="text-center m-5 p-3 mb-2 bg-light text-secondary">CHARLIES LIFE</h1>
<body class="m-5">
<div class="container">
<div class="row">
<div class="col-md-3 mt-2">
<div class="card">
<div class="card-header">
Categories
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
All
</li>
{% for category in categories %}
<li class="list-group-item">
<a href="{% url 'gallery' %}?category={{category.name}}">{{category.name}}
</a>
</li>
{% endfor %}
Add Photo
</ul>
</div>
</div>
<div class=" col-md-9">
<div class="row">
{% for photo in photos %}
<div class="col-md-4">
<div class="card my-2">
<img class="image-thumbnail" src="{{photo.image.url}}" class="card-img-cap"
alt="...">
<div class="card-body">
<p class="card-text text-center">{{photo.category.name}}</p>
</div>
<div class="d-grid gap-2">
<a href="{% url 'photo' photo.id %}" class="btn btn-dark m-1"
type="button">View</a>
</div>
</div>
</div>
{% empty %}
<h3> No Photos...</h3>
{% endfor %}
</body>
</html>
Hi, I'm currently trying to make a photo blog to record the life of my son with photos as he grows. The above is my code for the "home" page (name as gallery).
So at the moment I have a for loop which adds a "card" class to my gallery page every time I upload an image.
Ideally I'd like to make it so it only showed each category I create with only one picture from that category rather than showing every picture I upload to the website. I just didn't think a head on how many photos I would upload and the home page will just turn into a HUGE photo dump.
If any one has any ideas how I could accomplish this or any other recommendations it would be greatly appreciated.
TYIA
Correct me if i'm wrong, but what i think you're trying to accomplish is to have different section i.e. 'young', 'teenager', 'adult' or something like that, and only show images in those sections with the section name as a tag in the image itself? If that is the case, you can do something like this:
{% for photo in photos %}
{% if photo.tag == young %}
<h1>Show young images here</h1>
{% elif photo.tag == teenager %}
<h1>Show teenage images here</h1>
{% elif photo.tag == adult %}
<h1>Show adult images here</h1>
{% else %}
<h1>No photo's yet</h1>
{% endif %}
{% endfor %}
alternatively, you can do this in your views and serve different images to different templates if you wish to do so.
It would look something like this:
def teenageImages(request):
teenageImage = Image.objects.raw("SELECT * FROM
photos WHERE tag = 'teenager' ")
template = loader.get_template('teenager_photos.html')
context = {
'photos': teenageImage
}
return HttpResponse(template.render(context, request))
You can also go a different route and use filter, more information on filter can be found here.
EDIT for bootstrap cards
Here is an example Github Repo on bootstrap cards with image (without a link) my webpage repo
You can clone this repo and look around in it, that way maybe you can get some inspiration / ideas on how to do certain things.
Alternatively, you can use something like Wagtail for this, I have also made a Github repo regarding that, which can be found here
I suggest that you look at the RoutablePageMixin of the Wagtail CMS (Django based), see documentation here. With it you could make your home page accept the category as a variable like the following URL is representing: davidsonsblog.com/category/foobar
Than you could define a queryset filtered by category and ordered randomly (e.g. by the queryset method .order_by('?')). If you only want to show one image of it, add the .first() method to the queryset.
The menu would generate the links accordingly.
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 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?
Let me preface by saying I do not know front-end development whatsoever. I've been trying to center this form for what feels like forever, but nothing is working. I'm using Flask Bootstrap and WTForms. Here's the code I have below:
HTML
{% block content %}
<body>
<div class="container center_div" align=middle>
<h2>Indie/Alternative Artist Recommendation</h2>
<p>Enter 5 artists below and we will provide similar artists you may like</p>
<br/>
<form method="Post" action="/results">
<div class="col-xs-4" align=middle>
{{ form.artist1.label(class="col-md-6 col-sm-12") }}
{{ form.artist1(class="form-control") }}
{{ form.artist2.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist2(class="form-control") }}
{{ form.artist3.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist3(class="form-control") }}
{{ form.artist4.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist4(class="form-control") }}
{{ form.artist5.label(class="col-lg-6 col-md-6 col-sm-12") }}
{{ form.artist5(class="form-control") }}
<p><input type=submit value=Go type="button" class="btn btn-default"></p>
</div>
</form>
</div>
{% block scripts %}
<script src="{{url_for('.static', filename='js/getArtists.js')}}"></script>
{{super()}}
{% endblock %}
And the bit of CSS I have (in my bootstrap.css file):
.center_div{
margin: 0 auto;
width:90%;
text-align: middle;
}
Replace
...
<div class="col-xs-4" align=middle>
...
with
...
<div class="col-lg-4 col-lg-offset-4 col-md-6 col-md-offset-3 col-xs-12">
...
And, please, reset your bootstrap.css back to original and do not touch it again. If you want to make mods to CSS you just create your own CSS file and load it on top of (after) bootstrap.css (or bootstrap.min.css). Use specific selectors when you want your mods on specific elements and use the same selectors as Bootstrap when you want your mods to be general.
You can't learn CSS in a day, so... if you need professional level CSS in your project, Bootstrap will not provide it for you. You should get a frontend dev to look at your app before you launch.