Bootstrap 4 - customized button with text and image on right, flexed for bootstrap

Question

I would like to create a div that is a button, and it includes a picture of a flag and a abv of a country, I've put some code in to what I want, but its not bootstrap's way, I'm struggling to get my head around it and how I can do this with bootstrap.

    <div class="countrylink">
<div class="abvcountry">
    AFG
</div>

<div class="countryflag">
<img src="../../Downloads/afghanistan_texture.gif">
</div>

and here is the styling.

        .countrylink {
    position:relative;
    width: 260px;
    height: 60px;
    background:olivedrab;
    margin-left: 55px;
    margin-top: 20px;
    float:left;
} 

.abvcountry {
    position:absolute;
    display: inline;
    background-color:#FFBF55;
    width: 60px;
    background:tomato;
    height:60px;
    left:0px;
}

.countryflag {
        position: absolute;
        display: inline;
        background-color: #0FF;
        width: 200px;
        background: blue;
        left: 60px;
        height: 60px;
}

.countryflag img {
width: 100%;
height: 100%;
}

I just feel it will look a lot better through Bootstrap when displayed on a mobile or tablet

Answer 1

Just use the btn btn-lg classes as a basis for an a tag.

And if needed you can use one of the px-* classes for horizontal padding control:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<p class="mb-0">px-3:</p>
<a class="btn btn-lg px-3 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-4:</p>
<a class="btn btn-lg px-4 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>
<p class="mb-0">px-5:</p>
<a class="btn btn-lg px-5 btn-primary" href="#" role="button">USA <img src="https://lipis.github.io/flag-icon-css/flags/4x3/us.svg" height="30" alt="USA flag"></a>