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.
Related
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 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}
Given a base.html file containing the following:
<div class="foo some-content">
...content...
</div>
<div class="bar some-content">
...different content...
</div>
I would like to wrap each of the .some-content divs to achieve a nested structure when using base.html in certain places:
<div class="row">
<div class="foo some-content">
...content...
</div>
</div>
<div class="row">
<div class="bar some-content">
...different content...
</div>
</div>
I tried extending base.html to wrap the divs with a .row div:
{% extends base.html %}
{% block wrapper %}
<div class "row">
{{ block.super }}
</div>
{% endblock %}
But that didn't work as I got a TemplateSyntaxError for using block wrapper twice in base.html:
# Throws TemplateSyntaxError
{% block wrapper %}
<div class="foo some-content">
...content...
</div>
{% endblock %}
{% block wrapper %}
<div class="bar some-content">
...different content...
</div>
{% endblock %}
I realize that I could break up the .some-content divs in to their own files, and reuse those in other places, but I would prefer another route. I also looked at Django template macros as suggested in this SO answer, but I think middleware will be overkill in this situation.
Is there any way I can extend or reuse my current base.html file so that the .some-content divs are sometimes wrapped in a .row div?
Could you do something like:
{% with foo as var %}
{% include 'mycontainer.html' %}
{$ endwith %}
{% with bar as var %}
{% include 'mycontainer.html' %}
{$ endwith %}
Then mycontainer.html would be:
<div class="row">
<div class="{{ var }} some-content">
...
</div>
</div>
Hi I want to put the login form in the login.html which created by 'bootstrap/wtf.html. But the form of username password et al aligned left as the following image. I want to put the form in the center.
The code is following:
{% extends "common/base.html" %}
{% import 'bootstrap/wtf.html' as wtf %}
{#{% import "macros/_patination.html" as page_macros %}#}
{#<link rel="stylesheet" href="/static/style.css" type="text/css">#}
{% block content %}
<div class = "main-login">
<h1>{{ _('Sign In') }}</h1>
<div class="main-form">
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
</div>
<br>
<p>{{ _('New User?') }} {{ _('Click to Register!') }}</p>
<p>
{{ _('Forgot Your Password?') }}
{{ _('Click to Reset It') }}
</p>
</div>
and css style code:
.main-login{
padding-top: 100px;
text-align: center;
}
.main-form{
/*padding-top: 100px;*/
text-align: center;
/*display: inline-block;*/
}
All you have to do is change the section of code:
<div class="col-md-4">
{{ wtf.quick_form(form) }}
</div>
to
<div class="col-md-4 col-lg-offset-4">
{{ wtf.quick_form(form) }}
</div>
And you should be good.