templates.html

<i class="material-icons d-flex justify-content-center align-items-start" data-toggle="tooltip" title="Bus" style="font-size: 40px;">directions_bus</i>

    <!-- Bus Card -->
    <!-- data-toggle="tooltip" data-bss-tooltip="" title="Bus" TOOLTIP if i want -->
    <div id="busCard" class="card text-center d-flex opnvcard">
        <div class="card-body" style="padding: 10px;margin: 0px;padding-right: 10px;">
            <div class="row" style="margin: 5px;">
                <div class="w-100 d-flex"></div>
                <div class="col-auto" style="padding: 0px;width: 10%;"><i class="material-icons d-flex justify-content-center align-items-start" style="font-size: 40px;">directions_bus</i>
                    <p style="width: auto;font-size: 25px;margin: 0px;">47</p>
                </div>
                <div class="col-3 d-flex justify-content-center align-items-center" style="padding: 0px;max-width: 800px;">
                    <p class="departureIn text-center d-flex" style="font-size: 25px;margin: auto;padding: 0px;">in 1 min</p>
                </div>
                <div class="col d-flex justify-content-center align-items-center" style="padding: 0px;font-size: 20px;">
                    <p class="destination text-center" style="margin: 0px;margin-bottom: 0px;padding: 0px;font-size: 25px;">Destination</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Subway Card -->
    <div id="subwayCard" class="card text-center d-flex opnvcard">
        <div class="card-body">
            <div class="row" style="margin: 5px;">
                <div class="w-100 d-flex"></div>
                <div class="col-auto" style="padding: 0px;width: 10%;"><i class="material-icons d-flex justify-content-center align-items-center" style="font-size: 40px;">directions_subway</i>
                    <p style="width: auto;font-size: 25px;margin: 0px;">U3</p>
                </div>
                <div class="col-3 d-flex justify-content-center align-items-center">
                    <p class="departureIn text-center d-flex" style="font-size: 25px;margin: auto;padding: 0px;">in 1</p>
                </div>
                <div class="col d-flex justify-content-center align-items-center" style="padding: 0px;font-size: 20px;">
                    <p class="destination text-center" style="font-size: 25px;margin: auto;">Destination</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Tram Card -->
    <div id="tramCard" class="card text-center d-flex opnvcard">
        <div class="card-body">
            <div class="row" style="margin: 5px;">
                <div class="w-100 d-flex"></div>
                <div class="col-auto offset-0" style="padding: 0px;width: 10%;"><i class="material-icons d-flex justify-content-center align-items-center" style="font-size: 40px;">tram</i>
                    <p style="width: auto;font-size: 25px;margin: 0px;">4</p>
                </div>
                <div class="col-3 d-flex justify-content-center align-items-center" style="padding: 0px;width: 30px;max-width: 800px;">
                    <p class="departureIn text-center d-flex" style="font-size: 25px;margin: auto;padding: 0px;">in 1</p>
                </div>
                <div class="col d-flex justify-content-center align-items-center" style="padding: 0px;font-size: 20px;">
                    <p class="destination text-center" style="margin: 0px;margin-bottom: 0px;padding: 0px;font-size: 25px;">Destination</p>
                </div>
            </div>
        </div>
    </div>