<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-12 "> <div class="panel-body bg-pink"> <div class="row"> <div class="col-md-12"> <h3> Col-md- 12 No Panel only panel body and bg-color </h3> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-9 "> <div class="panel-body bg-blue"> <h3>No Panel only panel-body and bg-color </h3> </div> <div class="panel-body bg-grey"> <h3>No Panel only panel-body and bg-color </h3> </div> </div> <div class="col-md-3 "> <div class="panel-body bg-grey"> <h3>No Panel only panel-body and bg-color </h3> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="panel"> <div class="panel-body"> <h4> Panel Body inside panel 1</h4> </div> </div> </div> <div class="col-md-3"> <div class="panel"> <div class="panel-body"> <h4> Panel Body inside panel 1</h4> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-9"> <div class="panel"> <div class="panel-body"> <h4> Panel Body inside panel 2</h4> </div> </div> </div> <div class="col-md-3"> <div class="panel"> <div class="panel-body"> <h4> Panel Body inside panel 2</h4> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="panel"> <div class="panel-body bg-"> <!--- One 1 COLUMN --> <div class="row"> <div class="col-md-12"> <p>Col-md-12 </p> </div> </div> <hr> <!--- TWO 2 COLUMN --> <div class="row"> <div class="col-md-6"> <h3>col-md-6</h3> </div> <div class="col-md-6"> <h3>col-md-6</h3> </div> </div> <hr> <!--- Three 3 COLUMN --> <div class="row"> <div class="col-md-4"> <h3>col-md-4</h3> </div> <div class="col-md-4"> <h3>col-md-4</h3> </div> <div class="col-md-4"> <h3>col-md-4</h3> </div> </div> <hr> <!--- Four 4 COLUMN --> <div class="row"> <div class="col-md-3"> <h3>col-md-3</h3> </div> <div class="col-md-3"> <h3>col-md-3</h3> </div> <div class="col-md-3"> <h3>col-md-3</h3> </div> <div class="col-md-3"> <h3>col-md-3</h3> </div> </div> </div> </div> </div> </div> </div>

body {background:#e2e2e2;} hr {border-color:#696969;} .bg-blue {background:#276bd8;color:#fff!important;} .bg-grey {background:#696969;color:#fff;} .bg-pink {background:#c11543;color:#fff!important;}

Structure ---------------------- Row Column Text ------------------- Row Column Panel Panel-body Text ---------------------- Inside panel-body Row Column Text