HTML & CSS Bootstrap grid issue

[Sdubid]

Hello guys,

I am kinda new in front-end, and I faced with issue when developing my very first website. So I have the website in psd format with bootstrap grid, and I can't position the elements correctly in the container. I need them to be like this, however image always drops to below on the next row like this. As I understand it is just not allowing to move any objects next to buttons https://ibb.co/R2NFN9h
Are there any ways to do put image next to buttons?

Here is HTML

[CODE lang="html" title="Bootstrap Grid Website"] <section>
<div class="release">
<div class="container">
<div class="release_header">
NEW RELEASE | <img src="img/chapter_i.png" alt="" class="release_img_header">
</div>
<div class="row">
<div class="col-md-3 offset-5">
<div class="release_btn_1">
LEARN MORE
</div>
</div>
<div class="col-md-3 offset-5">
<div class="release_btn_1">
BUY ALBUM
</div>
</div>
<div class="col-md-3 offset-5">
<div class="release_btn_1">
STREAMING PLATFORMS
</div>
</div>
<div class="col-md-3 offset-md-9">
<img src="img/album.jpg" alt="" class="release_img">
</div>
</div>
</div>
</div>
</section>[/CODE]

SASS:

[CODE lang="sass" title="Bootstrap Grid Website Style"].release
min-height: 514px
padding: 28px 0px 126px 0px
background: url('../img/release_bg.jpg') center center/cover no-repeat
&_header
color: #b4b6b2;
font-family: Jura;
font-size: 48px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
margin-bottom: 138px
&_btn_1
display: block
width: 237px;
height: 40px;
border-radius: 6px;
border: 1px solid #ffffff;
background-color: #b4b6b2;
opacity: 0.29;
font-family: Jura;
color: #ffffff;
font-family: Jura;
font-size: 16px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.6px;
margin: 0px 11px 9px 0px
&_btn_2
display: block
width: 237px;
height: 40px;
border-radius: 6px;
border: 1px solid #ffffff;
background-color: #b4b6b2;
opacity: 0.29;
font-family: Jura;
color: #ffffff;
font-family: Jura;
font-size: 16px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.6px0
margin: 0px 11px 9px 0px
&_btn_3
display: block
width: 237px;
height: 40px;
border-radius: 6px;
border: 1px solid #ffffff;
background-color: #b4b6b2;
opacity: 0.29;
font-family: Jura;
color: #ffffff;
font-family: Jura;
font-size: 16px;
font-weight: 400;
text-align: center;
text-transform: uppercase;
letter-spacing: 1.6px0
margin: 0px 11px 0px 0px[/CODE]

I would extremely appreciate your help.

Thanks

 

[Mutiny]

Your grid columns plus your offsets should not be more than 12. With the offsets you have, it's forcing things to a new line.

I would recommend you have two columns, one that contains all three buttons stacked and a second for the image. Make sure that the offsets + column widths are no more than 12 to keep everything on the same line.

 

[Sdubid]

Your grid columns plus your offsets should not be more than 12. With the offsets you have, it's forcing things to a new line.

I would recommend you have two columns, one that contains all three buttons stacked and a second for the image. Make sure that the offsets + column widths are no more than 12 to keep everything on the same line.

You are my saviour! Thanks a million!