Twitter Bootstrap Question posted in

Align a Span and Heading within card-header-Twitter bootstrap

I would like to style Bootsrap 4’s card-header so that there is a heading and span vertically aligned on same line. The header should consist of a <hX> heading for expanding card‘s card-body and a <span> which is non-clicable and pulled to the right:

align-items-baseline
How can I ensure the “Non-clicable body summary” span appear on same line as the “Clicable header”? 

.card-header h3 {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<div class="card">
  <div class="card-header" id="headingOne">
    <div class="float-right card-summary">Non-clicable body summary</div>
    <a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
      <h3>
        Clicable header
      </h3>
    </a>
  </div>

  <div id="collapse" class="collapse" aria-labelledby="headingOne">
    <div class="card-body">
      <p>Some content</p>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    Is this what you’re looking for?

    .card-header h3 {
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />

<div class="card">
  <div class="align-items-center card-header d-flex justify-content-between" id="headingOne">
    <a class="mb-0" data-toggle="collapse" data-target="#collapse" aria-expanded="true" aria-controls="collapse">
      <h3>
        Clicable header
      </h3>
    </a>
    <div class="card-summary">Non-clicable body summary</div>
  </div>

  <div id="collapse" class="collapse" aria-labelledby="headingOne">
    <div class="card-body">
      <p>Some content</p>
    </div>
  </div>
</div>

    Removed floats and used default BS flexbox utility classes for
    section.

    Login or Signup to reply.
  2. 0

    first remove float-right class.

    you can use the d-flex justify-content-between class in card-header div.

    <div class="card-header d-flex justify-content-between"  id="headingOne">

    and also add align-self-center class. <div class="card-summary align-self-center">Non-clicable body summary</div>

    Working Demo

    Ref : Bootstrap utilities

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

Back To Top
Search