CODEWITHSUNDEEP
csstwitter-bootstrap
mahen3d
mahen3d

Reputation: 7734

Bootstrap 4 - Text Align in Card Layout

I have following layout that create "Age:36" set in the one line together, 

<div class="card-body">
    <h5 class="card-title header_big text-capitalize"> example's Profile</h5>
    <p class="card-text">
        Age: <span class="font-weight-bold">36</span>
    </p>
</div>

I want to set it apart like a full 100% width table with cells being 50%-50%, however without using tables.

<table style="width:100%">
    <tr>
        <td style="width:50%">Age</td>
        <td style="width:50%">36</td>
    </tr>
</table>

What is the best way to do this?

Upvotes: 0

Views: 504

Answers (5)

besartm
besartm

Reputation: 568

I think you are looking for this solution: 

<div class="container">
    <div class="row">
        <div class="col">Age</div>
        <div class="col">36</div>
    </div>
</div>

Upvotes: 0

julianstark999
julianstark999

Reputation: 3616

The simplest solution is to use a row with 2 columns

<div class="card-body">
    <h5 class="card-title header_big text-capitalize">Example's Profile</h5>
    <div class="row">
        <div class="col">
            Age:
        </div>
        <div class="col">
            <span class="font-weight-bold">36</span>
        </div>
    </div>
</div>

https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

An other solution could to use flex. The disadvantage is, that you have to give your 2 'columns' a padding or margin manually.

<div class="d-flex">
    <div class="flex-fill">
        Age:
    </div>
    <div class="flex-fill">
        <span class="font-weight-bold">36</span>
    </div>
</div>

https://getbootstrap.com/docs/4.1/utilities/flex/

Upvotes: 2

Anca Spatariu
Anca Spatariu

Reputation: 151

Alternatively, you can use the library-agnostic flexbox version.

HTML:

<div class="container">
  <div class="col">
    Age
  </div>
  <div class="col">
    36
  </div>
</div>

CSS:

.container {
  display: flex;
}

.col {
  display: flex;
  width: 50%;
}

Upvotes: 0

Alok Mali
Alok Mali

Reputation: 2881

See this example

.card-text-custom {
  display:flex;
  justify-content: space-between;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
      <h5 class="card-title header_big text-capitalize"> example's Profile</h5>
      <p class="card-text card-text-custom">
          <span> Age:</span> <span class="font-weight-bold">36</span>
      </p>
  </div>
  <div class="card-footer">Footer</div>
</div>

However you can use the bootstrap grid system as well.

Upvotes: 0

CyberMessiah
CyberMessiah

Reputation: 1268

I think if I were you I would opt for placing the col-md-6 classes on the appropriate fields. That should meet the need. 

 <div class="row">
  <div class="col-6">
   Age
  </div>
 <div class="col-6">
   36
 </div>
</div>

Upvotes: 0

Related Questions