CODEWITHSUNDEEP
bootstrap-4
jjcastil
jjcastil

Reputation: 199

Have text not wrap inside a bootstrap row with 2 columns

I have a simple layout that consists of a row that contains 2 columns within a card. I have tried different combinations of column numbers, adding no-gutter, different horizontal alignment methods but I can't seem to have the text just be in 2 lines. The closest I got was like this codeply:

https://www.codeply.com/p/xtbQnKs83k

I want the Cost and ABC text in the second column to not wrap and use the whole card space. Something like this:

Type: H. 12345678                  | Cost: 71.09
Target: aaaaaaaaaaaaaaa            | ABC: 123 ggg

Upvotes: 1

Views: 35

Answers (1)

Vinay
Vinay

Reputation: 2339

Add width in card body

<div class="card">
<div class="card-body" style="width:400px">
  <div class="row">
    <div class="col-9">
      <h5 class="card-title">TITLE
      </h5>
      <h6 class="card-subtitle mb-2 text-muted">Released: Aug2</h6>
    </div>
    <div class="col-3">
      <span class="badge badge-pill badge-success">NEW</span>
    </div>
  </div>
  <div class="row justify-content-around no-gutter">
    <div class="col-6">
      Type: H. 12345678<br> 
      Target: aaaaaaaaaaaaaaa
    </div>
    <div class="col-6" style="inline block">
      <span>Cost: 71.09</span><br> 
      <span>ABC: 123 ggg</span>
    </div>
  </div>

</div>

Upvotes: 1

Related Questions