{% extends 'website/base.html' %}
{% load static %}


{% block title %}
    Hello bus size
{% endblock %}
{% block stylesheet %}
    <link rel="stylesheet" href="{% static 'website/css/graphicage.css' %}"/>
{% endblock %}
{% block content %}
    <div class="row justify-content-md-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header header-elements-inline">
                    <h3> exemple de graphicage</h3>
                </div>
                <div class="card-body">
                    <div class="m_wrap">
                        <div class="service" style="">
                            <div class="bus-title" style="width: 15%">
                                <button class="btn btn-primary" type="button" data-toggle="collapse"
                                        data-target="#collapseExample" aria-expanded="false"
                                        aria-controls="collapseExample">
                                    Joigny 1
                                </button>
                            </div>

                            <div class="padding-segment" style="width: 33cm"> </div>
                            <div class="bus-segment" style="width: 20%">segment</div>
                            <div class="padding-segment" style="width: 10%"></div>
                            <div class="bus-segment" style="width: 10%">segment</div>
                            <div class="padding-segment" style="width: 10%"></div>
                        </div>
                        <div class="service" id="collapseExample">
                            <div class="padding-segment bus-title" style="width: 10%">Lorem ipsum</div>
                        </div>
                        <div class="service">
                            <div class="padding-segment bus-title" style="width: 15%">
                                <button class="btn btn-primary" type="button" data-toggle="collapse"
                                        data-target="#collapseExample" aria-expanded="false"
                                        aria-controls="collapseExample">
                                    Joigny 3
                                </button>
                            </div>
                            <div class="padding-segment" style="width: 12%"></div>
                            <div class="bus-segment" style="width: 22%"> <div> lol</div></div>
                            <div class="padding-segment" style="width: 10%"></div>
                            <div class="bus-segment" style="width: 10%">segment</div>
                            <div class="padding-segment" style="width: 10%"></div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}