CODEWITHSUNDEEP
htmlcssbootstrap-4
Carol.Kar
Carol.Kar

Reputation: 5215

Align layout in column

I am using bootstrap and I am trying to create the following layout:

enter image description here

I tried 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
      <div>APPLE INC (AAPL)</div>
      <div>NASDAQ</div>
      <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
    </div>
  </div>
</div>

I tried flexboxes, however my layout does not arrange.

How to arrange the text next to the image?

Any suggestions what I am doing wrong?

Upvotes: 1

Views: 42

Answers (1)

Zze
Zze

Reputation: 18865

You were 95% the way there. I have finished it off for you. Really all you were missing was some nested bootstrap to make a col-10 that contains the company details sitting alongside the logo.

.name {
  font-size: 2rem;
}

.tv-symbol-icon {
  border-radius: 50%;
  width: 100%;
}

.tv-flag-country {
  margin: 0 0.5em;
  border-radius: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-2 text-left">
  <div class="card card-primary">
    <div class="card-body p-2">
      <div class="row">
        <div class="col-sm-2">
          <img class="tv-symbol-icon tv-symbol-icon--size-auto" src="https://s3-symbol-logo.tradingview.com/apple--big.svg" alt="Apple Inc icon">
        </div>
        <div class="col-sm-10">
          <div class="row">
            <div class="name">APPLE INC</div>
          </div>
          <div class="row">
            <div>NASDAQ</div>
            <div><img class="tv-flag-country tv-flag-country--us tv-flag-country--size_sub_title" src="https://www.tradingview.com/static/images/svg/common/flags/flag-square-us.svg" alt="US Flag"></div>
            <div>(AAPL)</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions