I want to make a form and centre the items horizontally, but I did not manage to do this. https://i.stack.imgur.com/3DD5X.png
This is my code (everything is centered besides the form fields):
<div class="card top-buffer">
<h5 class="card-header">Status</h5>
<div class="card-body align-items-center d-flex justify-content-center">
<div class="container align-items-center">
{% if Status[![enter image description here][1]][1]%}
<div class="row justify-content-center">
<div class="spinner-grow text-success" role="status">
<span class="sr-only">Running</span>
</div>
</div>
<div class="row justify-content-center">
<p>Running</p>
</div>
{% else %}
<div class="row justify-content-center">
❌ Error
</div>
{% endif %}
<div class="row justify-content-center">
{{ form(notificationForm) }}
</div>
<div class="row justify-content-center">
<p><i>Note: There might be a delay between status changes</i></p>
</div>
</div>
</div>
</div>
In the Browser it looks like this:
I tried different css things like
display: inline-block;
margin-left: auto;
margin-right: auto;
But that did not work
I can't comment so I will answer this way.
I will give an example of what's happening:
<div class="row justify-content-center"> <!-- It tells to center what's inside -->
<form> <!-- Form will center, but don't pass it to what's inside of it -->
<input> Something </input> <!-- This one it's not centered because form don't tell it to -->
</form>
The parent <div class="row justify-content-center"> only says to direct children <form> to center. So the children of <form> won't.
I know you are using bootstrap or something like that, but you can understand better from here
Can you style this form {{ form(notificationForm) }}?
Related
*Here is the code. With this code listing is done vertically.Here is the current output I want to make this vertically.
*This is the current code I written.
{% extends 'index.html' %}
{%block body_block%}
{%for p in carslist%}
<section class="py-5">
<div class="container px-4 px-lg-5 mt-2">
<div class="row gx-4 gx-lg-5 row-cols-2 row-cols-md-3 row-cols-xl-4 justify-content-center">
<div class="col mb-5">
<div class="card h-100">
<!-- Product image-->
<img class="card-img-top" src="{{p.carpic.url}}" alt="..." />
<!-- Product details-->
<div class="card-body p-4">
<div class="text-center">
<!-- Product name-->
<h5 class="fw-bolder">{{p.carcompany}}</h5>
<p>{{p.carmodel}}</p>
<!-- Product price-->
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Price: {{p.carprice}}</li>
<li class="list-group-item">Kms: {{p.carkms}}</li>
</ul>
</div>
<!-- Product actions-->
<div class="card-footer p-4 pt-0 border-top-0 bg-transparent">
<div class="text-center"><a class="btn btn-outline-dark mt-auto" href="#">View Details</a></div>
</div>
</div>
</div>
</div>
</div>
</section>
{%endfor%}
For the parent element of each of your products, you need to write the properties: display: flex;
flex direction: row;
flex-wrap: wrap;
In tailwind - flex flex-row flex-wrap
simply remove all the row-cols classes and things should stack up vertically by default.
Classes to remove: row-cols-2 row-cols-md-3 row-cols-xl-4.
When you have a lot of cluttered html like that and you can't make sense of it anymore I find that the best way to go about it is to reduce the structure to the very minimum, and build from there.
Comment your code and rebuild it little step by little step. Then you can see the impact of each individual element or class that you add.
I'm trying to create a series of Bootstrap 5 cards based on variable data using a Jinja for loop. When they plot on the site, they are not uniform height as I'd hoped. Is there a way to fix this code so that each card on each row appears as the same height? It looks correct on the widest page setting, but shrinking causes the alignment to stop working.
<div class="row row-cols-1 row-cols-md-2 g-4" id='active-disaster-dashboard'>
{% for emergency in active_emergencies %}
<a href='/emergency/{{emergency.Emergency.id}}'>
<div class="col d-flex align-items-stretch">
<div class='card bg-light portfolio-card'>
<div class="card-body d-flex flex-column">
<div class='row align-items-center'>
<div class='col-3 p-4'>
<img class="img-fluid" src="/static/assets/img/emergency_types/{{emergency.EmergencyType.emergency_type_name}}.png" />
</div>
<div class='col p-4'>
<h2 class="Montserrat text-danger">{{emergency.Emergency.emergency_name}}</h2>
</div>
</div>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
I've tried fiddling with the Bootstrap classes that would (ostensibly) set this to be the same size. I can't figure out why it isn't working.
I am using different bootstrap classes multiple times in an HTML <form>.
e.g.:
<form id="frmData" name="frmData" method="POST">
<div class="row justify-content-sm-center mb-2 align-items-center">
<div class="col-12 col-sm-auto d-flex justify-content-md-end">
<label>....</label>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<input .....>
</div>
</div>
<div class="row justify-content-sm-center mb-2 align-items-center">
<div class="col-12 col-sm-auto d-flex justify-content-md-end">
<label>....</label>
</div>
<div class="col-12 col-sm-6 col-lg-4">
<input .....>
</div>
</div>
......
</form>
Is there an opportunity to define a class for the <div> of the <label> for example and reuse it for every <div> that is containing a label?
This would help a lot during development. Instead of changing the classes of each <div>, it would be sufficient to change only the class definition.
Something like this:
<div class="div_class">
<label>...</label>
</div>
<style>
.div_class {
.col-12
.col-sm-auto
.d-flex
.justify-content-md-end
}
</style>
This I think will be the only way to do it in pure CSS. In this model all of the innner Div's and Label's should inherit settings from the new wrapper that I have added and .div_class > * ensures only children are affected not grandchildren. Give it a try any way.
<div class="wrapper">
<!-- Now as many of your label divs as you need -->
<div class="div_class">
<label>...</label>
</div>
<div class="div_class">
<label>...</label>
</div>
<div class="div_class">
<label>...</label>
</div>
</div>
And the CSS
.wrapper * {
color: black;
}
.div_class > * {
color:blue;
}
i have two div columns in a row. i want the height of the left column to match that of the right column. In the first image is my desired state. But if the height of the right column changes, the height of the scrollable div should also be changed.
the reason is the height in px defined in the css, but i want to make that dynamical. how can i do that? Picture two shows my problem.
I would be glad about help :D
<div id="{{ project.RowKey }}" class="collapse" aria-labelledby="heading{{ project.RowKey }}">
<div class="card-body">
<div class="row">
<div class="col w-50 m-2">
<h6 class="row w-100">
Kommentare :
<div class="ml-2"><span
class="badge badge-pill badge-primary">{{ project.numberComments }}</span>
</div>
</h6>
<div class="row w-100">
<div class="w-100">
<!-- comments -->
<div class="" style="width:100%;height:200px;float:left;overflow-y:scroll;">
</div>
<!-- new comment -->
<form id="view_selection_form" action="{{ url_for('save_comment') }}"method="POST">
</form>
</div>
</div>
</div>
<!-- status -->
<div class="col w-50 m-2">
<h6>Details zum Status: </h6>
<div class="">
</div>
<div class="d-flex justify-content-end">Zuletzt geändert
von: {{ project.answers.last_changed_by.name }} |
{{ project.answers.last_changed_by.date }}
</div>
</div>
</div>
</div>
</div>
You can use display:flex; on the parent div and that makes the column divs to stretch till the parent div. Now restrict the height in parent div.
Check this example : https://codepen.io/AravinthAro/pen/ZEexPWv
I am using an AdminLte template, which I use as a layout. In the part where I am going to put the content it is like this:
<div class="content-wrapper">
<section class="content">
#yield('content')
</section>
<!-- /.content -->
</div>
In the view where I have the content to display I have:
#extends('layouts.app')
#section('content')
<div>
<img class="mx-auto my-auto d-block" src="{{ asset('dist/img/logo.png')}}" alt="logo" style="opacity: .2">
</div>
#endsection
When executing, the image of the logo appears centered horizontally, but vertically it appears attached to the upper margin. I've tried various shapes, but can't get it to center vertically. I can't figure out how to fix it. I will appreciate a help.
in Bootstrap 4, you can use .d-flex .align-items-center
https://getbootstrap.com/docs/4.4/utilities/flex/#align-items
The result like this:
<div class="content d-flex align-items-stretch bg-info w-100">
<div class="d-flex bg-info w-100">
<div class="d-flex align-items-center w-100">
<img class="w-100" src="https://via.placeholder.com/800x200">
</div>
</div>
</div>
Here full demo
https://jsfiddle.net/herupurwito/8oq67jcr/3/