Center current div on a bootstrap progress bar on mobile

Question

I have a bootstrap progress bar on my site which "lights up" depending on what page we are on (filling out a multiple page form). It might be easier just to see an example so I made this:

Example

The problem is on mobile the progress bar goes off the screen. I think I would like to make whatever the current page I'm on be centered and the bar can go off the screen left or right as long as the current page (on the bar) is in the center of the screen.

Is there some way to do this?

In case it helps, here is the actual code:

{% if app.request.get('_route') == 'orders_add_fax' %}
    {%   set page = 0 %}
{% elseif app.request.get('_route') == 'orders_add_patients' %}
    {%   set page = 1 %}
{% elseif app.request.get('_route') == 'orders_add_payment' %}
    {%   set page = 2 %}
{% elseif app.request.get('_route') == 'orders_add_clients' %}
    {%   set page = 3 %}
{% elseif app.request.get('_route') == 'orders_add_employees' %}
    {%   set page = 4 %}
{% elseif app.request.get('_route') == 'orders_add_dates' %}
    {%   set page = 5 %}
{% elseif app.request.get('_route') == 'orders_add_notes' %}
    {%   set page = 6 %}
{% elseif app.request.get('_route') == 'orders_add_summary' %}
    {%   set page = 7 %}
{%  endif %}
<div class="progress" style="height:30px;width:570px;">
    <div class="progress-bar bg-{% if page >= 0 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%">
        <a href="{{ path('orders_add_fax') }}" class="text-white">Fax</a>
    </div>
    <div class="progress-bar bg-{% if page >= 1 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 1 %}
            <a href="{{ path('orders_add_patients') }}" class="text-white">Patients</a>
        {% else %}
            Patients
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 2 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 2 %}
            <a href="{{ path('orders_add_payment') }}" class="text-white">Payment</a>
        {% else %}
            Payment
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 3 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {%  if page >= 3 %}
            <a href="{{ path('orders_add_clients') }}" class="text-white">Client(s)</a>
        {%  else %}
            Client(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 4 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 4 %}
            <a href="{{ path('orders_add_phleb') }}" class="text-white">Phleb(s)</a>
        {% else %}
            Employee(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 5 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 5 %}
            <a href="{{ path('orders_add_dates') }}" class="text-white">Date(s)</a>
        {% else %}
            Date(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 6 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        {% if page >= 6 %}
            <a href="{{ path('orders_add_notes') }}" class="text-white">Note(s)</a>
        {% else %}
            Note(s)
        {% endif %}
    </div>
    <div class="progress-bar bg-{% if page >= 7 %}success{% else %}dark{% endif%}" role="progressbar" style="width:13%;border-left:1px solid white;">
        Summary
    </div>
</div>

Answer 1

Probably not the best attempt, but here's me having a go using flex, maybe you can use something similar?

http://jsfiddle.net/aq9Laaew/253301/

  .flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

  .flex-container > div {
  background-color: #f1f1f1;
  width: 100px!important;
  text-align: center;
  line-height: 75px;
 }

 .progress {
 height: auto;
 background-color: transparent;

}