CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
steros
steros

Reputation: 1924

what elements to use for a card inspired layout

I want to achieve the following layout. So in my mockup I used cards as they seemed to be the closest to what I want to create. Now implementing the layout it seems that cards isn't actually what I should use for this.

What elements should be used instead?

the layout I want to achieve

    @foreach ($foos as $foo)
        <div class="card">
            <div class="card-header">
                {{ $foo->header }}
            </div>
            <div class="card-body">
                <h4 class="card-title">{{ $foo->title }}</h4>
                <p class="card-text">Some text.</p>
            </div>
        </div>
    @endforeach

Upvotes: 0

Views: 58

Answers (1)

Klooven
Klooven

Reputation: 3926

You can do something like this using cards. We have a card with multiple cards inside. Then I've added classes like p-2, to make the padding smaller in the main card.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="card border-primary">
  <div class="card-header bg-primary">Text</div>
  <div class="card-body p-2">
    <div class="card border-success mb-1">
      <div class="card-header bg-success">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card mb-1">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h4 class="card-title">Primary card title</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions