CODEWITHSUNDEEP
htmlcssbootstrap-4
Thos-Host
Thos-Host

Reputation: 67

How to make image left and span right on <center>?

I want to make an image left and a <span class="badge badge-primary">v 2.1</span> on right,all these items are on <center>.

code:

<center><div class="card" style="margin-top: 5px; border-style: solid;
  border-color: grey;
  border-radius: 4px; border-width: 4px;">
  <img src="../install/images/brand/logo_wide.webp" alt="Thos Host Billing Software"><span class="badge badge-primary">v 2.1</span>
  <div class="container">
    // something    
  </div>
</div>

Upvotes: 0

Views: 497

Answers (1)

Jakub Muda
Jakub Muda

Reputation: 6714

<center> tag is obsolete and shouldn't be used. Use flexbox instead because it's much easier.

Flexbox documentation: https://getbootstrap.com/docs/4.4/utilities/flex/

Check out my demo. If you don't use align-items-* class you need to wrap both <img> and <span> in <div> because otherwise it will be stretched vertically.

img{height:100px}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="d-flex justify-content-center align-items-center">
    <img src="https://img.icons8.com/material/4ac144/256/camera.png" alt="">
    <span class="badge badge-primary">v 2.1</span>
</div>

Upvotes: 1

Related Questions