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">
Related
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>
I am currently working on a django blog. However, I am experiencing some difficulties with the size of the post thumbnails. Here's a picture:
What I marked in yellow is how the image should be filling the space. The width is fine, but the heigh isn't working well as you can see.
Here's the code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
img {
height: 100%;
width: 100%;
}
</style>
<!-- Post-->
{% for obj in object_list %}
<div class="row d-flex align-items-stretch">
{% if not forloop.first and not forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
<div class="text col-lg-7">
<div class="text-inner d-flex align-items-center">
<div class="content">
<header class="post-header">
<div class="category">
{% for cat in obj.categories.all %}
{{ cat }}
{% endfor %}
</div>
<a href="{{ obj.get_absolute_url }}">
<h2 class="h4">{{ obj.title }}</h2>
</a>
</header>
<p>{{ obj.overview|linebreaks|truncatechars:200 }}</p>
<footer class="post-footer d-flex align-items-center"><a href="#" class="author d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{ obj.author.profile_picture.url }}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{ obj.author }}</span></div></a>
<div class="date"><i class="icon-clock"></i> {{ obj.timestamp|timesince }} ago</div>
<div class="comments"><i class="icon-comment"></i>{{ obj.comment_count }}</div>
</footer>
</div>
</div>
</div>
{% if forloop.first or forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
</div>
{% endfor %}
</div>
</section>
I have no idea where the error is. I've tried to debug the problem but I haven been able to debug it
The way I see it, it's doing exactly what it's supposed to.
You put the image inside a column, then the image has 100% of the width, and because this is just an image inside a div (no display flex on the column or tricks involved), 100% height is just not gonna work and the default height of the image is used.
And even if it did work, and the images where 100% both on height and width, they'll probably end up all stretched and deformed in different resolutions, because the ratio of width:height probably changes.
I usually skip this dilemma by avoiding the use of the img tag altogether, and setting the images as background-images in the column with the 'image' class. Then set the background-size to "cover", and background-position to "center". You probably also need to set a minimum height for this column, so the images don't completely disappear when the columns stack on top of each other on smaller screens.
You can add a class like
<style>
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
min-height: 200px; // this size is arbitrary, choose what suits best
}
</style>
And then add the image on the iteration like so
<div class="image col-lg-5" style="background-image: url('{{ obj.thumbnail.url }}');"></div>
first you install it using pip install easy-thumbnails
INSTALLED_APPS = [
# ...
'easy_thumbnails',
]
then you do your migrations,and use it in your templates, this is from a project of mine:
{% load thumbnail %}
{% for image in images %}
<div class="image">
<a href="{{ image.get_absolute_url }}">
{% thumbnail image.image 300x300 crop="smart" as im %}
<a href="{{ image.get_absolute_url }}">
<img src="{{ im.url }}">
</a>
</a>
</div>
{% endfor %}
you can play with the details 300x300 as you wish, also the crop is optional but very useful
if you have trouble showing images add : THUMBNAIL_DEBUG = True to your settings
here is the docs https://easy-thumbnails.readthedocs.io/en/
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.