Twitter Bootstrap Question posted in

Align multiple numbers within row-Twitter bootstrap

I am using bootstrap to try to create the following layout:

enter image description here

Find below my minimum example:

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div>
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div>
                  <span class="curr"> USD</span>
                </div>
                <div>
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="markettime">Market Open</span>
            <span class="markettime2">(May 07 13:19 UTC-4)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

As you can see the text looks quite similar, but does not align correctly.

Any suggestions why?

Tags:

2

Answers


  1. 0

    You have each of the parts stored in divs, which default to display: block. Block-items take up their entire row. One option would be to set those displays to inline:

    .curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.price {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #131722;
  white-space: nowrap;
  display: inline-block;
  font-size: 36px;
  line-height: 1;
  height: 34px;
  font-weight: 700;
}

.diff {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  white-space: nowrap;
  font-size: 18px;
  color: #26a69a;
  display: inline-block;
}

.markettime {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #37bc9b;
}

.markettime2 {
  -webkit-tap-highlight-color: transparent;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #787b86;
  white-space: nowrap;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>

<div class="row my-2">
  <div class="col-lg-8">
    <div class="card card-primary">
      <div class="card-body p-2">
        <div class="row">
          <div>
            <div>
              <div class="row">
                <div style="display: inline;">
                  <div class="price">304.2<span class="">0</span></div>
                </div>
                <div style="display: inline;">
                  <span class="curr"> USD</span>
                </div>
                <div style="display: inline;">
                  <span class="diff">+3.57</span>
                  <span class="diff">(+1.19%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div>
            <span class="markettime">Market Open</span>
            <span class="markettime2">(May 07 13:19 UTC-4)</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

    I do not recommend that you use inline styling like I’ve used, I just did a quick edit to show the difference when changing the display type.

    Login or Signup to reply.
  2. 0

    All those empty <div>s create new block elements that create a new line and fill up all the horizontal space available.

    I have cleaned up both the HTML and CSS code in here, but with only the HTML changes it will already work as expected:

    body {
  /* Moved all these common props up here: */ 
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1
}

.price {
  font-size: 36px;
  font-weight: 700;
  color: #131722;
}

.curr {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
}

.diff {
  font-size: 18px;
  color: #26a69a;
}

.marketTime__base {
  font-size: 11px;
  letter-spacing: .4px;
  margin-top: 8px;
}

.marketTime__state {
  color: #37bc9b;
}

.marketTime__datetime {
  color: #787b86;
}
    <div class="row">
  <span class="price">304.2<span class="">0</span></span>
  <span class="curr"> USD</span>
  <span class="diff">+3.57</span>
  <span class="diff">(+1.19%)</span>
</div>

<div class="marketTime__base">
  <span class="marketTime__state">Market Open</span>
  <span class="marketTime__datetime">(May 07 13:19 UTC-4)</span>
</div>

    Alternatively, you could use display: inline or display: inline-block to style those <div>s differently, but I think that HTML code could be simplified a lot.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search