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.
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 developing an e-commerce with Django. My backend is fine, my problem is with the template. Currently, I want to display 4 products per row, and if there are 7 products, the other 3 must be aligned with the top one. I'm using bootstrap to do this, however, for some reason I don't know, it doesn't have 4 products on the same line, even with space. I'm using a container with 1200px.
home.html
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
{% for product in products %}
<div class="card mb-4 border rounded" style="width: 13.5rem;">
<a href="{{ product.get_absolute_url }}">
{%if product.image %}
<img class="img-produto" src='/media/{{product.image}}' class="card-img-top hover_img ">
{% else%}
<img class="img-produto" src="{% static '/img/not-found-product.jpg' %}" class="card-img-top hover_img">
{%endif%}
</a>
<div class="card-body">
<p class="card-title">{{product.name}}</p>
<p class="card-text"><i class='fas fa-dollar-sign' style="margin-right:2px"></i>{{product.price}}</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
Just remove width: 13.5rem; and add class col-4 in the div. Like,
<div class="col-4 card mb-4 border rounded">
<!-- your content goes here -->
</div>
Beneath is some code for a website I am working on.
<div
class="container-fluid px-0">
<!-- row start -->
<div class="row no-gutters align-items-center h-full">
<div class="col-lg-3 offset-lg-2 col-md-8 offset-md-2 col-sm-10 offset-sm-1 sm:px-20 z-2">
<div class="masthead__content">
<div data-split="lines" data-split-page-reveal class="mr-minus-lg md:mr-0">
<h1 class="masthead__title fw-700 text-white js-title">
Title
</h1>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
Subtitle
</p>
</div>
<div data-split="lines" data-split-page-reveal>
<p class="masthead__text text-light mt-40 md:mt-20 js-text">
<button class="learn-more">
<span class="circle" aria-hidden="true">
<span class="icon arrow "></span>
</span>
<span class="button-text">Learn More</span>
</button>
</p>
</div>
</div>
</div>
<div class="col-xl-5 offset-xl-1 col-lg-6 offset-lg-1 z-1">
<div data-parallax="0.7" class="masthead__img overflow-hidden h-100vh ml-minus-sm md:ml-0">
<div data-parallax-target class="bg-image js-lazy js-image" data-bg="img/index/light.jpg"></div>
<div class="masthead__img__cover js-image-cover"></div>
</div>
</div>
</div>
<!-- row end -->
</div>
Currently the div columns are situated as shown in the image beneath:
How can I change my bootstrap columns so that the first div actually overlaps the second (desired output shown in screenshot)
I know a resolution to this can be done purely through bootstrap and would greatly appreciate any help with this. I have tried changing the col-lg-x sizes, however, this only changes the width of the columns. I am also unable to find a solution to this online.
While it’s a little difficult to understand what you’re trying to do without an operational version of your code (as #Grumpy was asking), but if all you need is to have part of your left-side column overlap part of your right-side column, then you can do that by using absolution positioning on the left-side column and offsetting the right-side column.
I setup a quick example using some different column sizes for different widths
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-lg">
<div class="row position-relative vh-100">
<div class="col-9 col-sm-8 col-md-7 position-absolute vh-100" style="background-color: rgba(255, 128, 149, 0.5); z-index: 1;">
<p class="Left-right">Left Text</p>
</div>
<div class="col-4 col-sm-5 col-md-6 offset-8 offset-sm-7 offset-md-6 bg-primary vh-100">
<p class="text-right">Right Text</p>
</div>
</div>
</div>
The left-side background-color is setup with an alpha of 50% so you can see the overlap area.
You didn't say which version of Bootstrap you're using, so I used Bootstrap 4.
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/
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) }}?