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:

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/

user_6094348 · Answer

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;
}

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

1 Answers