<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class=" m-5 d-flex flex-md-row align-items-start align-items-stretch hidden-print"> <div class="d-flex justify-content-start col-6"> <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-left" aria-hidden="true"></i></a> <button type="button" class="btn btn-secondary btn-navigation mr-2 bg-gray-900 text-muted border-0 rounded-0">Предыдущий пост <br> <a href="#" class="wordwrap">Статья ни очем</a> </button> </div> <div class="d-flex justify-content-end ml-auto col-6"> <button type="button" class="btn btn-secondary btn-navigation bg-gray-900 text-muted border-0 rounded-0">Следующий пост <br> <a href="#" class="wordwrap">Статья о чем то</a> </button> <a href="#" role="button" class="btn btn-secondary btn-navigation d-flex align-items-center bg-gray-800 border-0 rounded-0 hidden-sm-down"><i class="fa fa-chevron-right" aria-hidden="true"></i></a> </div> </div>

.wordwrap { white-space: normal; } .bg-gray-800 { background-color: #dfdfdf; } .bg-gray-900 { background-color: #efefef; }