Bootstrap 4: Full Width Inline Button - html

Question

The title might be misleading, but I didn't know how else to name it.
In any case, I need to have an div/image inlined with a text, and a button beneath that text. The issue is, I can't really make the button take the full width without adding any padding, no matter what I try.
To make my explanation clearer, here's an image of what I'm trying to make:
And I'm trying to use Bootstrap 4 utilities only.
This is my code so far:
.col-md-3 {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
}
.btn {
background-color: #292a2c;
color: #ededed;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
How can I make this work? Also, the div with a class .img is a placeholder in a way, and needs to stay like that.
Thank you!

Answer 1

You can achieve this by using bootstrap media object with no additional css. Please see code snippet below
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="media">
<img src="https://via.placeholder.com/188x88" class="mr-3" alt="">
<div class="media-body">
<h5 class="mt-0">Media heading</h5>
<button class="btn btn-primary btn-block">Button</button>
</div>
</div>
</div>
</div>
</div>

Answer 2

You can try something like this, then style it accordingly:
<div class="container-fluid">
<div class="row">
<div class="col-4">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ79Qe630Fli9-SIDz188GQURmrRfhh6AksMKexPP5JvsE7AJ6t01mf5A">
</div>
<div class="col-8">
<div class="row">
<p>text</p>
</div>
<div class="row">
<button>button</button>
</div>
</div>
</div>
</div>

Answer 3

Here is the code for getting as shown in the image
'<div class="col-md-12"><div class="row"><div class="col-md-3"><div class="row"><div class="img"></div></div></div>
<div class="col-md-6"><div class="row">
<h6 class="m-auto">Text goes here</h6><button class="btn rounded-0 btn-block">Button</button></div></div></div>
For style use the style in your question

Answer 4

You could do something like this.
Note that Bootstrap by default does not have a black background class so you would have to create one.
.bg-black {
background-color: #000 !important;
border: 2px solid #000 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid"> <!-- Make it full width -->
<div class="row d-flex"> <!-- display flex -->
<div class="col-4 align-self-stretch"> <!-- stretch the column -->
<img class="w-100" src="http://placehold.it/200x200" />
</div>
<div class="col-8 align-self-stretch"> <!-- stretch the column -->
<p>Some Text Here.<br/> Can be long or short</p>
<p>Yet another paragraph</p>
<p>And one more paragraph</p>
<button class="btn btn-primary bg-black btn-block rounded-0">Btn Txt</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 5

.col-md-3 {
background-color: #ededed;
width:100% !important;
}
.col-md-3> div{
display:inline-block;
float:left;
width: 60%;
height:100%;
}
.img {
width: 15% !important;;
height: 88px !important;
background-color: #292a2c;
display:inline-block;
}
.btn {
width: 60%;
background-color: #292a2c;
color: #ededed;
height:50%;
display:inline-block;
}
<div class="col-md-3 d-flex p-0">
<div class="img"></div>
<div>
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>

Answer 6

Everything looks good just make sure that you have bootstrap.css file in right place and make sure that its working.
I made some changes to your code, its a bit hard coded but u must take care to overwrite bootstrap classes and don't change them directly.
.box {
background-color: #ededed;
}
.img {
width: 188px;
height: 88px;
background-color: #292a2c;
float: left;
margin-right: 5px;
}
.text {
float: left;
}
.btn {
background-color: #292a2c;
color: #ededed;
margin-top: 33px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 d-flex p-0">
<div class="box">
<div class="img"></div>
<div class="text">
<h6 class="m-auto">Text goes here</h6>
<button class="btn rounded-0 btn-block">Button</button>
</div>
</div>
</div>