CODEWITHSUNDEEP
angularbootstrap-5card
Hesk
Hesk

Reputation: 327

Bootstrap card - width should fit content of child

Following example:

<div class="container-fluid">
  <div class="row pt-3">
    <div class="col-lg-4 d-flex flex-column align-items-center">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-5 d-flex align-items-center">Status</div>
            <div class="col-7 d-flex">
                TestTestTestTestTestTestTestTestTestTestTestTestTest
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8 d-flex justify-content-center align-items-center content-height">
      Main Content
    </div>
  </div>
</div>

Results in:

enter image description here

I would like the width of the card to fit the content. How to achieve this?

Update1 - Answer to @Dimitar Cetelev When i remove d-flex ist just breaks the content:

enter image description here

Update2

Changing to col-auto works well. But now the columns wont have the same width:

<div class="container-fluid">
  <div class="row pt-3">
    <div class="col-lg-4 d-flex flex-column align-items-center">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-auto d-flex align-items-center">Status</div>
            <div class="col-auto">
              StatusStatusStatusStatusStatusStatusStatusStatusStatusStatus
            </div>
          </div>
          <div class="row">
            <div class="col-auto d-flex align-items-center">Workflow</div>
            <div class="col-auto">
              WorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWork
            </div>
          </div>
          <div class="row">
            <div class="col-auto d-flex align-items-center">API</div>
            <div class="col-auto">
              ApiApiApiApiApiApi
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8 d-flex justify-content-center align-items-center content-height">
      Main Content
    </div>
  </div>
</div>

Results in:

enter image description here

Desired outcome without setting width of card to a fix-px: enter image description here

Upvotes: 0

Views: 3062

Answers (2)

Arun G
Arun G

Reputation: 264

Replace class col-5 and col-7 with col-auto.

<div class="container-fluid">
  <div class="row pt-3">
    <div class="col-lg-4 d-flex flex-column align-items-center">
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="col-auto d-flex align-items-center">Status</div>
            <div class="col-auto d-flex">
                TestTestTestTestTestTestTestTestTestTestTestTestTest
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8 d-flex justify-content-center align-items-center content-height">
      Main Content
    </div>
  </div>
</div>

Update 1

Reverted the changes from previous update.

Remove d-flex class and add style="width:inherit"

<div class="container-fluid">
  <div class="row pt-3">
    <div class="col-lg-12 d-flex flex-column align-items-center">
      <div class="card" style="width:inherit">
        <div class="card-body">
          <div class="row">
            <div class="col-5 d-flex align-items-center">Status</div>
            <div class="col-7">
              StatusStatusStatusStatusStatusStatusStatusStatusStatusStatus
            </div>
          </div>
          <div class="row">
            <div class="col-5 d-flex align-items-center">Workflow</div>
            <div class="col-7">
              WorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWorkWork
            </div>
          </div>
          <div class="row" style="width: inherit;">
            <div class="col-5 d-flex align-items-center">API</div>
            <div class="col-7">
              ApiApiApiApiApiApi
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-12 d-flex flex-column align-items-center content-height">
      Main Content
    </div>
  </div>
</div>

Please note for smaller viewports, The card will contain the content by breaking the text if it is lengthy. This will avoid horizontal scrolling.

Upvotes: 0

Dimitar Cetelev
Dimitar Cetelev

Reputation: 392

Remove d-flex class

<div class="col-5 d-flex align-items-center">Status</div>
 <div class="col-7">
 TestTestTestTestTestTestTestTestTestTestTestTestTest
</div>

Upvotes: 1

Related Questions