Bootstrap 4: Flexbox Image on the left and text on the right

Question

I am trying to achieve this image below in bootstrap either thru column or flexbox:

Basically there must be a 965 x 678px image on the left and there are text floating on the right which if you check the fiddle below it is not function as it should be.

I tried to use Flexbox but its not working.

Here's my HTML:

<section id="golf">
            <div class="container">
                <div class="d-flex justify-content-start">
                    <div class="menu-image">
                        <img src="https://via.placeholder.com/975x678" class="img-fluid" alt="menu image">
                    </div>
                    <div class="menu-text">
                        <h2 class="main-title text-left">Golf Ter</h2>
                        <hr class="hr-style-left" />
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>
    
                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">GOlfy</p>
                            <p class="menu-price">$200.00</p>
                        </div>

                        <div class="menu-content d-flex space-between">
                            <p class="menu-name">Kimbap</p>
                            <p class="menu-price">P200.00</p>
                        </div>
                    </div>
                </div>
            </div>
    </section>

And here's the CSS:

.menu-container{
  width: 100%;
}


.menu-content{
   margin-top: 1.5rem;
   width: 50%;
}

.menu-text{
    padding: 90px;
    width: 50%;
}

p.menu-name{
    font-size: 1.3rem;
    text-align: left;
    text-transform: uppercase;
    color: #191919;
    font-weight: bold;

}

p.menu-price{
    margin-left: 9rem;
    font-weight: normal;
    color: #191919;
    font-size: 1.3rem;
}

This must be responsive w/c means when you resize the screen the image and the text must be still on the same position and will stack next to each other on mobile device screen.

Here's the jsfiddle so you can see the actual code: https://jsfiddle.net/L23zqn5x/1/

Answer 1

You don't need to use your own CSS when bootstrap has provided you with the classes to achieve the desired layout.

In the code snippet below, i have removed unnecessary CSS and used bootstrap's grid layout along with flex utility classes to achieve the desired layout.

#golf {
  border-top: 3px solid green;
  border-bottom: 3px solid green;
}

p.menu-name,
p.menu-price {
  font-size: 1.3rem;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<section id="golf">
  <div class="fluid-container">
    <div class="row no-gutters">
      <div class="col-md">
        <div class="menu-image h-100 d-flex align-items-start">
          <img src="https://via.placeholder.com/975x678" class="img-fluid" alt="menu image">
        </div>
      </div>

      <div class="col-md">
        <div class="menu-text flex-grow-1 py-4 px-5">
          <h2 class="main-title text-left">Golf Ter</h2>
          <hr class="hr-style-left" />
          <div class="menu-content d-flex justify-content-between">
            <p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
            <p class="menu-price">$200.00</p>
          </div>

          <div class="menu-content d-flex justify-content-between">
            <p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
            <p class="menu-price">$200.00</p>
          </div>

          <div class="menu-content d-flex justify-content-between">
            <p class="menu-name text-uppercase font-weight-bold">GOlfy</p>
            <p class="menu-price">$200.00</p>
          </div>

          <div class="menu-content d-flex justify-content-between">
            <p class="menu-name text-uppercase font-weight-bold">Kimbap</p>
            <p class="menu-price">$200.00</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>