Aligner HORIZONTALEMENT dans une Card

Signaler
Messages postés
39
Date d'inscription
mardi 2 février 2021
Statut
Membre
Dernière intervention
9 juin 2021
-
hello ! jj'essai depuis des heures un truc sur un bout de code et je n'y arrive pas :(

Deux fichiers sont concernés et du coup je bloque probablement betement mais pourtant !

je veux que dans ma card soit aligné mon h5 ( qui est mon titre) et mes 2 <i class>:
trash titre pencil
photo
read more!


{% extends 'base.html.twig' %}

{% block title %}Toutes les figures
{% endblock %}

{% block body %}
	<div class="container-fluid">
		<header class="masthead">
			<div class="row">
				<img class="card-img-top" src="{{ asset('build/images/homepage4.jpg')}}" alt="Card image cap">
				<div class="col" id="button-down">
					<p style="margin-top: -80px; height: 60px; font-size: 2em; margin-right:50px;" class="mr-3 text-right">
						<a href="#tricks">
							<i class="fas fa-arrow-down" style="color: #000080"></i>
						</a>
					</p>
				</div>
			</div>
		</header>


		<div class="row m-3 mt-4 text-center">
			{%  set nbreTrickAffiches = 0 %}
			{% for trick in tricks %}
				{% set nbreTrickAffiches = nbreTrickAffiches +1 %}
				{% if nbreTrickAffiches <= 6 %}
					<div class="col-sm-6 col-md-4 lg-3 col-xl-2 pt-5">
						{% else %}
						<div class="col-sm-6 col-md-4 lg-3 col-xl-2 pt-5 hidden">
							{% endif %}
							<div class="card">
								<h5>{{ trick.name }}{{ include('trick/_delete_form.html.twig') }}</h5>
								<a href="{{ path('trick_edit', {'id': trick.id}) }}"><i class="fas fa-pencil-alt"></i> </a>
								<img class="card-img-top" src="{{ asset('uploads/' ~ trick.pictures|first)}}" alt="Card image cap">
									<div class="d-flex justify-content-center mx-5 my-2">
									<a href="{{ path('trick_show', {'id': trick.id}) }}" class="btn btn-primary">Read more </a>
									</div>
							
							</div>
						</div>
			{% endfor %}
					</div>
	<div class="row"><br>
				<div class="box">
					<button class="btn btn-success my-3" id="voirPlus">Voir plus</button>
				</div>

			</div>

			<div class="row justify-content-end">
				<div class="col" id="button-up">
					<a href="#tricks" alt="fleche">
						<i class="fa fa-arrow-up fa-2x" style="color: #000080"></i>
					</div>
				</div>
			</div>

<script>
let boutonVoirPlus = document.getElementById('voirPlus')
boutonVoirPlus.addEventListener('click', () => {
let listElementHidden = document.getElementsByClassName('hidden')
for (let i = 0; (i <= 6) && (i < listElementHidden.length); i++) {
listElementHidden[i].classList.remove('hidden')
}})</script>

{% endblock %}


Pour mon include: cela correspond à un button :

<form method="post" action="{{ path('trick_delete', {'id': trick.id}) }}" onsubmit="return confirm('Etes-vous sure de vouloir supprimer ce Trick ?');">
	<input type="hidden" name="_token" value="{{ csrf_token('delete' ~ trick.id) }}">

	<div class="row">
		<div class="col-sm-4">
			<button onclick="myFunction() ">
				<i class="far fa-trash-alt fontawesome" ></i>
			</button>
		</div>
	</div>
</form>


j'espere avoir tout mis !

merci pour votre aide !! je vois plus rien !! merci belle soiree