Bootstrap navbar appearing on 2 lines in Safari on first load

I go through this i found this solution rather than giving it inline you can use bootstrap class checkbox-inline which will make the center div inline and give navbar text-center class. Use pull-left and pull-right instead navbar-left and navbar-right. Hope it will help you :)

<nav class="navbar navbar-default navbar-fixed-top text-center" style="background: red;">
<div class="container-fluid">
    <button type="button" class="navbar-nav btn btn-default navbar-btn pull-left previous_page">
        <span class="glyphicon glyphicon-menu-left"></span>
  back

    </button>
    <div class="text-center checkbox-inline" id="progress-bar">
        <div data-page="0" class="counter active"></div>
        <div data-page="1" class="counter "></div>
        <div data-page="2" class="counter "></div>
        <div data-page="3" class="counter "></div>
        <div data-page="4" class="counter "></div>
    </div>
    <button type="button" class="navbar-nav btn btn-default navbar-btn pull-right next_page disabled">
  next

        <span class="glyphicon glyphicon-menu-right"></span>
    </button>
</div>
</nav>