<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="panel"> <div class="panel-heading"> <h1>Panel Heading</h1> </div> <div class="panel-body"> <p>Panel Body: uzun bir yazı olacakki nasıl göründüğüne bakalım. Uzun bir yazı olacakki nasıl göründüğüne bakalım. Uzun bir yazı olacakki nasıl göründüğüne bakalım. Uzun bir yazı olacakki nasıl göründüğüne bakalım. Uzun bir yazı olacakki nasıl göründüğüne bakalım. </p> </div> <div class="panel-footer"> <span class="default">1</span> <span class="blue">2</span> <span class="green">3</span> <span class="purple">4</span> </div> </div> </div> </div> </div>

body { padding: 20px 0; font: 14px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; color: #8F7F70; background-color: #FAFEFE; } .panel { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); border-top-left-radius: 30px; border-top-right-radius: 30px; } .panel-heading { border-bottom: 2px solid #FCFBFC; } .panel-footer { padding: 0; margin: 0; } .panel-footer span { color: #FFF; font-size: 36px; padding: 10px; width:24.1555%; text-align: center; display: inline-block; } .default { background-color: #9F9F9F;} .blue { background-color: #000099;} .green { background-color: #009900;} .purple { background-color: #880088;}