How do I put images over other images in a row in bootstrap 4-CodePudding

I'm trying to place three images into three other images in Bootstrap 4, however the images I'm trying to add need to be added in a horizontal row (next to each other) yet it keeps showing up in a vertical row. Would someone be able to tell me what it is I'm doing wrong? (very very new to coding so excuse the mess)

    <style>

body {
  background-color:rgb(239, 136, 41)!important;
  font-family: 'Open Sans', sans-serif;

}

.container1 {
  width: 70%;
  margin: 100px auto;
  margin-right: 20px auto;
}

.container1 h1{
  padding: 6px 0;
  font-size: 44px;
  text-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  text-align: center;
}

.feature-img {
  position: relative;
}


.play-btn {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -25px;
    margin-left: -25px;
}

    </style>

<div class= "container1">
         <h1> How our noodles are made </h1>
    <hr >

       <div class= "row">
         <div class= "col">
           <div class= "feature-img">
             <img src= "images/cooking.jpg" class= "rounded float-left" width= 30%;>
             <img src= "images/play.jpg" class = "rounded-circle play-btn" width= 5%>
          </div>
        </div>
      </div>
      <div class= "row">
        <div class= "col">
          <div class= "feature-img">
            <img src= "images/cooking1.jpg" class= "rounded float-right" width= 30%;>
            <img src= "images/play.jpg" class = "rounded-circle play-btn" width= 5%>
         </div>
       </div>
      </div>
      <div class= "row">
        <div class= "col">
          <div class= "feature-img">
            <img src= "images/cooking2.jpg" class= "rounded mx-auto d-block" width= 30%;>
            <img src= "images/play.jpg" class = "rounded-circle play-btn" width= 5%>
         </div>
       </div>
      </div>
          <hr >
</div>

CodePudding user response：

Please try this:

Replace css:

 <style>

body {
  background-color:rgb(239, 136, 41)!important;
  font-family: 'Open Sans', sans-serif;

}

.container1 {
  width: 70%;
  margin: 100px auto;
  margin-right: 20px auto;
}

.container1 h1{
  padding: 6px 0;
  font-size: 44px;
  text-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
  text-align: center;
}

.feature-img {
    position: relative;
    width: 30%;
    height: 100%;
}



.play-btn {
    left: 50%;
    top: 50%;
    position: absolute;
    margin-top: -25px;
    margin-left: -25px;
    width: 20%;
}

img.rounded {
    width: 100%;
}

    </style>

Replace html

<div class= "container1">
         <h1> How our noodles are made </h1>
    <hr >

       <div class= "row">
         <div class= "col">
           <div class= "feature-img float-left">
             <img src= "images/cooking.jpg" class= "rounded">
             <img src= "images/play.jpg" class = "rounded-circle play-btn">
          </div>
        </div>
      </div>
      <div class= "row">
        <div class= "col">
          <div class= "feature-img float-right">
            <img src= "images/cooking1.jpg" class= "rounded">
            <img src= "images/play.jpg" class = "rounded-circle play-btn">
         </div>
       </div>
      </div>
      <div class= "row">
        <div class= "col">
          <div class= "feature-img">
            <img src= "images/cooking2.jpg" class= "rounded">
            <img src= "images/play.jpg" class = "rounded-circle play-btn">
         </div>
       </div>
      </div>
          <hr >
</div>