<!-- 
<div class="container">
  <h3>This is a container</h3>
  <div class="row">
    <div class="col-sm-6">
  <h5> This is a heading inside a column which is inside a pink row</h5>
    </div> <!-- end of col 
      <div class="col-sm-6">
  <h5> This is also a heading inside a column which is inside a pink row</h5>
    </div> <!-- end of col 
  </div> <!-- end of row 
</div> <!-- end of container

<!--   
Make a container 
Make a row 
Inside the row: 3 col-sm-4 divs
Inside each  col-sm-4 div put an image


<div class = "container">
  <div class = "row">
    <div class="col-sm-4">
      <h1>Hello</h1>
      <img src='https://images.unsplash.com/photo-1614286399266-915f14297291?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjAzNjc1Nw&ixlib=rb-1.2.1&q=80&w=400' alt=''>
    </div> <!-- end of col-sm-4
    
       <div class="col-sm-4">
            <h1>Hello</h1>
    <img src='https://images.unsplash.com/photo-1614706170180-248e592ec5b7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYxNjAzNjc1Nw&ixlib=rb-1.2.1&q=80&w=400' alt=''>

    </div> <!-- end of col-sm-4 
       <div class="col-sm-4">
            <h1>Hello</h1>
         <p>rgrgregregregregergregregegregergergergergew </p>
    </div> <!-- end of col-sm-4 
  </div> <!-- end of row
</div> <!-- end of container 
-->

<div class= "container">
  <div class="row justify-content-center">
    <h5>CAT</h5>
  </div>
</div> 

<!-- try to use a bootstrap class for this e.g justify-content: center .... -->
@import url("https://fonts.googleapis.com/css?family=Inconsolata:400,700");

body{
  font-family: Inconsolata, monospace;
}
/*
.container{
  background-color:#F5F5DC;
  height: 200px;
  text-align:center;
  padding-top: 20px;
   
}
h3{
  color:#4B0082;
}
.row{
  padding:30px;
  background-color:#FF1493;
}
.col-sm-6{
 background-color:#48D1CC;
 border-right: 1px solid black;  
}
*/

.container{
  background-color: red;
}
.row{
  background-color: yellow;
}
h5{
  text-align: center;
}

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.