CODEWITHSUNDEEP
cssbootstrap-4
headkit
headkit

Reputation: 3327

How to move title to the left of text inside a Bootstrap 4 card item?

I have a card item with a title and a card-text in Bootstrap 4 and I want to move the title to the left of the text for screens that are not mobile. How could that be done? Thnx!

<div class="card flex-row flex-wrap">
  <div class="card-block px-2">
      <div class="card-title border-0">
        <h3>Some title to be set to the left of the text</h3>
      </div>
      <div class="card-text">
        Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
      </div>
  </div>
</div>

Fiddle is here

Upvotes: 1

Views: 331

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362630

Use the responsive flexbox utility classes. For example d-flex flex-md-row flex-column on the card-body...

    <div class="card">
        <div class="card-body d-flex flex-md-row flex-column px-2">
            <div class="card-title border-0">
                <h3>Some title to be set to the left of the text</h3>
            </div>
            <div class="card-text">
                Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
                irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore.
                Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
            </div>
        </div>
    </div>

Demo: https://www.codeply.com/go/gtCUz1cd1y

Upvotes: 1

Related Questions