-fluid <div class="container-fluid">
   <h3> I am a container</h3>
  <div class="row">
  <div class="col-sm-6">
    <h4>I'm a col-sm-6</h4>
    <div class="row">
      <div class="col-sm-4">
    <h4>nested inside col-sm-6</h4>
  </div><!-- end of nested col-sm-4 -->
      <div class="col-sm-4">
    <h4>nested inside col-sm-6</h4>
  </div><!-- end of nested col-sm-4 -->
      <div class="col-sm-4">
    <h4>nested inside col-sm-6</h4>
  </div><!-- end of nested col-sm-4 -->
    </div> <!-- end of nested row -->
    </div> <!-- end of col-sm-6 -->
    <div class="col-sm-3">
      <h4>I'm a col-sm-3</h4>
    </div>
       <div class="col-sm-3">
        <h4>I'm a col-sm-3</h4>
    </div>
  </div><!-- end of main row
</div> <!-- end of container -->
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

body{
  font-family: Inconsolata, monospace;
}

.container-fluid{
  background-color:#F5F5DC;
  height: 200px;
}
.row{
  padding: 10px;
  background-color:#FF1493;
}
.col-sm-6{
  background-color:#BA55D3;
}
.col-sm-4{
  background-color:#48D1CC;
  border: 1px solid black;
}
.col-sm-3{
 background-color:#D8BFD8;
 border: 1px solid black;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.