Article within the image - html

Question

I would like to have something along the lines of (the bordered thing is a a picture and text has inverse coloring so that it is easy to read)
Mind you the image is a simple div tag that is going to live in
<div class = "row">
<div class = "col-md-6">
<h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
</div>
However I do not know a first thing of where to start from. I tried reading bootstrap tutorials and they didn't provide much. I understand that I haven't provided any piece of code to show my work, but I honestly do not even know where to start, or what to search for or what to do. So I am not really asking for a full solution or anything, but if you could point me in right direction I will be ever so grateful

Answer 1

here you go
.col-md-6{
width:50%;
}
.image{
position:relative;
}
.image img{
width: 300px;
}
.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}
.text h3, .text p{
color:#f63;
}
<div class="row">
<div class="col-md-6">
<div class="image">
<div class="text"><h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
<img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
</div>
</div>
</div>

Answer 2

Quillion, I don't understand what your question is. The code above should render almost what you want. Nevertheless maybe this helps you:
I wrapped your code in a main container .container-fluid and in a .card element, both can be found in the bootstrap documentation.
I just added one additional style for a wider border. You can play with it a little and should be quickly get the style you need. Here is a link to the pen: https://codepen.io/scheinercc/pen/pdwdvx
Hope that helps.
<style>
.custom-border-width-3 {
border-width: 3px;
}
<style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card mt-2 custom-border-width-3">
<div class="card-body">
<h1>Title</h1>
<p>
Short and nice paragraph
</p>
</div>
</div>
</div>
</div>
</div>