Menu
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
888
To create image and text side by side use the grid system property of bootstrap and create 2 columns of span 6-6. Put your image in one column and your text in another. On smaller devices, it will automatically align vertically.
Answer: Use the text-right Class You can simply use the class . text-right on the containing element to right align your Bootstrap buttons within a block box or grid column. It will work in both Bootstrap 3 and 4 versions.
Place the image at the required line inside the <body> tag. Wrap the image element in . float-left class for aligning towards left, . float-right to align towards right.
Add class=carousel-caption to the HTML tag which contains your text which needs to be positioned over your image !. (And then if you wish add custom css top:xyz% to your . carousel-caption class in css stylesheet to make it align vertically at middle.)
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
