0
votes

Contenu en ligne dans DIV

Je convertis d'un fichier PSD et j'ai maintenant deux cartes, et je veux que le contenu de la carte soit comme Ce . Tout le monde peut m'aider avec ça?

Voici mon code actuel: p>

<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

javascript html css bootstrap-4

0 commentaires

3 Réponses :

0
votes

Puisque vous utilisez bootstrap> = 4, vous pouvez utiliser spécial d-flex code> justify-contenu - * code> align-items - * code> Classes dans rangées code>

p>



<div class="container">
    <div class="col-lg-12">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">gavel</i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2">
                    <i class="material-icons">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2 commentaires

Cela ne change rien!

L'avez-vous couru? C'est ce que tu voulais en photo

0
votes

J'espère que tu es attendant comme ceci:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="container">
    <div class="col-lg-12">
        <div class="row">
            <div class="col">
                <div class="card height-2" style="border-top:4px solid #515151;">
                  <i class="material-icons" style="color:#515151;">gavel  </i>
                    <h5>Legislacion</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2"  style="border-top:4px solid #9b9b60;">
                    <i class="material-icons" style="color:#9b9b60;">today</i>
                    <h5>Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>

0 commentaires

0
votes

Comme @Ddominik dit, si vous utilisez bootstrap-4 code>, vous pouvez utiliser des classes de bootstrap

p>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<div class="container">
    <div class="col-lg-12">
        <div class="row m-0">
            <div class="col">
                <div class="card height-2 d-flex flex-row align-items-center p-3" style="border-top:4px solid #515151;">
                  <i class="material-icons" style="color:#515151;">gavel  </i>
                    <h5 class="pl-5 m-0">Legislacion</h5>
                </div>
            </div>
            <div class="col">
                <div class="card height-2 d-flex flex-row align-items-center p-3"  style="border-top:4px solid #9b9b60;">
                    <i class="material-icons" style="color:#9b9b60;">today</i>
                    <h5 class="pl-5 m-0">Calendar</h5>
                </div>
            </div>
        </div>
    </div>
</div>

0 commentaires